[ 우당탕탕 인턴 ] NaN 이란 무엇인가?

NaN 이란 무엇인가?

NaN은 Not a Number ( 숫자가 아님 )을 나타낸다.

이번에 인턴일로 맡은 작업에서 NaN을 되게 많이 맞닥뜨렸는데, NaN이 무엇을 의미하는지 명확하게 몰랐었어서 난감했었다.

이번에 NaN으로 고생하기 전까지만해도 NaN의 개념을 undefiend나 null과 비슷한 개념이라고 생각을 하고 있었고, NaN인지 판단하는 로직 또한 일반적인 === (Strict equality) 연산자로 비교할 수 있는 줄 알았다.

 

내가 이번 프로젝트에서 에러사항을 겪었던 로직과 유사하게 코드를 작성해 보았다.

아래 코드의 결과는 무엇일까?

나처럼 NaN이 무엇인지 명확하게 모르거나 NaN을 처음 접해보는 사람은 당연히 "a is not number"가 출력될 것이라고 생각할 것이다.

( 아님 말고 ! )

const a = NaN;

if( a === NaN || a === undefined || a === '0' ) {
	console.log("a is not number");
}
else{
	console.log("a is number");
}

그러나 이 코드를 실제로 돌려보면 아래와 같이 "a is number"라는 결과가 나오는 것을 알 수 있다.

왜 이러한 결과가 나오는 것일까 ? 내가 원하는 결과는 "a is not number"인데 !!

처음에는 | a === NaN | 비교 구문이 문제가 있다는 것을 파악하지 못했어서 조금 시간이 걸렸었다.

디버깅 하면서 NaN을 비교하는 구문이 제대로 실행되지 않았다는 것을 파악하고, NaN에 대해 먼저 구글링해보았다.

 

MDN 문서에 따르면 NaN은 전역 스코프의 변수로, NaN의 초기값은 Not-A-Number로, Number.NaN의 값과 같다고 한다.

최신 브라우저에서 NaN은 설정 불가, 쓰기 불가 속성이라고 한다. 

 

NaN 판별

NaN은 다른 모든 값과 비교 ( == , !=, ===, !== )했을 때 같지 않으며(false), 다른 NaN과도 같지 않다.

NaN의 판별은 오로지 Number.isNaN() 또는 isNaN()을 사용해야 제일 분명하게 수행할 수 있다. 아니면 오로지 NaN만이 자기 자신과 비교했을 때 같지 않음을 이용할 수도 있다.

 

아래 예제를 통해 더 쉽게 이해할 수 있다.

NaN === NaN;        // false
Number.NaN === NaN; // false
isNaN(NaN);         // true
isNaN(Number.NaN);  // true

function valueIsNaN(v) { return v !== v; }
valueIsNaN(1);          // false
valueIsNaN(NaN);        // true
valueIsNaN(Number.NaN); // true

출처 : MDN

 

그러나 isNaN()과 Number.isNaN()의 차이점을 기억해 두어야 한다. isNaN은 현재 값이 NaN이거나, 숫자로 변환했을 때 NaN이 되면 참을 반환하지만, Number.isNaN은 현재 값이 NaN 이어야만 참을 반환한다.

const an = '8';
const nan = 'c';

console.log(isNaN(an)); // false
console.log(isNaN(nan)); // true

console.log(Number.isNaN(an)); // false
console.log(Number.isNaN(nan)); // false