[JavaScript - 심화] Truthy와 Falsy

이정환 강사님의 인프런 강의, '한 입 크기로 잘라먹는 리액트'의 강의 내용과 자료를 바탕으로 정리한 내용입니다.

 

JavaScript에서는 모든 값을 Truthy 혹은 Falsy로 평가한다. 따라서 참, 거짓을 의미하지 않는 값도 조건문 내에서는 참, 거짓으로 평가한다.

이런 특징을 잘 이용하면 우리가 특정 상황에서 조건문을 간결하고 강력하게 만들 수 있다.

이번 포스팅에서 어떤 값이 Truthy하고 어떤 값이 Falsy하게 평가되는지 살펴보고, 이를 활용하여 조건문을 간결하게 만드는 방법을 알아보자!

1. Falsy한 값

MDN 문서
Falsy는 JavaScript에서 논리 연산 시 false로 평가되는 값들을 의미하며,
자바스크립트에는 총 8가지의 Falsy한 값이 존재한다.

• false
• undefined
• null
• 0
• -0
• NaN
• 0n (BigInt)
• ""

2. Truthy한 값

7가지의 Falsy한 값을 제외한 나머지 모든 값은 Truthy한 값이다.

비어있지 않은 문자열, 0이 아닌 숫자, 빈 배열([]), 객체, 화살표 함수는 모두 조건문에서 참으로 평가하는 Truthy한 값이다.

3. 활용 사례

Falsy를 이용하면 코드를 간결하게 작성할 수 있고, 조건문을 더 쉽게 작성할 수 있다.

불필요한 조건문 제거

변수가 null 또는 undefined가 아닌 경우에만 값을 처리하고 싶다고 할때, 아래 코드처럼 불필요하게 조건문을 나열할 필요가 없다.

let name = getUserName();

if (name !== null && name !== undefined && name !== "") {
    console.log(`Hello, ${name}!`);
}

 

아래처럼 작성하면 더 간결하다.name이 falsy한 값이면 조건문이 false로 평가된다. 

let name = getUserName();

if (name) {
    console.log(`Hello, ${name}!`);
}

 

기본값 설정

사용자의 이름을 제대로 갖고 올 수 없는 경우, 기본값을 지정하고 싶을 때 굳이 falsy한 경우를 나열할 필요가 없다.

let userName = getUserName();

if (userName === null || userName === undefined || userName === "") {
    userName = "Guest";
}

let userName = getUserName() || "Guest";

 

falsy값 필터링

배열에서 Falsy 값을 제거할 때에도 아래와 같이 작성한 코드를 더 간결하게 바꿀 수 있다

let data = [0, 1, false, 2, "", 3, null, "hello", undefined];

let filteredData = data.filter(item => item !== null && item !== undefined && item !== "" && item !== 0 && item !== false);

let data = [0, 1, false, 2, "", 3, null, "hello", undefined];

let filteredData = data.filter(Boolean);

Boolean함수를 전달하면 falsy값이 자동으로 제거된다.