[Javascript]논리연산자(Logical Operators)

개요

자바스크립트(Javascript)에는 &&(AND), ||(OR), !(NOT)의 3가지의 논리 연산자를 가지고 있습니다.
또한 논리 연산자를 통하여 조건문이나 변수에 값을 설정할 수 있습니다.

논리연산자

&&(AND)

a && b에서 a을 true로 변환할 수 있는 경우 b을 반환하고, 그렇지 않으면 a을 반환합니다.

const sample1 = true  && true;       // true && true 이므로 true 반환합니다.
const sample2 = true  && false;      // true && false 이므로 false 반환합니다.
const sample3 = false && true;       // false && true 이므로 false 반환합니다.
const sample4 = false && (3 == 4);   // false && false 이므로 false 반환합니다.
const sample5 = 'Red' && 'Blue';      // true && true 이므로 "Red" 반환합니다.
const sample6 = false && 'Red';      // false && true 이므로 false 반환합니다.
const sample7 = 'Red' && false;      // true && false 이므로 false 반환합니다.
const sample8 = ''    && false;      // false && false 이므로 "" 반환합니다.
const sample9 = false && '';         // false && false 이므로 false 반환합니다.

||(OR)

a || b에서 a의 값이 true일 경우 a값을 반환하며, 아니라면 b값을 반환합니다.

const sample1 = true || true; // true || true 이므로 true 반환합니다.
const sample2 = false || true;       // false || true 이므로 true 반환합니다.
const sample3 = true  || false;      // true || false 이므로 true 반환합니다.
const sample4 = false || (3 == 4);   // false || false 이므로 false 반환합니다.
const sample5 = 'Red' || 'Blue';      // ture || true 이므로 'Red' 반환합니다.
const sample6 = false || 'Red';      // false || true 이므로 'Red' 반환합니다.
const sample7 = 'Red' || false;      // true || false 이므로 'Red' 반환합니다.
const sample8 = ''    || false;      // false || false 이므로 false 반환합니다.
const sample9 = false || '';         // false || false 이므로 '' 반환합니다.
const sample10 = false || obj; // false || obj 이므로 obj 반환합니다.

이러한 논리연산자를 사용하여 변수에 기본값 설정할 때 사용하기도 합니다.

function setColor(color) {
  const finalColor = color || 'red';  // color 값이 undefined이므로 finalColor 값은 'red' 를 가지게 됩니다.
  return finalColor;
}

setColor(); // 'red'
setColor('blue'); // 'blue'

!(NOT)

const sample1 = !true               // !true 이므로 false 반환합니다.
const sample2 = !false              // !false 이므로 true 반환합니다.
const sample3 = !''                 // !false 이므로 true 반환합니다.
const sample4 = !'Red'              // !true 이므로 false 반환합니다.

!(NOT)연산자를 사용 시 Boolean 형태로 형 변환이 이루어지며, !!는 Boolean()와 동일한 역할을 수행합니다.

const sample1 = 'a'
!!sample1 === Boolean(sample1) // true;

참고자료

(MDN Web Docs: 논리 연산자)[https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/%EB%85%BC%EB%A6%AC_%EC%97%B0%EC%82%B0%EC%9E%90(Logical_Operators)]
(MDN Web Docs: Nullish coalescing operator)[https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator]