Modern Js 9(논리 연산자)

자바스크립트의 논리 연산자에 대한 정리

Featured image

본 문서는 모던 자바스크립트를 정리하고 공부한 문서입니다.

2.11 논리 연산자

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

|| (OR)

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

alert( true || true );   // true
alert( false || true );  // true
alert( true || false );  // true
alert( false || false ); // false
if (1 || 0) { // if( true || false ) 와 동일하게 동작합니다.
  alert( 'truthy!' );
}
let hour = 9;

*if (hour < 10 || hour > 18) {*alert( '영업시간이 아닙니다.' );
}

if문 안에 여러 가지 조건을 넣을 수 있습니다.

let hour = 12;
let isWeekend = true;

if (hour < 10 || hour > 18 || isWeekend) {
  alert( '영업시간이 아닙니다.' ); // 주말이기 때문임
}

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

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

result = value1 || value2 || value3;

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

  1. 단락 평가

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

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

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

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

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

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

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

&& (AND)

전통적인 프로그래밍에서 AND 연산자는 두 피연산자가 모두가 참일 때 true를 반환합니다. 그 외의 경우는 false를 반환하죠.

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

아래는 if문과 AND 연산자를 함께 활용한 예제입니다.

let hour = 12;
let minute = 30;

if (hour == 12 && minute == 30) {
  alert( '현재 시각은 12시 30분입니다.' );
}
if (1 && 0) { // 피연산자가 숫자형이지만 논리형으로 바뀌어 true && false가 됩니다.
  alert( "if 문 안에 falsy가 들어가 있으므로 alert창은 실행되지 않습니다." );
}

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

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

result = value1 && value2 && value3;

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

정리해 보자면 이렇습니다. 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)와 동일하게 동작합니다.

⚠️**if   나 &&로 대체하지 마세요.**

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

let x = 1;

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

&&의 오른쪽 피연산자는 평가가 && 우측까지 진행되어야 실행됩니다. 즉, (x > 0)이 참인 경우에만 alert문이 실행되죠.

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

let x = 1;

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

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

! (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

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

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

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