본문 바로가기
개발자의 공부방/Frontend

javascript] Truthy와 Falsy

by 쥬니준 2021. 12. 15.
728x90
반응형

자바스크립트에는 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로 바꿔주는 것이다.

 

 

확인해보기

반응형

'개발자의 공부방 > Frontend' 카테고리의 다른 글

javascript] 함수의 기본파라미터  (0) 2021.12.16
javascript] 단축평가 논리계산법.  (0) 2021.12.15
javascript] Truthy와 Falsy  (0) 2021.12.15
javascript] property shorthand란?  (0) 2021.12.06
vue] vue.js 경로 '@' 의미  (0) 2021.11.29
Vue] vue JS 시작.  (0) 2021.11.26

댓글0