Frontend/JavaScript

JavaScript - isNaN() vs Number.isNaN()

고코모옹 2021. 7. 7. 13:25

- isNaN 함수의 필요성

  • NaN이 NaN인지 판별할 때, 두 동일연산자 ==와 === 모두 false로 평가된다.
  • NaN 여부를 알아내기 위해 판별할 수 있는 함수가 필요하다.

 

- NaN ?

  • Not a Number
  • NaN 타입은 ? Number
    • typeof NaN === 'number';   // true

  • NaN 값이 반환되는 경우
    • 산술 연산이 정의되지 않은 결과 또는 표현할 수 없는 결과일 경우
    • 숫자가 아닌 값의 변환을 시도했으나 알맞은 원시 숫자 값이 없는 경우
    • 0을 0으로 나눈 경우

 

- isNaN()

  • 어떤 값이 NaN인지 판별
  • 몇몇 일반적이지 않은 규칙을 가지고 있으므로, ECMAScript 2015에 추가한 Number.isNaN() 사용 권장
  • 주어진 값이 NaN이면 true, 아니면 false를 반환
  • 모든 브라우저 지원

 

- Number.isNaN()

  • 주어진 값이 NaN인지 판별
  • 전역 isNaN() 함수의 더 엄격한 버전
  • 주어진 값의 유형이 Number이고 값이 NaN이면 true, 아니면 false를 반환
  • IE 지원 x

 

- 혼란스러운 특별 케이스 행동

  • isNaN 함수의 인수가 Number형이 아닌 경우 그 값을 먼저 숫자로 강제 변환시킨다.
  • 결과값은 그 뒤에 NaN인지 결정하기 위해 테스트된다.
  • 숫자로 강제 변환한 값이 NaN일 경우 예기치 못한 결과값을 반환한다.(아래 예시 참고)
Number.isNaN(NaN);        // true
Number.isNaN(Number.NaN); // true
Number.isNaN(0 / 0)       // true

// 예를 들면 이들은 global isNaN()으로는 true가 됐을 것임
Number.isNaN("NaN");      // false
Number.isNaN(undefined);  // false
Number.isNaN({});         // false
Number.isNaN("blabla");   // false

// isNaN(), Number.isNaN() 모두 false
Number.isNaN(true);
Number.isNaN(null);
Number.isNaN(37);
Number.isNaN("37");
Number.isNaN("37.37");
Number.isNaN("");
Number.isNaN(" ");

 

- Number.isNaN() polyfill

Number.isNaN = Number.isNaN || function(value) {
    return value !== value;
}

 

[ 참고자료 ]

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/isNaN

 

isNaN() - JavaScript | MDN

isNaN() 함수는 어떤 값이 NaN인지 판별합니다. isNaN 함수는 몇몇 일반적이지 않은 규칙을 가지고 있으므로, ECMAScript 2015에서 추가한 Number.isNaN()으로 바꾸는 편이 좋을 수도 있습니다.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN

 

Number.isNaN() - JavaScript | MDN

Number.isNaN() 메서드는 주어진 값이 NaN인지 판별합니다.

developer.mozilla.org