[TIL - Typescript] Truly, Falsy

1. 문제 상황

일일 통계자료를 입력하는 화면을 만들고 있었다. 일일 통계자료에 Input이 몇 개 있었는데, 기본 값을 0으로 설정했더니 저장 버튼을 눌러도 Input Value가 없다는 결과가 떴다.(물론 내가 Empty를 방지해서 그렇다.) 그래서 원인을 분석해봤다.

 

2. 원인

Truly, Falsy에 대해 어렴풋이 알고 있었기 때문이었다. Javascript의 큰 특징 중에는 Type Inference(타입 추론)가 있다. Runtime 시점에 필요한 타입을 정한다. 그렇기 때문에 어떤 타입이던 올 수 있다. 그렇다면? 특정 변수가 선언이 되어 있는지, 특정 타입의 유효한 값인지 확인하려면 정말 많은 조건처리를 해줘야 할 것이다. isNaN이나, undefined, null 등 비유효한 값이 들어올 환경이 많은 것이다. 이 불편함을 해소해줄 개념이 바로 Truly, Falsy다!

 

3. Truly, Falsy란?

Truly, False는 runtime의 boolean 컨텍스트에서 true,or false로 추론할 수 있는 값들을 말한다. 예를 들어, 값이 정의되지 않은 undefined는 false로 추론할 수 있고, 숫자가 아닌 NaN의 경우도 그렇다. 이 개념을 통해 조건문을 좀더 간결하게 표현할 수 있다. 아래 코드블럭과 같다.

 

/// Before
var a;
if (a === undefined || a === null || isNan(a) /** || ... || ... */) { 	
	print('false')
else	print('true')


/// After
var a;
if (a) print('false')
else print('true')

 

내 문제상황의 경우, 통계에 쓰이는 각 input의 default value가 0이었고, 0은 Falsy한 값이기 때문에 input에 기본 값이 있어도 적용이 되지 않는다는 것을 알 수 있었다. 하나하나 공부해서 제대로 알자!

 

참고자료: MDN web docs(https://developer.mozilla.org/en-US/docs/Glossary/Falsy)