Logical Operators

개발을 하며 화면을 제어하기 위해 논리 연산자를 많이 쓰는 것 같다. 간단하지만 한 번 상기하기 위해 간단한 예와 MDN 문서를 살펴보려 한다.

 

_____

 

true || anything === false
false || anything === false
true && anything === anything
false && anything === false

 

위 코드 중 참인 것은 무엇일까?[1] 흔히들 논리연산자는 Boolean 타입만을 피연산자로 갖는다고 착각하지만 논리연산자는 주로 Boolean 값과 함께 사용된다[2].

 

연산자	사용법	설명
&&	expr1[3] && expr2	expr1이 false로 변환될 수 있으면 expr1을 반환하고, 그렇지 않으면 expr2를 반환한다.
||	expr1 || expr2	expr1이 true로 변환될 수 있으면 expr1을 반환하고, 그렇지 않으면 expr2를 반환한다.
!	!expr	피연산자가 true로 변환될 수 있으면 false를 반환한다.

 

&& 연산자와 || 연산자는 불리언 값이 아닌 피연산자와 함께 사용될 수 있지만, 반환 값을 항상 불리언 원시값으로 변환할 수 있으므로 불리언 연산자로 생각할 수 있다. 이때 반환 값을 직접 불리언으로 바꾸려면 Boolean 함수나 이중 부정 연산자를 사용하면 된다.

 

console.log(null && "dog");	// null
console.log(NaN && "dog");	// NaN
console.log(0 && "dog");	// 0
console.log('' && "dog");	// ''
console.log("" && "dog");	// ""
console.log(undefined && "dog");	// undefined

console.log(!!(null && "dog"));	// false
console.log(!!(NaN && "dog"));	// false
console.log(!!(0 && "dog"));	// false
console.log(!!(`` && "dog"));	// false
console.log(!!(undefined && "dog"));	// false

 

_____

1. 정답은 다음과 같다.

console.log(true || "abc"); // true
console.log(false || "abc"); // abc
console.log(true && "abc"); // abc
console.log(false && "abc"); // false

2. &&와 || 연산자는 실제로는 피연산자 중에 하나의 값을 반환하기 때문에, 이 연산자가 불리언 값이 아닌 값과 함께 사용되면 불리언 값이 아닌 값을 반환한다.

console.log("cat" && "dog");	// dog
console.log(true && "dog");	// dog
console.log(false && "dog");	// false
console.log("cat" && false);	// false

3. expr1은 식이다. 자바스크립트에서는 식과 문이 구분된다(관련: Expressions versus statements in JavaScript).

• 식(Expression): 값을 산출해내는 코드로, 함수의 인자로 전달될 수 있음
• 문(Statement): 특정 액션을 수행하는 코드로, 사실상 코드 한줄 한줄이 모두 해당

 

_____

참고자료

 

• Logical Operators