truthy값과 falsy값

 

true나 false로 평가되는 값

 

자바스크립트에서 truthy값과 falsy값은 각각 '참같은 값'과 '거짓같은 값'으로 표현할 수 있으며, 이를 통해 조건문에서 각 값의 true와 false 여부를 확인할 수 있다.

 

Falsy 값

falsy 값에는 다음과 같은 값들이 해당된다.

• false
• 숫자 0
• -0 (음수 0)
• 0n (BigInt 0)
• "" (빈 문자열)
• null
• undefined
• NaN

조건문에서 falsy값이 나오면 false로 평가되며, 반복문에서는 falsy값이 나올 시 반복이 종료된다.

 

Truthy 값

truthy 값에는 다음과 같은 값들이 해당된다.

• true
• 빈 문자열이 아닌 모든 문자열
• 0이 아닌 숫자
• 3.12같은 소수
• -50 (음수)
• [] (빈 배열)
• {} (빈 객체)
• function() {} (함수)

위 falsy값과 truthy값들은 논리 연산자를 사용하면서 어떤 값들이 나올지 이해를 해두면 유용하다.

 

우선 AND 연산자에서 truthy 값과 falsy 값은 다음과 같은 동작으로 연결된다.

• 어느 한 값이 false면 그 값을 반환한다.
• falsy 값끼리 비교하면 첫 번째 falsy 값이 반환된다.
• truthy 값끼리 비교하면 마지막 truthy 값이 반환된다.

이를 예시로 살펴보면 다음과 같다.

// 1. 어느 한 값이 false면 그 값을 반환한다.
console.log(null && "hello");   // null

// 2. falsy 값끼리 비교하면 첫 번째 falsy 값이 반환된다.
console.log(null && 0);   // null

// 3. truthy 값끼리 비교하면 마지막 truthy 값이 반환된다.
console.log("hello" && 50);   // 50

 

OR 연산자에서 truthy 값과 falsy 값은 다음과 같은 동작으로 연결된다.

• 어느 한쪽이 true면 그 값을 반환한다.
• falsy 값끼리 비교하면 마지막 falsy 값을 반환한다.
• truthy 값끼리 비교하면 첫 번째 truthy 값을 반환한다.

예시는 다음과 같다.

// 1. 어느 한쪽이 true면 그 값을 반환한다.
console.log(false || true);   // true

// 2. falsy 값끼리 비교하면 마지막 falsy 값을 반환한다.
console.log(null || 0n);   // 0n

// 3. truthy 값끼리 비교하면 첫 번째 truthy 값을 반환한다.
console.log([] || {});   // []

 

실제 프로젝트를 만들면서 조건문에서 연산자를 사용하면서 AND 연산자에서는 대부분 true && false가 되고, OR 연산자를 쓰면서는 true || false가 되서 위 동작원리들을 크게 생각하지 못했는데, 이번에 원리에 대해 이해를 하게되니 앞으로 비슷한 여러 상황들이 나왔을 때에 대처가 가능할 것 같다.