Home JavaScript의 논리 연산자
Post
Cancel

JavaScript의 논리 연산자

논리 연산자

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

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

|| (OR)

“OR” 연산자는 두 개의 수직선 기호로 만들 수 있습니다.

1
result = a || b;

전통적인 프로그래밍에서 OR 연산자는 불린값을 조작하는 데 쓰입니다. 인수 중 하나라도 true이면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

자바스크립트의 OR 연산자는 다루기 까다롭지만 강력한 기능을 제공합니다. OR을 어떻게 응용할 수 있는지 알아보기 이전에, OR 연산자가 불린값을 어떻게 다루는지 설명합니다.

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

1
2
3
4
console.log( true || true );   // true
console.log( false || true );  // true
console.log( true || false );  // true
console.log( false || false ); // false

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

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

예를 들어, 연산 과정에서 숫자 1true로, 숫자 0false로 바뀌게됩니다.

1
2
3
if (1 || 0) { // if( true || false ) 와 동일하게 동작합니다.
  console.log( 'truthy!' );
}

OR 연산자 ||if 문에서 자주 사용됩니다. 주어진 조건 중 하나라도 true인지를 테스트하는 용도로 사용되기 때문입니다.

1
2
3
4
5
let hour = 9;

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

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

1
2
3
4
5
6
let hour = 12;
let isWeekend = true;

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

첫 번째 truthy를 찾는 OR 연산자

지금까지는 정통적인 방식인 피연산자가 불린형인 경우만을 다루었습니다. 이제부터는 자바스크립트에서만 제공하는 논리연산자 OR의 추가 기능에 대해 설명합니다.

추가 기능은 다음과 같은 알고리즘으로 동작합니다.

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

1
result = value1 || value2 || value3;

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

  • 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가합니다.
  • 각 피연산자를 불린형으로 변환합니다. 변환 후 그 값이 true이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환합니다.
  • 피연산자 모두를 평가한 경우(모든 피연산자가 false로 평가되는 경우)엔 마지막 피연산자를 반환합니다.

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

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

1
2
3
4
5
6
console.log( 1 || 0 ); // 1 (1은 truthy임)

console.log( null || 1 ); // 1 (1은 truthy임)
console.log( null || 0 || 1 ); // 1 (1은 truthy임)

console.log( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을 반환함)

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

  1. 변수 또는 표현식으로 구성된 목록에서 첫 번째 truthy 얻기 firstName, lastName, nickName이란 변수가 있는데 이 값들은 모두 옵션 값이라고 가정합니다. OR ||연산을 사용하면 실제 값이 들어있는 변수를 찾고, 그 값을 보여줄 수 있습니다. 변수 모두에 값이 없는 경우엔 익명을 보여줍니다.

    1
    2
    3
    4
    5
    
     let firstName = "";
     let lastName = "";
     let nickName = "바이올렛";
    
     console.log( firstName || lastName || nickName || "익명"); // 바이올렛
    

    모든 변수가 falsy이면 “익명”이 출력됩니다.

  2. 단락 평가 OR 연산자 ||가 제공하는 또 다른 기능은 “단락 평가(short circuit evaluation)”입니다. 위에서 설명한 바와 같이 OR ||연산은 왼쪽부터 시작해서 오른쪽으로 평가를 진행하는데, truthy를 만나면 나머지 값들은 건드리지 않은 채 평가를 멈춥니다. 이런 프로세스를 “단락 평가”라고 합니다. 단락 평가의 동작 방식은 두 번째 피연산자가 변수 할당과 같은 부수적인 효과(side effect)를 가지는 표현식일 때 명확히 볼 수 있습니다.

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

1
2
true || console.log("not printed");
false || console.log("printed");

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

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

&& (AND)

두 개의 앰퍼샌드를 연달아 쓰면 AND 연산자 &&를 만들 수 있습니다.

1
result =a && b;

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

1
2
3
4
console.log( true && true );   // true
console.log( false && true );  // false
console.log( true && false );  // false
console.log( false && false ); // false

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

1
2
3
4
5
6
let hour = 12;
let minute = 30;

if (hour == 12 && minute == 30) {
  console.log( '현재 시각은 12시 30분입니다.' );
}

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

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

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

AND 연산자와 피연산자가 여러 개인 경우를 살펴보도록합니다.

1
result = value1 && value2 && value3;

AND 연산자 &&는 다음과 같은 순서로 동작합니다.

  • 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가합니다.
  • 각 피연산자는 불린형으로 변환됩니다. 변환 후 값 false이면 평가를 멈추고 해당 피연산자의 변환 전원래 값을 반환합니다.
  • 피연산자 모두가 평가되는 경우(모든 피연산자, true로 평가되는 경우)엔 마지막 피연산자가 반환됩니다.

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

위 알고리즘은 OR 연산자의 알고리즘과 유사합니다. 차이점은 AND 연산자가 첫 번째 falsy를 반환하는 반면, OR은 첫 번째 falsy를 반환합니다. 피연산자에 falsy가 없다면 마지막 값을 반환합니다.

1
2
3
4
5
6
7
8
9
// 첫 번째 피연산자가 truthy이면,
// AND는 두 번째 피연산자를 반환합니다.
console.log( 1 && 0 ); // 0
console.log( 1 && 5 ); // 5

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

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

1
console.log( 1 && 2 && null && 3 ); // null

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

1
console.log( 1 && 2 && 3 ); // 마지막 값, 3

! (NOT)

논리 연산자 NOT !를 써서 만들 수 있습니다. NOT 연산자의 문법은 매우 간단합니다.

1
2
console.log( !true ); // false
console.log( !0 ); // true
1
2
console.log( !!"non-empty string" ); // true
console.log( !!null ); // false

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

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

1
2
console.log( Boolean("non-empty string") ); // true
console.log( Boolean(null) ); // false

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

This post is licensed under CC BY 4.0 by the author.

JavaScript의 if와 '?'를 사용한 조건 처리

JavaScript의 null 병합 연산자