edited-image.png

Falsy와 Truthy란

JavaScript에서 모든 값은 Boolean 문맥(조건문, 논리 연산 등)에서 true 또는 false로 평가된다. false로 평가되는 값을 Falsy, true로 평가되는 값을 Truthy라고 한다.

if (value) {
  // value가 truthy일 때 실행
} else {
  // value가 falsy일 때 실행
}

Falsy 값 (8가지)

JavaScript에서 falsy로 평가되는 값은 정확히 8가지뿐이다. 이 외의 모든 값은 truthy다.

값타입설명falseBooleanBoolean의 false0Number숫자 0-0Number음수 00nBigIntBigInt의 0""String빈 문자열nullnull값이 없음undefinedundefined값이 할당되지 않음NaNNumber숫자가 아님

Boolean(false)     // false
Boolean(0)         // false
Boolean(-0)        // false
Boolean(0n)        // false
Boolean("")        // false
Boolean(null)      // false
Boolean(undefined) // false
Boolean(NaN)       // false

Truthy 값

falsy 8가지를 제외한 모든 값이 truthy다.

흔히 헷갈리는 truthy 값

// 빈 배열, 빈 객체는 truthy
Boolean([])          // true
Boolean({})          // true

// 공백 문자열은 truthy (빈 문자열만 falsy)
Boolean(" ")         // true
Boolean("0")         // true
Boolean("false")     // true

// 음수, Infinity는 truthy
Boolean(-1)          // true
Boolean(Infinity)    // true
Boolean(-Infinity)   // true

// 함수는 truthy
Boolean(function(){}) // true

// 날짜 객체는 truthy
Boolean(new Date())  // true

특히 주의할 점

// "0"은 truthy (문자열)
if ("0") console.log("실행됨") // 실행됨

// 빈 배열은 truthy
if ([]) console.log("실행됨") // 실행됨

// 하지만 빈 배열의 비교는 다르다
[] == false  // true (타입 변환 후 비교)
[] === false // false (타입이 다름)

// 빈 객체도 truthy
if ({}) console.log("실행됨") // 실행됨

실무에서 자주 쓰는 패턴

1. 값 존재 여부 확인

const username = getUserName()

if (username) {
  // username이 null, undefined, "" 이 아닐 때
  showProfile(username)
}

2. 기본값 할당

// || 연산자: 왼쪽이 falsy면 오른쪽 반환
const name = inputName || "익명"
const count = inputCount || 10

// 문제: 0이나 ""도 falsy로 처리됨
const port = inputPort || 3000  // inputPort가 0이면 3000이 됨

// ?? 연산자: null/undefined만 체크 (ES2020)
const port = inputPort ?? 3000  // inputPort가 0이면 0 유지

3. || vs ?? 차이

const a = 0
const b = ""
const c = null

a || "기본값"   // "기본값" (0은 falsy)
a ?? "기본값"   // 0        (0은 null/undefined 아님)

b || "기본값"   // "기본값" (""은 falsy)
b ?? "기본값"   // ""       (""은 null/undefined 아님)

c || "기본값"   // "기본값" (null은 falsy)
c ?? "기본값"   // "기본값" (null은 null)

4. 단축 평가 (Short-circuit)

// && : 왼쪽이 truthy면 오른쪽 반환
const result = user && user.name
// user가 null이면 null, 아니면 user.name

// || : 왼쪽이 falsy면 오른쪽 반환
const display = nickname || email || "알 수 없음"
// 첫 번째 truthy 값 반환

5. 배열 길이 체크

const items = []

// falsy 활용
if (items.length) {
  // 배열에 요소가 있을 때
}

// 명시적 비교 (더 명확)
if (items.length > 0) {
  // 배열에 요소가 있을 때
}

6. 옵셔널 체이닝과 함께

// user가 없으면 undefined (falsy)
const isAdmin = user?.role === 'admin'

// 깊은 접근
const city = user?.address?.city || "서울"

// ?? 조합
const score = response?.data?.score ?? 0

타입 변환 비교표

// == (느슨한 비교) 에서의 타입 변환
null == undefined  // true
null == 0          // false
null == ""         // false
undefined == 0     // false
undefined == ""    // false
0 == ""            // true
0 == "0"           // true
"" == "0"          // false
false == "0"       // true
false == ""        // true
false == []        // true
"" == []           // true

이런 혼란을 피하기 위해 항상 === (엄격한 비교)를 사용하는 것을 권장한다.

정리

  • Falsy는 정확히 8가지: false, 0, -0, 0n, "", null, undefined, NaN
  • 그 외 모든 값은 Truthy: 빈 배열 [], 빈 객체 {}, 문자열 "0", "false" 포함
  • ||는 falsy 전체를 체크, ??는 null/undefined만 체크
  • 숫자 0이나 빈 문자열 ""을 유효한 값으로 다뤄야 할 때는 ??를 사용
  • 비교 시 ===를 사용하면 타입 변환으로 인한 실수를 방지할 수 있다