Javascript에서 falsy, truthy란?
자바스크립트로 프로그래밍을 하다보면, 내가 할당한 변수에 ‘값이 없을 때’, 혹은 호출한 ‘함수의 리턴 값이 없을 때’에 대한 처리를 해 줘야 할 때가 있다.
변수에 어떤 값이 할당되기를 원하지만 실제로 할당되지 않은 경우에 대한 예외 처리를 하기 위해, 간단하게 아래와 같이 if-else 조건문을 사용할 수 있을 것이다.
우리는 종종 무의식적으로 위와 같은 코드를 작성한다. 하지만 이상하지 않은가? 우리는 자바스크립트에서 if문(조건문)의 조건으로 true 혹은 false값을 가지는 불리언(Boolean) 값만을 줄 수 있다는 것을 알고 있다.
예를 들어, 아래와 같은 논리 연산자나 비교 연산자는 결과값으로 반드시 true / false 값을 반환하기 때문에 if문의 조건이 될 수 있다.
- variable > 20 // variable이 20보다 크면 true, 아니라면 false
- (num1 === num2) && (num2 > num3) // num1이 num2와 같고 num2가 num3보다 크다면 true, 아니라면 false
하지만 위의 코드에서 variable 변수가 가지는 값은 undefined이다. 자바스크립트의 조건문에 불리언 값이 아닌 값을 가지는 변수를 넣었는데도 정상적으로 동작하는 이유는 뭘까?
이를 이해하기 위해서 우리는 자바스크립트의 Truthy / Falsy 개념에 대해 알 필요가 있다. 불리언이 가질 수 있는 True / False와 유사하지만 엄연히 다른 개념이다.
Falsy
좀 더 쉬운 이해를 위해 Fasly 값에 대해 먼저 알아보자. 자바스크립트에서는 총 6가지의 Falsy 값이 존재한다. 더도 말고 덜도 말고 딱 6개다.
- 0
- NaN
- false
- null
- undefined
- ‘’
이 Falsy 값들이 자바스크립트에서 ‘불리언 값을 요구하는 부분’, 예를 들어 조건문이나 반복문에 들어가면, 자바스크립트가 내부적으로 이 값들을 False 불리언 값으로 형 변환해준다.
이전의 코드에서 ‘if(variable)’ 이라는 부분이 제대로 동작했던 이유는 자바스크립트가 undefined 값을 가지고 있는 변수 variable를 자동으로 false로 형 변환 해줬기 때문이다!
Truthy
Falsy가 무엇인지 이해했다면 Truthy는 더 쉽다. Truthy는 Falsy에 해당하는 6개의 값이 아닌 모든 값이다.
즉 불리언 값을 요구하는 부분에 어떤 변수가 들어왔을 때, 그 변수의 값이 0 / NaN / false / null / undefined / ‘’ 만 아니라면 자바스크립트에서는 이를 Truthy로 판단하여 내부적으로 True 불리언 값으로 형 변환 해준다.
여기에서 헷갈릴 수 있는 점이, Truthy / Falsy 값은 결코 True / False와 같지 않다는 점이다. 예를 들어, 아래 코드에서 ‘조건문 맞음’이 출력될 것이라고 생각하는 사람이 있을 것이다.
하지만 실제로 실행해 보면 ‘조건문 틀림’이 출력된다. 자바스크립트는 ‘불리언 값을 요구하는 부분’의 결과 값이 Truthy / Falsy라면 그 결과값을 True / False로 형 변환해 줄 뿐이라는 것을 기억해야 한다.
위 코드에서 variable의 값은 undefined이고, 이 값은 불리언 값인 false와는 결코 같지 않다. 따라서 조건문의 조건인 ‘variable === false’의 결과가 false가 되어 ‘조건문 틀림’이 출력된 것이다.
자바스크립트에서 조건문이나 반복문에서 단순히 불리언 값을 사용하는 대신 변수를 사용할 때에는, 해당 변수가 어떻게 처리될지에 대해 한 번쯤 고민해본 후에 사용하는 것이 좋을 것이다.
