본문 바로가기

언어 기초/JAVASCRIPT

Truethy와 Falsy, 단락평가 [JavaScript | 학습을 위한 자료 | 한입만 REACT]

Truethy와 Falsy

// Truethy와 Falsy
// 참이나 거짓을 의미하지 않는 값도 조건문 내에서 참이나 거짓으로 평가
// 조건문을 간결하게 만들 수 있다.

// 1. Falsy한 값
let f1 = undefined;
let f2 = null;
let f3 = 0;
let f4 = -0;
let f5 = NaN;
let f6 = "";
let f7 = 0n;

if(!f1) {
    console.log("falsy");
}

// 2. Truethy한 값
// 7가지 Falsy 한 값을 제외한 나머지 모든 값
let t1 = "hello";
let t2 = 123;
let t3 = [];
let t4 = {};
let t5 = () => {};

if(t3) {
    console.log("truethy");
}

// 3. 활용 사례
function printName(person) {
    if(!person){
        console.log("person의 값이 없음");
        return;
    }
    console.log(person.name);
}
    

let person = { name : "강진호"};
printName(person);

단락 평가

// 단락 평가 - 순차적인 진행으로 인해 조건문 처럼 활용 가능
// AND 연산자에서 첫번째 변수가 false면 두번째 변수에 접근없이 false
// OR 연산자에서 첫번째 변수가 true면 두번째 변수에 접근없이 true

function returnFalse() {
    console.log("False 함수")
    return undefined; // falsy한 값도 가능
}

function returnTrue() { 
    console.log("True 함수")
    return 10; // truthy한 값도 가능
}

console.log(returnFalse() && returnTrue()); // 단락평가 작동
console.log(returnFalse() || returnTrue()); // 단락평가 미작동

// 단락 평가 활용 사례
function printName(person) {
    const name = person && person.name; // && 연산자는 왼쪽 값이 truthy일 때 오른쪽 값을 평가하고, 왼쪽 값이 falsy일 때는 오른쪽을 평가하지 않고 바로 왼쪽 값을 반환한다. 
    console.log(name || "person의 값이 없음");
}

printName();
printName({name : "강진호"});

// A && B의 경우:
// A가 falsy라면 A를 반환하고, B는 평가되지 않는다.
// A가 truthy라면 B를 평가하여 그 값을 반환한다.

// A || B의 경우:
// A가 truthy일 경우 A를 반환하고, B는 평가하지 않는다.
// A가 falsy일 경우 B를 평가하여 그 값을 반환한다.