(JS basic) 4. short circuit evaluation
short circuit evaluation이란?
short circuit evaluation. 한글로 굳이 나타내 보자면 단락 평가로 나타낼 수 있는 단어이다. 자바스크립트의 논리 연산(AND, OR 등등..)은 왼쪽에서 오른쪽으로 이뤄진다. 이때 앞의 비교에서 명확한 결과가 예측되어 뒤에 나오는 비교를 더이상 할 필요가 없을 때 비교를 중지하고 답을 내는 것이다. 이 개념은 자바스크립트 뿐만 아니라 다른 언어에서도 등장한다.
예를 들어보자면?
공채 시험에도 나왔던 문제이다(정확하게 같은 코드는 아니지만). 다음 두 코드 중에 어떤 코드가 많은 비교연산이 이뤄지는지 보자.
(괜히 i, j로 테스트를 만들어서 비교가 잘 나타나지 않는 점 죄송합니다ㅠㅠ)
위와 아래 코드의 차이는 j와 i를 비교하는 5번과 15번 라인에 있다. 위 코드는 i가 5000인지를 먼저 확인하고 아래 코드는 j가 5000 초과인지를 확인한다.
어떤 코드가 효율적이게 보이는가? 당연히 첫번째 비교다. i가 5000인지를 먼저 확인한다면 j를 확인하는 논리 연산은 불필요해진다. 이렇게 되면 데이터의 양이 늘어날 수록 두번째 조건에 비해 첫번째 코드는 비교양에 있어서 엄청난 차이를 보게된다. 이게 short-circuit의 기본 기조이다.
자바스크립트 내에서 어떤 의미로 사용될 수 있을까?
변수를 할당할 때 이 논리연산을 사용하면 변수에 값을 할당할 때 방어로직이나 여러가지 활용을 꾀할 수 있다.
우선 truthy와 falsy에 대한 내용은 여기서 보고오자.(알고 있겠지만)
* Truthy: https://developer.mozilla.org/ko/docs/Glossary/Truthy
* falsy: https://developer.mozilla.org/ko/docs/Glossary/Falsy
변수에 할당할 때 규칙은 간단하다.
const orResult = A || B;
const andResult = A && B;orResult는 A가 truthy면 A 아닐 경우 B이다.
andResult는 A가 truthy 이고 B가 truthy일 경우 B, 아닐 경우는 모두 A다.
이 규칙은 변수의 갯수가 늘어나도 동일하다. 퀴즈를 하나 풀어보자.
(1)은 1이다. 0은 falsy 이기 때문에 무조건 뒤의 값이 할당된다.
(2)는 0이다. 0이 falsy이기 때문에 short-curcuit에 따라 뒤 조건을 비교하지 않는다.
(3)은 {}이다. {}는 truthy이다. short-curcuit에 따라 뒤 조건을 비교하지 않는다.
(4)는 ‘abc’이다. {}와 문자열 ‘abc’모두 truthy이기 때문이다.
(5)는 ‘NHN’이다. person.company는 person객체에 존재하지 않는 프로퍼티므로 접근시 undefined이다. falsy라는 뜻이다. 이 경우 방어로직처럼 person에 company가 없을 경우 모든 company의 기본값을 NHN으로 지정하는 식으로 쓸 수 있다.
(6)은 100이다. company와 다르게 age는 존재하는 프로퍼티다. 게다가 값은 28로 truthy이다. 이 경우 뒤 조건까지 비교하게 되어 100이 된다.
(7)은 1이다. 첫번째 truthy의 값이 할당된다.
(8)은 0이다. short-curcuit에 따라 첫번째 값이 falsy가 되어 뒤 조건을 비교하지 않는다.
사실 다른 언어를 배우던 사람들이 보기에 자바스크립트는 불규칙적이고 통일성이 없어보인다는 말을 자주한다. 하지만 자바스크립트의 몇 가지 특성들만 이해한다면 충분히 규칙적이고 논리적으로 작동한다는 것을 말하고 싶다.
(급 마무리)
