자바스크립트는 누차 글마다 얘기하고 있지만, 정말 이상한데서 에러가 많이 나는 언어다.
논리가 다 맞는 코드를 작성했어도 작동을 안 하는 경우도 있다.
여러 이유가 있겠지만 그 중 하나의 이유가 이 Falsy, 거지같은 값이 될 것이다.
헷갈리는 참, 거짓 판별
console.log([][0])
// 출력값 : undefined
console.log([][0] === undefined)
// 출력값 : true
console.log([][0] === 'undefined')
// 출력값 : false
console.log(typeof([][0]) === undefined)
// 출력값 : false
console.log(typeof([][0]) === 'undefined')
// 출력값 : true
console.log([null][0] === null)
// 출력값 : true
console.log([null][0] === "null")
// 출력값 : false
console.log(typeof([null][0]) === null)
// 출력값 : fasle
console.log(typeof([null][0]) === 'null')
// 출력값 : false
console.log(typeof([null][0] === 'object');
// 출력값 : true 위 코드를 천천히 살펴보면 재밌는 것들이 많다. 예를 들면 undefined 같은 경우 typeof 함수를 통해서 반환되는 값은 'undefined'다. 즉 원시값 undefined가 아닌 문자열이 반환된다는 뜻이다. 이 때문에 typeof를 사용할 때와 typeof를 사용 안 할 때, 참과 거짓을 판별하는 방법이 달라진다.
그런데 null의 경우도 또 재밌다. null 값은typeof 함수를 사용해 반환되는 값이 'object'이다. 즉 문자열인 것이다. 애초에 null이라는 원시값도 없다는 것을 인지해야겠다.
-> 정리
undefined는typeof(undefined)의 결과 값이'undefined'(문자열)
null은typeof(null)의 결과 값이'object'(문자열)
Falsy 값
보통 우리는 undefined와 null을 마주치게 되는 순간이 언제일까를 고민해봐야 한다. 아마 다음과 같은 경우가 있을 것이다.
let arr = [0, , 2, 3, 4];
for (let i = 0 ; i < arr.length ; i++){
if ( arr[i] === undefined) arr[i] = i;
} 위 코드를 간단히 설명하자면 비어있는 배열 공간에 해당 인덱스 값을 넣는 프로그램이다. 이와 같이 맞닥뜨리는 값이 존재하는지 여부에 대해서 if문을 통해 확인하는 때에 자주 사용하게 된다.
이 때 사용되는 값들을 종합적으로 부르는 개념이 있다. 바로 Falsy값이다. Falsy 값은 다음에서 정리해보겠다.
Falsy 값 정리
- 0 : 숫자 영
- 0 : 음의 영
- 0n : BigInt의 영
- "" : 빈 문자열
- null : 누락된 값
- undefined : 확인되지 않은 값
- NaN : 숫자가 아님을 나타내는 숫자
Falsy 값이란 엄밀히 말하자면 false는 아니지만 조건문에 false로 판별되는 값이다.
어떻게 코드를 개선할 수 있을까?
그럼 우리는 이제 어떻게하면 실용적인 코딩을 할 수 있는가를 고민해야한다. 각각에 사례에 대해 인지를 하고 있더라도 실질적으로 사용을 할 때는 헷갈릴 수 있는 부분이다. 나는 가능하면 각각의 Falsy값에 직접적인 비교문을 작성하는 것은 지양하고 싶다. 이를 따른다면 위의 예제 코드 같은 경우는 다음과 같이 작성할 수 있겠다.
let arr = [0, , 2, 3, 4];
for (let i = 0 ; i < arr.length ; i++){
if (!arr[i]) arr[i] = i;
}'에게, 별거 없네'라는 생각이 들 수 있지만 막상 코드를 쓰면, 반환되는 값을 신경 안 쓰고 Falsy한 값과 typeof를 직접 비교하면서 코드를 작성했다가 한참 헤매는 경우가 발생할 수 있다. 위와 같이 자기 자신을 조건문에 사용을 하면 실수할 일이 줄어들 것이다. 우리가 조건문 안에서 typeof나 뭔가 더 해야될 것처럼 신경을 쓰는 이유는 아마 다른 언어의 엄격한 레퍼런스 에러에서 기인한 트라우마가 아닐까 싶다.
참고로 위 예시는 반환되는 0의 인덱스에서 문제가 발생하긴 하다. 왜인지는 긴말 안하려고 한다.
