Javascript에서 조건문을 사용할 때 true 또는 false 가 아닌 값도
if문에서 참(true) 또는 거짓(false) 처럼 동작하는 경우가 있음.
이러한 개념을 Truthy(참 같은 값), 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 이다.
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 이다.
let name = "";
let displayName = name || "Guest";
console.log(displayName); // 결과: "Guest" 유저라면 name 이 있을것이고, 설정한 name 이 뜨겠지만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 값을 사용하면 훨씬 코드가 간결하고 효율적으로 바뀐다.let isLoggedIn = true;
isLoggedIn && console.log("사용자가 로그인했습니다.");
// 결과: "사용자가 로그인했습니다." 원래라면 조건문을 써서 console.log를 호출해야 하지만이처럼 Truthy 와 Falsy 를 활용하면 더 간결하고 효율적으로 조건문을 활용할 수 있다.
자유자재로 구사하려면 지속적인 활용이 필요할 것 같다.