논리 연산자

자바스크립트엔 세 종류의 논리 연산자 ||(OR), &&(AND), !(NOT)이 있다.

연산자에 '논리’라는 수식어가 붙긴 하지만 논리 연산자는 피연산자로 불린형뿐만 아니라 모든 타입의 값을 받을 수 있다. 연산 결과 역시 모든 타입이 될 수 있다.

|| (OR)

result = a || b;

인수 중 하나라도 true이면 true를 반환하고, 그렇지 않으면 false를 반환한다.

자바스크립트의 OR 연산자는 다루긴 까다롭지만 강력한 기능을 제공한다. OR을 어떻게 응용할 수 있는지 알아보기 전에 먼저, OR 연산자가 불린값을 어떻게 다루는지 알아보도록 하겠다.

OR 연산자는 이항 연산자이므로 아래와 같이 네 가지 조합이 가능합니다.

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

피연산자가 모두 false인 경우를 제외하고 연산 결과는 항상 true이다.

피연산자가 불린형이 아니면, 평가를 위해 불린형으로 변환된다.

예를 들어, 연산 과정에서 숫자 1은 true로, 숫자 0은 false로 바뀐다.

if (1 || 0) { // if( true || false ) 와 동일하게 동작
  alert( 'truthy!' );
}

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

지금까진 피연산자가 불린형인 경우만을 다뤘다.

이제 자바스크립트에서만 제공하는 논리연산자 OR의 '추가’기능에 대해 알아보자.

추가 기능은 아래와 같은 알고리즘으로 동작한다.

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

result = value1 || value2 || value3;

이때, OR ||연산자는 다음 순서에 따라 연산을 수행한다.

1. 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가

2. 각 피연산자를 불린형으로 변환합니다.

3. 변환 후 그 값이 true이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환

4. 피연산자 모두를 평가한 경우(모든 피연산자가 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 연산자를 활용할 수 있다.

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

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

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

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

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

모든 변수가 falsy이면 "익명"이 출력될 것이다.

단락 평가

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

위에서 설명했듯이 OR||은 왼쪽부터 시작해서 오른쪽으로 평가를 진행하는데, truthy를 만나면 나머지 값들은 건드리지 않은 채 평가를 멈춘다.

이런 프로세스를 '단락 평가’라고 한다.

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

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

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

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

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

&& (AND)

result = a && b;

두 피연산자가 모두가 참일 때 true를 반환한다. 그 외의 경우는 false를 반환한다.

alert( true && true );   // true
alert( false && true );  // false
alert( true && false );  // false
alert( false && false ); // false

OR 연산자와 마찬가지로 AND 연산자의 피연산자도 타입에 제약이 없다.

if (1 && 0) { // 피연산자가 숫자형이지만 논리형으로 바뀌어 true && false가 된다.
  alert( "if 문 안에 falsy가 들어가 있으므로 alert창은 실행되지 않습니다." );
}

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

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

result = value1 && value2 && value3;

AND 연산자 &&는 아래와 같은 순서로 동작한다.

1. 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가

2. 각 피연산자는 불린형으로 변환

3. 변환 후 값이 false이면 평가를 멈추고 해당 피연산자의 변환 전 원래 값을 반환

4. 피연산자 모두가 평가되는 경우(모든 피연산자가 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

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

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

if를 ||나 &&로 대체하지 마라.

어떤 개발자들은 AND 연산자 &&를 if문을 ‘짧게’ 줄이는 용도로 사용하곤 한다.

let x = 1;

(x > 0) && alert( '0보다 큽니다!' );

위 코드를 if 문을 써서 바꾸면 다음과 같다.

let x = 1;

if (x > 0) alert( '0보다 큽니다!' );

&&를 사용한 코드가 더 짧긴 하지만 if문을 사용한 예시가 코드에서 무엇을 구현하고자 하는지 더 명백히 드러내고, 가독성도 좋다. 그러니 if 조건문이 필요하면 if를 사용하고 AND 연산자는 연산자 목적에 맞게 사용해야 한다.

Reference

• javascript.info