## 개념 자바스크립트에서는 명시적인 Boolean 값이 아니더라도 if문, while문, 논리 연산자 등의 Boolean Context에서 암묵적으로 Boolean으로 평가한다. Boolean Context에서 true로 평가되는 값을 Truthy, false로 평가되는 값을 Falsy라 한다. ### Falsy 자바스크립트에서 False로 평가되는 값은 총 8가지이다. | 값 | 설명 | | --------- | ------------- | | false | Boolean false | | 0 | 숫자 0 | | -0 | 음수 0 | | 0n | Big Int 0 | | null | 값이 없음 | | undefined | 값이 할당되지 않음 | | "" | 빈 문자열 | | NaN | 숫자가 아님 | 이 이외의 값들은 모두 Truhty 값이 된다. ### Truthy Falsy가 아닌 모든 값은 Truthy 값이 되어 true로 평가된다 * 빈 객체 `{}` * 빈 배열 `[]` * `Infinity` * `-Infinity` * ... ## 판별 방법 ### Boolean 생성자 함수 활용 Boolean 생성자 함수를 활용하면 인자의 Boolean 평가 결과를 반환한다. ```javascript Boolean(""); // false Boolean("hello"); // true ``` 주의해야 할 점은 `new Boolean()`과 `Boolean()` 의 차이이다. new 키워드와 함께 사용하는 경우에는 Boolean 객체를 반환하므로 객체 내용이 false더라도 항상 Truthy로 평가된다.. ```javascript let a = new Boolean(false); // 객체 생성됨 if (a) { console.log("실행됨!"); // ⚠ 이 조건문이 실행됨 (a는 Truthy인 객체) } ``` ### 이중부정 연산자 활용 이중부정 연산자를 활용해서도 간단하게 Boolean 값으로 형변환 할 수 있다. not을 두번써서 형변환 된 본래 값을 반환받는 원리. ```javascript !!"hello"; // true !!0; // false ``` 이중부정 연산자를 활용하는 방법은 간단하지만 가독성이 좋지 않음에 유의해야 한다. 특히 복잡한 표현식에서는 이중부정 연산자 하나만으로는 의미를 직관적으로 알아보기 어렵다. 간결함을 선택할지, 가독성을 중시할 지 코드 컨벤션으로 정해두는 것이 좋고 이렇게 정해진 방법을 일관되게 사용하는 것이 좋다. ## 활용 예시 - 기본 값 (Fallback 값) 지정 ```javascript // inputName이 Falsy(null, undefined, "")면 "Guest"를 사용하도록 let username = inputName || "Guest ``` - 조건부 랜더링 ```jsx // 사용자가 있는 경우에만 프로필 컴포넌트 랜더링 {!!user && <UserProfile />} ``` - 배열 메서드와의 결합 ```javascript // 유효한 데이터만 필터링 users.filter(user => !!user?.email) // falsy 값 제거 users.filter(Boolean) ```