Javascript: isNaN() 동작원리 및 주의사항 :: 마이구미

이 글은 자바스크립트 네이티브 함수인 isNaN() 를 다룬다.

isNaN() 사용에 있어, 동작 원리와 이에 따른 주의사항을 알아본다.

공식 문서 - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/isNaN#special-behavior

참고 링크 - https://stackoverflow.com/questions/115548/why-is-isnannull-false-in-js

isNaN() 함수는 대부분 많이 사용하거나, 익숙할 것이다.

NaN 는 Not a Number 으로써, 숫자가 아닌 것으로 정의하고 있다.

그로인해, 타입이 숫자인지 아닌지를 판별할 경우 많이 사용한다.

isNaN(1) // false
isNaN(1.23) // false
isNaN('abc') // true

하지만, 다음과 같은 경우에는 예기치 못한 경우로 볼 수 있다.

isNaN(null) // false

우리는 대부분 true 를 예상했을 것이다.

하지만 isNaN(null) 의 결과는 true 가 아닌 false 이다.

왜? 에 대한 질문에 답을 위해서는 먼저 의미적으로 접근해본다.

NaN 은 단순히 Not a Number 로 정의했지만, 위키를 통한 자세한 정의를 살펴본다.

In computing, NaN, standing for not a number, is a numeric data type value representing an undefined or unrepresentable value, especially in floating-point calculations. Systematic use of NaNs was introduced by the IEEE 754 floating-point standard in 1985, along with the representation of other non-finite quantities like infinities.

위 정의대로라면, 단순히 숫자가 아닌 것에 대해 판별하는 것으로 해석하면 안된다.

isNaN() 은 정확히는 "IEEE-754 'Not A Number'" 인가? 에 대한 질문으로 해석해야한다.

이번에는 isNaN() 의 내부적인 동작을 통해 확인해본다.

isNaN() 함수는 넘어오는 인수를 먼저 숫자로 변환을 시도한다.

그리고 그 결과값을 통해 NaN 여부를 확인한다.

다음과 같은 코드를 실행하는 것으로 이해할 수 있다.

isNaN(Number(null)) // 0

위 코드는 Number(null) 의 결과값은 0 으로써, isNaN(0) 은 false 를 출력하게 된다.

이러한 예는 이미 혼란스러운 케이스로 정의되고 있다.

이러한 문제를 위해 ES2015 경우에는 Number.isNaN() 을 통해 대체할 수 있다.

isNaN() 아닌 Number 형에서만 사용할 수 있는 isNaN() 을 통해 숫자를 글로벌 isNaN() 보다 보증할 수 있다.

하지만 Number.isNaN() 또한 단순히 숫자가 아닌 것이 아닌 IEEE-754 NaN 의 의미를 나타낸다는 것을 참고하길바란다.

이렇듯, 숫자가 아닌 것을 판단하기 위해 isNaN() 을 사용할 경우에는 위와 같은 정보를 숙지하지 않으면 예기치 못한 상황을 초래한다.

그렇다고, isNaN() 을 피하라는 것이 아닌, 숫자를 판별하기 위한 방법은 많기에, 목적과 환경에 맞게 사용하면 된다.

1. typeof
typeof n === 'number'

2. isNaN()
function isNumber(val) {
  const n = parseFloat(val);
  return isNaN(n) ? false : true;
}

3. Number.isNaN()

...........