[JS] 단축 평가(Short-Circuit Evaluation) 쉽게 이해하기 | &&, ||, 연산자 우선순위

[JS] 단축 평가(Short-Circuit Evaluation) 쉽게 이해하기

 

논리곱(&&), 논리합(||) 연산자를 사용한 단축 평가(단락 평가) 대해 쉽게 이해해보자.

자바스크립트에서 && 또는 ||를 사용한 표현식은 그 피연산자 중 하나로 평가된다.

표현식(expression)이란 값으로 평가될 수 있는 코드이다.

자바스크립트 표현식

대부분의 프로그래밍 언어에서, 논리곱(&&) 또는 논리합(||) 연산자를 이용한 표현식은 true 또는 false로 평가된다.

하지만, 자바스크립트에서는 표현식의 피연산자 중 하나로 평가된다.

일단 &&, || 연산자의 결합성은 좌결합성이므로 왼쪽에서 오른쪽으로 연산이 진행된다.

 

(좌) 논리곱 표현식, (우) 논리합 표현식

 

논리곱(&&) 연산자

피연산자를 왼쪽에서 오른쪽으로 확인하며 하나라도 falsy인 경우, 해당 falsy 값을 반환한다.

처음부터 끝까지 모든 피연산자가 truthy인 경우, 마지막 truthy 값을 반환한다.

 

논리합(||) 연산자

피연산자를 왼쪽에서 오른쪽으로 확인하며 하나라도 truthy인 경우, 해당 truthy 값을 반환한다.

처음부터 끝까지 모든 피연산자가 falsy인 경우, 마지막 falsy 값을 반환한다.

 

 

&&과 ||이 혼합되어 있는 경우

논리곱(&&) 연산자의 우선순위가 논리합(||) 연산자보다 높다.

따라서 &&, ||가 섞여있을 때는 논리곱(&&) 연산자의 연산이 먼저 이루어진 후, 논리합(||) 연산자의 연산이 이루어진다.

 

논리곱, 논리합 표현식

위 표현식은 왜 'def'로 평가될까? 연산 과정이 다음과 같이 이루어지기 때문이다.

'abc' && 'def' || 1 && true
('abc' && 'def') || (1 && true)
'def' || 1
'def'

 

자바스크립트의 falsy 값은 다음과 같다.

⚠️ 빈 객체와 배열은 truthy value임에 주의하자.

null
undefined
0
NaN
''
{} // 빈 객체는 truthy value이다.
[] // 빈 배열은 truthy value이다.

 

🤔💭 자바스크립트처럼 단축 평가가 일어나는 다른 프로그래밍 언어가 있는지 궁금하다.

 

---

References

모던 자바스크립트 Deep Dive (Chapter 9.4)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence