[JavaScript]NaN 체크 방법

NaN이란?

자바스크립트(JavaScript)에서 NaN(Not-A-Number: 숫자가 아님)은 잘못된 수학 계산 또는 잘못된 숫자를 의미합니다. 다음과 같이 숫자가 아닌 값에 연산을 수행하거나 0을 0으로 나누면 NaN이 출력됩니다.

console.log(0 / 0); // NaN

console.log(100 / 'hi'); // NaN

어쨌든 NaN은 숫자형이지만 숫자가 아닌 값을 의미합니다. 그리고 전역 객체의 속성으로 NaN은 Number.NaN의 값과 동일합니다.

---

NaN 체크 필요성

• 숫자로 구성된 문자열에서 곱셈, 나눗셈 연산이 수행하는 경우

JavaScript는 타입에 대해 느슨한 언어입니다. 다음 예제에서 str은 숫자로 구성된 문자열입니다. num / str과 num * str 연산에서 변수 str은 Number 타입으로 암시적 형변환이 일어납니다.

const num = 100;
const str = '10';

console.log(num / str); // 10
console.log(num * str); // 1000

하지만, 다음과 같이 변수 str에 숫자가 아닌 문자열이 존재하면 NaN이 출력됩니다.

const num = 100;
const str = '10hello';

console.log(num / str); // NaN
console.log(num * str); // NaN​

---

NaN 체크 시 주의사항

NaN은 다른 모든 값과 비교(==, !=, ===, !==)했을 때 같지 않으며, 다른 NaN과도 같지 않습니다.
- MDN 공식 문서 -

자바스크립트에서 값을 체크하는 가장 쉬운 방법은 비교 연산자입니다. 하지만 NaN은 자기 자신과 동일하지 않으므로 NaN == NaN 그리고 NaN === NaN의 결과는 false입니다.

NaN == NaN; // false

NaN === NaN; // false

즉, 비교 연산자를 사용하여 NaN을 체크하는 것은 올바른 방법이 아닙니다.

const num = 100;
const str = '10hello';

console.log((num / str) == NaN); // false
console.log((num / str) === NaN); // false

---

Object.is() 함수로 NaN 체크

Object.is() 함수는 두 개의 인수를 가지며 두 값이 동일하면 true, 그렇지 않으면 false를 반환합니다.

const num = 100;
const str = '10hello';

console.log(Object.is((num / str), NaN)); // true
console.log(Object.is((num * str), NaN)); // true

Object.is() 함수는 완전 일치 연산자(===)와 동일한 평가 방법을 수행하지만 NaN 체크 방법은 다르다는 것을 알 수 있습니다. 

---

isNaN() 함수로 NaN 체크

isNaN() 함수는 인수가 NaN과 동일하면 true, 그렇지 않으면 false를 반환합니다.

const num = 100;
const str = '10hello';

console.log(isNaN(num / str)); // true
console.log(isNaN(num * str)); // true

isNaN() 함수는 몇 가지 문제가 존재하는데, 문자열을 전달하면 true를 반환합니다.

const str = 'hello';

console.log(isNaN(str)); // true

심지어 함수를 인수로 전달하면 true를 반환합니다.

console.log(isNaN(function() {})); // true

이러한 이유는 isNaN() 함수가 인수를 숫자 타입으로 강제 형변환하는데, 예상치 못한 결과로 변환되었기 때문입니다. 가급적이면 아래에서 소개할 Number.isNaN() 함수를 사용하는 것을 권장합니다.

---

Number.isNaN() 함수로 NaN 체크

Number.isNaN() 함수는 인수가 NaN과 동일하면 true, 그렇지 않으면 false를 반환합니다.

const num = 100;
const str = '10hello';

console.log(Number.isNaN(num / str)); // true
console.log(Number.isNaN(num * str)); // true

Number.isNaN() 함수는 isNaN() 함수와 달리 문자열을 전달하면 false를 반환합니다.

const str = 'hello';

console.log(Number.isNaN(str)); // false

Number.isNaN() 함수와 isNaN() 함수의 차이점
1. isNaN() 함수는 전달된 값이 NaN이거나 숫자로 강제 변환된 값이 NaN이면 true를 반환합니다. 즉, 숫자로 강제 변환될 수 있는 값을 전달하면 false를 반환합니다.
2. Number.isNaN() 함수는 전달된 값을 형변환하지 않고 NaN인지 비교합니다.

---

정리

• NaN은 Number 타입이지만 숫자가 아님을 의미합니다.
• NaN 체크는 Number.isNaN() 또는 Object.is() 함수 사용하는 것을 권장합니다.