[JavaScript] 논리 연산 시 알아두면 유용한 Truthy와 Falsey

Truthy 와 Falsey의 개념

코딩을 하다보면 조건문 판별이나 논리연산이 필요한 경우가 발생합니다. 이럴 경우 데이터는 Boolean 값으로 평가되게 되어 항상 true나 false 둘 중 하나의 값을 가지게 됩니다. Truthy와 Falsey는 이러한 상황에서 주어진 값이 데이터 타입에 관계없이 true or false로 어떻게 평가되는지를 정리해놓은 개념입니다. 이름에서도 알 수 있듯 true로 귀결되는 데이터를 truthy, false로 귀결되는 데이터를 falsey라고 말할 수 있는데, falsey가 아닌 모든 데이터는 truthy라고 볼 수 있습니다.

Falsey 데이터 예시

false, 0, -0, 0n, "", null, undefined, NaN 는 전부 false로 귀결됩니다. 그러므로 아래의 if문들은 모두 false로 평가되어 내부 코드에 진입하지 않습니다.

if (false) {}
if (null) {}
if (undefined) {}
if (0) {}
if (-0) {}
if (0n) {}
if (NaN) {}
if ("") {}

Truthy 데이터 예시

falsey한 값이 아니면 전부 truthy입니다. 아래와 같은 예시들이 있을 수 있습니다.

if (true) {}
if ({}) {}
if ([]) {}
if (42) {}
if ("0") {}
if ("false") {}
if (new Date()) {}
if (-42) {}
if (12n) {}
if (3.14) {}
if (-3.14) {}
if (Infinity) {}
if (-Infinity) {}

사용 예시

그렇다면 Truthy와 Falsey를 이해한 것이 실제로 어떻게 활용될 수 있을까요? 아래의 예시들을 보면서 이야기해보면 좋을 것 같습니다.

 

1. 파라미터로 주어진 문자열 str이 존재하는 경우에만 프린트를 수행하는 함수 예시입니다. 빈 문자열은 Falsey이므로 length를 통해 길이를 비교하지 않아도 문자열의 존재 유무를 판별할 수 있습니다. 그래서 위에서 아래와 같이 리팩토링이 가능합니다.

//변경 전
function printStr(str){
    if(str.length > 0){console.log(str)}
}
//변경 후
function printStr(str){
    if(str){console.log(str)}
}

2. Boolean 값을 판별하는 경우에도 직접적으로 비교식을 적을 필요가 없습니다. Boolean 타입의 값은 그자체로 true or false가 결정되기 때문입니다. 그러므로 Boolean 값을 가진 데이터만 조건문에 넣어주면 됩니다.

//변경 전
const isValid = true
if(isValid === true){}
//변경 후
if(isValid){}

3. 만약 프론트에서 유저 정보를 얻는 REST API를 호출해서 얻은 결과값(userDetail)을 활용해야 하는데 그 안에 주소정보 키값이 존재하는지, 주소정보 키값이 있더라도 내용이 존재하는지를 알 수 없다면 아래와 같이 undefined와 null 여부를 둘 다 체크해줘야 합니다. 이 경우에 아래와 같이 리팩토링할 수 있습니다.

//변경 전
function printUserDetail(userDetail){
    if(userDetail.address1 !== undefined && userDetail.address1 !== null){
	    console.log(userDetail.address1)
    }
    
    if(userDetail.address2 !== undefined && userDetail.address2 !== null){
	    console.log(userDetail.address2)
    }
}
//변경 후
function printUserDetail(userDetail){
    if(userDetail.address1){
	    console.log(userDetail.address1)
    }
    
    if(userDetail.address2){
	    console.log(userDetail.address2)
    }
}

4. 단축평가(short-circuit evaluation)와 함께 사용할 수도 있습니다.

//변경 전
function printName(name){
    if(name){
    	console.log(name)
    }else{
    	console.log('이름이 없습니다')
    }
}
//변경 후
function printName(name){
	console.log(name || '이름이 없습니다')
}