Javascript : AND와 OR의 동작방식 (feat. truthy, falsy한 값)

1. 자바스크립트의 데이터 타입

자바스크립트에는 8가지 데이터 타입이 있다.

number

string

boolean

undefined

null

object

symbol

bigint

2. Truthy 값과 Falsy 값

false 처럼 평가되는 값을 falsy 값,

true 처럼 평가되는 값을 truthy 값이라고 부른다.

falsy값에는 false, null, undefined, 0, NaN, ''(빈 문자열)이 있고,

falsy값을 제외한 값들은 모두 truthy값이 된다.

이 때 주의할 점은 비어있는 배열과 객체( [], {})는 truthy 값이라는 점이다.

// falsy
Boolean(false);
Boolean(null);
Boolean(undefined);
Boolean(0);
Boolean(NaN);
Boolean('');
 
// truthy
Boolean(true);
Boolean('codeit');
Boolean(123);
Boolean(-123);
Boolean({});
Boolean([]);

truthy와 falsy의 개념은

자바스크립트에서 불린 타입으로의 형 변환을 이해할 때 핵심이되는 개념이므로

잘 기억하자.

3. 독특한 방식으로 동작하는 논리 연산자

자바스크립트에서 AND와 OR연산자는 무조건 불린 값을 리턴하는게 아니라,

왼쪽 피연산자 값의 유형에 따라서 두 피연산자 중 하나를 리턴하는 방식으로 동작한다.

AND 연산자는 왼쪽 피연산자가 falsy값일 때 왼쪽 피연산자를,

왼쪽 피연산자가 truthy값일 때 오른쪽 피연산자를 리턴하고 반대로,

OR 연산자는 왼쪽 피연산자가 falsy 일 때 오른쪽 피연산자를,

왼쪽 피연산자가 truthy 일 때 왼쪽 피연산자를 리턴한다.

console.log(null && undefined); // null
console.log(0 || true); // true
console.log('0' && NaN); // NaN
console.log({} || 123); // {}

이게 헷갈린다면 그냥

AND 연산자는

1) 왼쪽이 falsy하면 오른쪽을 볼 필요 없이

전체가 falsy한 걸로 판별되기에 왼쪽 피연산자를 리턴하고,

2) 왼쪽이 truthy하면 오른쪽에 따라 true, false가 달라지기에

오른쪽 피연산자를 리턴한다고 생각하면 된다.

OR 연산자는

1) 왼쪽이 falsy하면 오른쪽에 따라 true, false가 달라지기에,

오른쪽 피연산자를 리턴하고,

2) 왼쪽이 truthy하면 오른쪽을 볼 필요 없이

전체가 truthy한 걸로 판별되기에 왼쪽 피연산자를 리턴한다고 생하면 된다.