[JavaScript] JS의 논리연산자, OR과 AND

개요

JS의 논리연산자는 다른 언어에 비해 두드러지는 특성이 있다. 이러한 논리 연산자를 잘 다뤄야 명확하게 코드를 구현할 수 있다.

 

---

JS의 OR Operator

전통적인 프로그래밍에서 OR 연산자는 불린값을 조작하는 데에 쓰인다. 우리가 일반적으로 생각하는 하나라도 참이면 true, 하나라도 거짓이면 false인 것이다.

 

 

JS의 논리연산자가 불린값을 다루는 방법은 다음과 같다.

alert(true || true );   // true
alert(false || true );  // true
alert(true || false );  // true
alert(false || false ); // false

 

 

가장 아래 false || false인 경우를 제외하고 모두 true를 반환한다.

조금 더 구체적으로 알아보면, OR 연산자와 피연산자가 여러 개인 경우 OR 연산자는 다음 순서에 따라 연산한다.

result = val1 || val2 || val3;

• 가장 왼쪽 피연산자부터 시작해서 오른쪽으로 나아가며 피연산자를 평가한다.
• 각 피연산자를 불린형으로 변환하면서, 그 값이 true이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다.
• 이렇게 불린형으로 변환할 때 모두 false라면 마지막 피연산자를 반환한다.

 

---

Truthy와 Falsy

이렇게 각 피연산자를 불린형으로 변환하면서 true인지 아닌지 판단하는 과정을 chaining이라고 하고, truthy와 falsy를 구별한다.

• truthy: 불리언을 기대하는 문맥에서 true로 평가되는 값이다. 따로 거짓같은 값으로 정의된 값이 아니면 모두 참같은 값으로 평가된다.(예: false, 0, -0, 0n, “”, null, undefined, Nan)
  • 여기서 주의할 점은 빈 문자열(””)은 false이지만 비어있는 배열은 false가 아니다.(예: {}, [])

 

예시

• 앞에서부터 확인했을 때 ‘1’이 truthy이기 때문에 바로 1 반환

alert(1 || 0);

 

• 앞에서부터 확인했을 때 falsy가 있지만 마지막 피연산자가 truthy이므로 1 반환

alert(null || 1);

 

• 앞에서부터 확인하면 null과 0은 falsy이지만 1은 truthy이기 때문에 1반환

alert(null || 0 || 1);

 

• 앞에서부터 확인했을 때 모두 falsy이므로 마지막 피연산자 반환

alert(undefined || null || 0);

 

---

논리 연산자 활용법

단락 평가(short circuit evaluation)

JS의 OR(||)은 왼쪽부터 시작해서 오른쪽으로 평가를 진행한다. 이때 truthy를 만나면 나머지 값들은 건드리지 않은 채 평가를 멈춘다. 따라서 아래와 같은 예제 코드의 경우에 효과를 볼 수 있다.

true || alert("printed");
false || alert("not printed");

 

첫 번째 줄의 || 연산자는 true를 만나자마자 평가를 멈추기 때문에 alert가 실행되지 않는다.

이렇게 단락 평가는 연산자 왼쪽 조건이 falsy일 때 명령어를 실행하고자 할 때 자주 쓰인다.

 

---

JS의 AND 연산자

AND 연산자와 피연산자가 여러 개인 경우를 보자.

result = val1 && val2 && val3;

 

AND 연산자 &&는 ||와 마찬가지로 왼쪽부터 시작해 오른쪽으로 나아가며 피연산자를 평가한다.

• 각 피연산자는 불린형으로 변환되고, 변환 후 값이 false이면 평가를 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다.
• 모든 피연산자가 true로 평가되는 경우엔 마지막 피연산자가 반환된다.

 

 

---

논리 연산자 특징

1. &&가 ||보다 우선순위가 높다.