📗논리 연산자

논리 연산자에는 3가지 종류가 있습니다. 많은 사람들이 크게 오해하고 있는 부분이니 알고 있던 부분이라고 생각하더라도 다시 한번 자세히 보시기 바랍니다. 🤓

1. 논리적 NOT 연산자

논리적 NOT 연산자(!)를 앞에 붙이면 참은 거짓으로 바뀌고, 거짓은 참으로 바뀝니다.

console.log(!true);  // false
console.log(!false); // true

이렇게 단순하면 좋겠지만, 그렇지 않습니다. 🙅🏻‍♂️

위처럼 불리언의 경우에 한해서는 단순하게 참을 거짓으로 바꾸고, 거짓을 참으로 바꾸는게 맞습니다.

그렇다면, 아래와 같은 경우에는 어떻게 될까요?

console.log(!2);         // ?
console.log(!0);         // ?
console.log(!NaN);       // ?
console.log(!"");        // ?
console.log(!" ");       // ?
console.log(!"hello");   // ?
console.log(!null);      // ?
console.log(!undefined); // ?

이에 대한 해답을 이해하려면 한 가지 개념을 알아야 합니다.

Truthy & Falsy

자바스크립트에 있는 모든 데이터(값)은 자료형에 따라 8가지 카테고리로 나눌 수 있다고 이야기 했었습니다.

그와 더불어, 자바스크립트에 있는 모든 데이터(값)은 참 같은지(Truthy) 거짓 같은지(Falsy)와 같은 성격에 따라 2가지 카테고리로 나눌 수 있습니다.

자바스크립트의 모든 값들은 8가지 자료형 중 한 가지 자료형에 반드시 속하며, 또한 동시에 Truthy/Falsy 중 한 가지 성격에 반드시 속합니다.

Truthy, Falsy라는 카테고리는 어떤 값을 만약 불리언으로 변환하려고 했을때 true가 되느냐 아니면 false가 되느냐에 따라 나뉘어져 있는 카테고리입니다.

예를 들어, 다음과 같이 불리언으로 변환해보는 가정을 해볼 수 있습니다.

const a = 0;
console.log(Boolean(0));

const b = 10;
console.log(Boolean(10));

Boolean은 특정 값을 불리언으로 변환하는 코드입니다.

첫 번째 출력문은 false 가 출력되고, 두 번째 출력문은 true 가 출력됩니다. 그러므로, 0은 Falsy에 속하는 값이고, 10은 Truthy에 속하는 값이라고 판단할 수 있습니다.

이렇게 귀찮게 매일 살펴봐야 하지는 않습니다. 다행히 Truthy와 Falsy를 구별하는 방법은 매우 간단합니다.

Falsy에 속하는 값이 몇 가지 정해져 있고, 그 외에 나머지가 모두 Truthy입니다. 그래서 Falsy만 외우고 있으면 됩니다. 😎

아래가 Falsy 목록입니다. 이 부분은 외우시는게 좋습니다.

0
-0
false
undefined
null
""
''
``
NaN

위에서 문자열은 공백조차 없는 아예 빈 문자열이라는 것을 잘 보셔야 합니다.

2. 논리 OR 연산자

||로 표현하고 연산자 양 옆에 피 연산자를 배치할 수 있습니다. 피연산자(operand) 값이 결과로 도출됩니다.

연산 방식 💫

  1. 연산자를 기준으로 왼쪽부터 Truthy 값을 찾습니다.

  2. Truthy 값을 찾은 경우, 연산을 중지하고 해당 값이 연산의 결과가 됩니다.

  3. 마지막까지 Truthy 값을 찾지 못한 경우, 마지막에 위치한 값이 결과가 됩니다.

아래 코드의 출력 결과는 모두 어떻게 될까요? Falsy 목록을 옆에 두고 보면서 한번 판단해보세요.

console.log(true || true);                   // ?
console.log(true || false);                  // ?
console.log(false || true);                  // ?
console.log(false || 0 || "");               // ?
console.log(false || " " || 10);             // ?

3. 논리 AND 연산자

&& 로 표현하고 연산자 양 옆에 피 연산자를 배치할 수 있습니다. 피연산자(operand) 값이 결과로 도출됩니다.

연산 방식 💫

  1. 연산자를 기준으로 왼쪽부터 Falsy 값을 찾습니다.

  2. Falsy 값을 찾은 경우, 연산을 중지하고 해당 값을 반환합니다.

  3. 마지막까지 Falsy 값을 찾지 못한 경우, 마지막에 위치한 값을 반환합니다.

console.log(true && true);                      // ?
console.log(true && false;                      // ?
console.log(false && true);                     // ?
console.log("" && false && null);               // ?
console.log("null" && undefined && 10);         // ?

연산자 우선순위

그렇다면, 두 가지를 섞어서 사용하면 어떻게 될까요?

console.log(true || 0 && "hello");

결과가 무엇이 나올 것이라고 생각하시나요? 잠시 생각해보세요. 🧐

생각을 마치셨다면, 실행시키고 결과를 확인해보세요.

결과를 이해하기 위해서는 연산자 우선순위를 이해해야 합니다.

여러분은 곱하기와 더하기 중 어떤 연산을 먼저 하시나요? 곱하기를 먼저 하시죠? && 연산자와 || 연산자 사이에도 우선순위라는게 존재하고, 모든 연산자 간에는 누가 더 힘이 센지 사전에 정의된 우선순위가 존재합니다. 외우고 있을 필요는 없지만, 자주 사용하는 부분은 자연스럽게 익히게 됩니다.

아래 이미지에서 보듯, AND 연산자의 우선순위가 OR 연산자의 우선순위보다 높습니다. 숫자가 높을수록 힘이 센 연산자입니다.

그렇다면 가장 우선순위가 높은 연산자는 무엇일까요? 한번 조사해보시고 알아두세요. 🥸

Previous기본 연산자Next비교 연산자

Last updated