Truthy and Falsy (참 같은 값 & 거짓 같은 값)

🟨 Truthy & Falsy

JavaScript에서는 true / false가 아닌 값도 조건문 안에서 자동으로 true 또는 false로 변환되는데, 이걸 Truthy / Falsy라고 한다.

 

🟣 Falsy (거짓으로 평가되는 값)

조건문에서 false로 취급되는 값들로, JavaScript에서는 Boolean으로 형변환했을 때 false가 되는 값들을 의미한다.

if (값) {
    console.log("truthy");
} else {
    console.log("falsy");
}

• false: 이미 boolean 타입이며 거짓을 의미.
• 0 (숫자 0):  값이 존재하지 않는 것처럼 취급됨.
• -0 (음수 0): 0과 완전히 동일하게 처리되며 조건 결과도 같다. (내부 표현만 다름)
• 0n (BigInt 0): BigInt 타입에서도 0은 falsy.
• "" (빈 문자열): 문자열에 아무 값도 없을 때의 상태 .
• null: 의도적으로 값이 없음을 의미.
• undefined: 값이 아직 할당되지 않았음을 의미.
• NaN: 숫자가 아님을 나타내는 값이지만, 타입은 number로 취급. (Not a Number)

 

 

 

🟣 Truthy (참으로 평가되는 값)

Falsy 8개의 값을 제외한 나머지 모든 값은 Truthy로 취급된다.

if ("hello") {
    console.log("실행됨"); // Truthy
}

if (123) {
    console.log("실행됨"); // Truthy
}

if ([]) {
    console.log("빈 배열도 Truthy");
}

if ({}) {
    console.log("빈 객체도 Truthy");
}

• "0": 문자열 "0"은 비어있지 않으므로 Truthy.
• "false": 문자열 "false"도 내용이 있으므로 Truthy.
• []: 빈 배열은 객체 타입이므로 Truthy.
• {}: 빈 객체 역시 객체 타입이므로 Truthy.
• 1, -100: 0이 아닌 모든 숫자는 Truthy.

👉 값이 존재하면 대부분 Truthy로 평가된다.

 

⚠️ 주의해야 할 점 ⚠️

Falsy 값을 정확히 모르면 의도치 않은 버그가 발생할 수 있다.

let score = 0;

// 사용자가 0점을 맞았는데 "점수가 없습니다"라고 출력되는 오류 발생 가능
if (!score) {
    console.log("점수가 기록되지 않았습니다."); 
}

 

👉 따라서 숫자 0처럼 비어있는 상태가 아닌 '유효한 값'을 다룰 때는 if (score === 0)과 같이 엄격하게 비교하는 것이 안전하다.

 

📍  POINT 📍 

✔️ 자바스크립트는 값의 존재 여부를 기준으로 참/거짓을 판단하는 유연한 언어이다. ✔️

✔️0, "", null, undefined는 대표적인 Falsy 값이다. ✔️

✔️ 빈 배열 []이나 객체 {}는 의외로 Truthy라는 점을 꼭 기억하자. ✔️

 

---

 

⚙️ 실전 예제 코드 ⚙️

// 1. 문자열이 비어있는지 확인
let userName = ""; // 빈 문자열 (Falsy)

if (userName) {
    console.log("이름이 입력되었습니다.");
} else {
    console.log("이름을 입력해주세요."); // 실행됨
}

// 2. 숫자가 0인지 확인
let cartCount = 0;

if (!cartCount) { // 0은 Falsy이므로 !0은 true가 됨
    console.log("장바구니가 비어 있습니다."); // 실행됨
}

// 3. 데이터가 들어왔는지 확인 (null, undefined 체크)
let data = null;

if (data) {
    console.log("데이터 수신 성공");
} else {
    console.log("데이터가 없습니다."); // 실행됨
}