[CleanCode] isNaN? is Not A Number?

오늘은 isNaN (is Not A Number)에 대해 알아보겠습니다.

 

목차

 

 

 

????????????

 

NaN은 Not A Number를 뜻합니다. 

직독직해하면 "숫자가 아니다."를 뜻하는데요 

 

 

실제로 이런 결과가 나와요 🤣

 

NaN은 Not A Number이고  isNaN은 is Not A Number입니다.

 

NaN은 숫자가 아닌데, 타입은 숫자이지만 숫자가 아닌...? 

 

isNaN에 대해 같이 알아보겠습니다.

 

 

[ isNaN ] 

isNaN() 함수는 어떤 값이 Not A Number인지 판별해줍니다.

 

자바스크립트의 다른 값들과 달리, NaN은 동등 연산자 (==, ===)을 통해 판별할 수 없기 때문에, NaN을 판별할 수 있는 무언가가 필요했고 이로 인해 탄생한 것이 isNaN이라고 합니다. 

 

위에서 말했듯이 NaN의 type은 number입니다. 그렇지만  isNaN(NaN)의 결과는 true (= Not A Number)가 나와서 굉장히 헷갈립니다. 

 

이는 isNaN 메서드가 숫자가 아닌 것이냐고 부정을 묻는 것이기 때문에 결괏값을 예상할 때 헷갈리기 쉬운 것입니다. 

 

isNaN은 매개변수로 전달된 값을 'NaN'으로 변환한 후, 결과를 판별합니다. 따라서 매개변수가 숫자가 아니더라도, 문자열 등 다른 타입의 값이라도 ' NaN'으로 변환되어 판별될 수 있습니다.

 

isNaN(NaN);        // true
isNaN(10);         // false
isNaN('Hello');    // true
isNaN(true);       // false
isNaN(undefined);  // true
isNaN(null);       // false
 

 

isNaN은 매개변수를 숫자로 변환하려고 시도합니다. 만약 변환된 값이 숫자가 아니라면 'true'를 반환합니다. 하지만 매개변수가 빈 문자열('')이나 공백만 있는 문자열(' ')인 경우에는 'false'를 반환합니다.

 

이는 isNaN('')이나 isNaN(' ')이 'true'를 반환하면 혼란스러울 수 있기 때문입니다. 

 

좀 더 쉬운 예시를 보겠습니다. 

 

console.log(isNaN(123)); // false => 숫자가 맞다. 
 
console.log(isNaN(123 + ' Hi'); // true => 숫자가 아니다. 

 

이제 이해가 되시나요?? 

 

하지만, 결국 헷갈리게 하는 건 마찬가지입니다. 

 

매개변수가 숫자가 아니더라도, 문자열 등 다른 타입의 값이어도 'NaN'으로 변환되어 판별될 수 있기 때문입니다. 

 

그래서 isNaN은 느슨한 검사 취급을 받고, ES2015에서부터 더 엄격한 버전인 Number.isNaN()이 도입되었습니다.

[ Number.isNaN() ]

isNaN과 Number.isNaN은 결과가 다릅니다. 

 

console.log(isNaN(123 + '테스트')); // true
 
console.log(Number.isNaN(123 +'테스트')) // false

 

Number.isNaN은 'NaN' 값인지 여부를 엄격하게 판별하는 메서드입니다. 매개변수로 전달된 값이 정말로 'NaN'인지 확인하고, 'NaN'이면 'true'를 반환하고, 그렇지 않으면 'false'를 반환합니다. 

 

이 메서드는 인수가 반드시 숫자 타입이어야 하며, 그렇지 않으면 항상 'false'를 반환합니다.

 

 

Number.isNaN(NaN);        // true
Number.isNaN(Number.NaN); // true
Number.isNaN(0 / 0);      // true
 
// 전역 isNaN()에서는 원래 true 였을 사례들
Number.isNaN('NaN');      // false
Number.isNaN(undefined);  // false
Number.isNaN({});         // false
Number.isNaN('blabla');   // false
 
// 아래는 모두 false다. 
Number.isNaN(true);
Number.isNaN(null);
Number.isNaN(27);
Number.isNaN('27');
Number.isNaN('27.17');
Number.isNaN('');    
Number.isNaN(' ');

 

요약하자면 'Number.isNaN'은 엄격하게 'NaN' 여부를 판별하며, 'isNaN'은 매개변수를 'NaN'으로 변환한 후 결과를 판별합니다.

 

따라서 'Number.isNaN'을 사용하는 것이 더 안전하고 정확한 방법입니다.