[JavaScript] truthy, falsy 값 판별하는 간단한 방법

truthy 값은 '참 같은 값', falsy 값은 '거짓 같은 값'이다.

 

무슨 뜻 이냐면, boolean을 기대하는 문맥 (if, && 연산자, 삼항 연산자 등)에서 truthy 값은 true, falsy 값은 false로 평가가 되는 값이다.

 

falsy 값의 예로는 0, -0, 0n, "", null, undefined, NaN 이 존재한다.

 

trythy 값은 거짓 같은 값을 제외한 값이다.

 

예시를 보자

 

if(0) {
	console.log('true');
} else {
	console.log('false');
}

// false

null && console.log('true');

// not working

"" ? console.log('true') : console.log('false');

// false

---

문제 상황

어떠한 값의 boolean 값이 궁금할 때, 특정 boolean 값과 같은지 비교하는 방식으로 코드를 작성해본 사람이 존재할 것 이다.

 

console.log('' == false);

// true

console.log(0 == false);

// true

 

여기까지는 어쩌면 우리가 기대한 결과대로 잘 동작하는지 모르겠다, 하지만.

 

console.log(null == false)

// false

console.log(null == true)

// false

 

위의 코드들은 우리가 기대한 대로 동작하지 않는다.

 

The abstract equality comparison algorithm 에 의하여 == 연산자가 동작을 하기 때문이다. 

 

자세한건 아래의 stackoverflow 답변들을 살펴보면 좋을 것 같다.

 

https://stackoverflow.com/questions/27632391/why-null-false-and-null-true-both-return-false

Why (null == false) and (null == true) both return false?

 

또 위 방식으로 빈 배열의 boolean 값을 판별하였을 때 문제가 생긴다.

 

console.log([] == true);

// false

console.log([] == false);

// true

if([]) console.log('true')

// true

 

얼핏 보기에 빈 배열은 falsy 값인 것 같지만, if 문이 동작하는 것을 보면 true로 평가 되었다는 걸 알 수 있기 때문이다.

 

위 예제들을 보면 알 수 있듯이 x == true 이런 비교로 x의 boolean 값을 제대로 판단할 수 없다

---

문제 해결

바로 ! (NOT 논리 연산자)를 이용하는 방식이다.

 

! (NOT 논리 연산자)는 피연산자를 boolean 형으로 변환 후 변환된 값의 역을 반환한다.

 

console.log(!true);

// false

console.log(!'');

// true

 

위 예제처럼 말이다.

 

하지만 boolean으로 반환 된 값의 역을 반환하므로 우리가 원하는 기능에는 조금 부족하다.

 

조금만 더 생각하면 해결할 수 있는 문제이다.

 

console.log(!!true);

// true

console.log(!!'');

// false

 

이렇게 ! 연산자를 두번 사용하면 boolean 값의 역의 역 즉, 본래의 boolean 값을 반환해준다.