Javascript : Truthy 와 Falsy

Jong Chan·2025년 2월 21일

Truthy 와 Falsy ?

Javascript에서 조건문을 사용할 때 true 또는 false 가 아닌 값도
if문에서 참(true) 또는 거짓(false) 처럼 동작하는 경우가 있음.
이러한 개념을 Truthy(참 같은 값), Falsy(거짓 같은 값)이라고 함.


Falsy (거짓 같은 값)

if (false)      // false
if (0)          // 숫자 0
if (-0)         // 음수 0
if (0n)         // BigInt 0
if ("")         // 빈 문자열 ('' 또는 "" 모두 포함)
if (null)       // null
if (undefined)  // undefined
if (NaN)        // NaN (Not a Number)

위의 값들은 모두 if 문에서 false 처럼 동작한다.

// Falsy 예제

const value = "";
if (value) {
    console.log("Truthy");
} else {
    console.log("Falsy");
}

위 조건문의 결과는 Falsy 이다.


Truthy (참 같은 값)

if (true)       // true
if (1)          // 0이 아닌 숫자 (음수도 포함)
if (-100)       // 음수도 truthy
if ("hello")    // 빈 문자열이 아닌 경우
if ([])         // 빈 배열도 truthy
if ({})         // 빈 객체도 truthy
if (function(){}) // 함수도 truthy

Falsy한 값이 아닌 모든 값은 Truthy로 평가된다.

// Truthy 예제

const value = "Hello";
if (value) {
    console.log("Truthy");
} else {
    console.log("Falsy");
}
// 결과: "Truthy"

위 조건문의 결과는 Truthy 이다.


Truthy, Falsy 활용 예제

  1. 기본값 설정 (Or 연산자 활용 -> ||)
    Falsy 값을 걸러내고 기본값을 설정할 때 유용하다.
    let name = "";
    let displayName = name || "Guest";
    console.log(displayName); // 결과: "Guest"
    유저라면 name 이 있을것이고, 설정한 name 이 뜨겠지만
    Guest 라면 name 이 없으므로 결과는 Guest 이다.
    이렇게 간단한 예외설정이 가능

  1. 값 존재 여부 확인
    Falsy 값을 이용해 값이 존재하는지 확인할 수 있다.
    let userInput = "";
    if (!userInput) {
        console.log("입력값이 없습니다.");
    } else {
        console.log("입력값: ", userInput);
    }
    // 결과: "입력값이 없습니다."
    여기서 Falsy 값을 이용하지 않는다면 조건문은 아래와 같이 바뀐다.
    let userInput = "";
    if (typeof userInput === "string" && userInput.length === 0) {
        console.log("입력값이 없습니다.");
    } else {
        console.log("입력값: ", userInput);
    }
    // 결과: "입력값이 없습니다."
    Falsy 값을 사용하면 훨씬 코드가 간결하고 효율적으로 바뀐다.

  1. And 연산자 활용 -> &&
    Truthy한 값이 있을 때만 특정 코드를 실행하게 할 수도 있다.
    let isLoggedIn = true;
    isLoggedIn && console.log("사용자가 로그인했습니다.");
    // 결과: "사용자가 로그인했습니다."
    원래라면 조건문을 써서 console.log를 호출해야 하지만
    isLoggedIn 이 true 이면 && 연산자에선
    두번째 피연산자가 true 인지 호출해서 확인해야 하기 때문에
    console.log가 실행된다.
    한줄 코드로 간단하게 변경이 가능하다.

이처럼 Truthy 와 Falsy 를 활용하면 더 간결하고 효율적으로 조건문을 활용할 수 있다.
자유자재로 구사하려면 지속적인 활용이 필요할 것 같다.

profile
프론트엔드 개발자 박종찬입니다.

0개의 댓글