논리 연산자

첫 번째 truthy를 찾는 OR 연산자 '||'

OR 연산자와 피연산자가 여러 개인 경우:

result = value1 || value2 || value3;

이때, OR 연산자는 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가합니다.

각 피연산자를 불린형으로 변환합니다. 변환 후 그 값이 true이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환합니다.

피연산자 모두를 평가한 경우 (모든 피연산자가 false로 평가되는 경우)엔 마지막 피연산자를 반환합니다.

 

여기서 핵심은 반환 값이 형 변환을 하지 않은 원래 값이라는 것입니다.

 

정리해 보자면 이렇습니다. OR 연산자를 여러 개 체이닝(chaining) 하면 첫 번째 truthy를 반환합니다. 피연산자에 truthy가 하나도 없다면 마지막 피연산자를 반환합니다.

 

예시:

alert( 1 || 0 ); // 1 (1은 truthy입니다)

alert( null || 1 ); // 1 (1은 truthy입니다)
alert( null || 0 || 1 ); // 1 (1은 truthy입니다)

alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을 반환합니다)

이런 OR 연산자의 추가 기능을 이용하면 여러 용도로 OR 연산자를 활용할 수 있습니다.

  1. 변수 또는 표현식으로 구성된 목록에서 첫 번째 truthy 얻기

firstName, lastName, nickName 이란 변수가 있는데 이 값들은 모두 옵션 값이라고 해봅시다.

OR || 을 사용하면 실제 값이 들어있는 변수를 찾고, 그 값을 보여줄 수 있습니다. 변수 모두에 값이 없는 경우엔 익명을 보여줍시다.

let firstName = "";
let lastName = "";
let nickName = "바이올렛";

alert( firstName || lastName || nickName || "익명" ); // 바이올렛

모든 변수가 Falsy이면 "익명"이 출력되었을 겁니다.

 

  2. 단락 평가

OR 연산자 || 가 제공하는 또 다른 기능은 '단락 평가(short circuit evaluation)'입니다.

위에서 설명해 드린 바와 같이 OR은 왼쪽부터 시작해서 오른쪽으로 평가를 진행하는데, truthy를 만나면 나머지 값들은 건드리지 않은 채 평가를 멈춥니다. 이런 프로세스를 '단락 평가'라고 합니다.

 

단락 평가의 동작 방식은 두 번째 피연산자가 변수 할당과 같은 부수적인 효과(side effect)를 가지는 표현식 일 때 명확히 볼 수 있습니다.

 

아래 예시를 실행하면 두 번째 메세지만 출력됩니다.

true || alert("출력이 안됩니다");
false || alert("출력이 됩니다");

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

 

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

 

첫 번째 falsy를 찾는 AND 연산자 '&&'

AND 연산자와 피연산자가 여러 개인 경우를 살펴봅시다.

result = value1 && value2 && value3;

AND 연산자 &&는 가장 왼쪽 피연산자로부터 시작해 오른쪽으로 나아가며 피연산자를 평가합니다.

각 피연산자는 불린형으로 변환됩니다. 변환 후 값이 false이면 평가를 멈추고 해당 피연산자의 변환 전 원래 값을 반환합니다.

피연산자 모두가 평가되는 경우(모든 피연산자가 true로 평가되는 경우)엔 마지막 피연산자가 반환됩니다.

 

정리해 보자면 이렇습니다. AND 연산자는 첫 번째 falsy를 반환합니다. 피연산자에 falsy가 없다면 마지막 값을 반환합니다.

 

위 알고리즘은 OR 연산자의 알고리즘과 유사합니다. 차이점은 AND 연산자가 첫 번째 falsy를 반환하는 반면, OR은 첫 번째 truthy를 반환한다는 것입니다.

 

예시:

// 첫 번째 피연산자가 truthy이면,
// AND는 두 번째 피연산자를 반환합니다.
alert( 1 && 0 ); // 0
alert( 1 && 5 ); // 5

// 첫 번째 피연산자가 falsy이면,
// AND는 첫 번째 피연산자를 반환하고, 두 번째 피연산자는 무시합니다.
alert( null && 5 ); // null
alert( 0 && "아무거나 와도 상관없습니다!" ); // 0

AND 연산자에도 피연산자 여러 개를 연속해서 전달할 수 있습니다. 첫 번째 falsy가 어떻게 반환되는지 예시를 통해 살펴봅시다.

alert( 1 && 2 && null && 3 ); // null

아래 예시에선 AND 연산자의 피연산자가 모두 Truthy이기 때문에 마지막 피연산자가 반환됩니다.

alert( 1 && 2 && 3 ); // 마지막 값, 3

🔅  && 의 우선순위가 || 보다 높습니다.

AND 연산자의 우선순위는 OR 연산자보다 높습니다.

따라서 a && b || c && d 는 (a && b) || (c && d) 와 동일하게 동작합니다.

! (NOT)

논리 연산자 NOT은 느낌표 !를 써서 만들 수 있습니다.

NOT 연산자의 문법은 매우 간단합니다.

result = !value;

NOT 연산자는 인수를 하나만 받고, 다음 순서대로 연산을 수행합니다.

1. 피연산자를 불린형( true / false )으로 변환합니다.

2. 1에서 변환된 값의 역을 반환합니다.

 

예시:

alert( !true ); // false
alert( !0 ); // true

NOT을 두 개 연달아 사용( ! ! )하면 값을 불린형으로 변환할 수 있습니다.

alert( !!"non-empty string" ); // true
alert( !!null ); // false

이때, 첫 번째 NOT 연산자는 피연산자로 받은 값을 불린형을 변환한 후 이 값의 역을 반환하고, 두 번째 NOT 연산자는 첫 번째 NOT 연산자가 반환한 값의 역을 반환합니다. 이렇게 NOT을 연달아 사용하면 특정 값을 불린형으로 변환할 수 있습니다.

참고로, 내장 함수 Boolean을 사용하면 ! ! 을 사용한 것과 같은 결과를 도출할 수 있습니다.

alert( Boolean("non-empty string") ); // true
alert( Boolean(null) ); // false

NOT 연산자의 우선순위는 모든 논리 연산자 중에서 가장 높기 때문에 항상 &&나 ||보다 먼저 실행됩니다.