javascript] Truthy와 Falsy

자바스크립트에는 Truthy한 값과 Falsy한 값이 있다.
이 두가지에 대해서 알아보자!

 

1. Falsy한 값.

console.log(!undefined);
console.log(!null);
console.log(!0);
console.log(!'');
console.log(!NaN);
console.log(!false);

기본적으로 위의 나열된 값은 false가 default값이다.

여기에 ! 느낌표를 덧붙임으로 반전을 했기 때문에 콘솔로그에서는 true가 나오게 된다.

 

※참고로 NaN은 Not a Number를 의미한다.

const value = 1 / 'foo';
console.log(value);

>> 결과 : NaN

 

2. Truthy한 값.

console.log(!3);
console.log(!'hello');
console.log(!['array']);
console.log(![]);
console.log(!{});

Falsy한 값을 제외한 대부분의 모든 값이 Truthy하다고 생각하면 된다.

 

3. 응용

const value = {};

const truthy = value ? true : false;
console.log(truthy)

위의 코드는 value가 true인지 false인지에 대한 분기처리를 하려고 삼항연산자를 사용한 케이스이다.

이것을 굳이 저렇게 사용할 필요는 없다는 것을 다음의 코드에서 확인해보자.

const value = {};

const truthy = !!value;
console.log(truthy);

위와 동일한 결과를 나타내는 코드이다.

위에서 설명한 것처럼 느낌표는 값의 반전을 의미한다. 그렇다면 느낌표 두개는 어떤 의미일까?

만약 value가 Falsy한 값이면 true로 바뀔 것이고 다시 앞에 느낌표가 있기때문에 false로 바뀔 것이다.

즉, Falsy한 값이면 false를.. Truthy한 값이면 true로 바꿔주는 것이다.

 

 

⏩ 확인해보기