22. Number(NaN)

Index

• ① NaN, 숫자형이지만 수학적으로 유효한 숫자가 아닌 값
  

  • 숫자형 데이터 타입
    
  • 자기 자신과 같지 않음
    
  • isNaN() 함수로 확인 가능
    
  • Number.isNaN()
    

  ② NaN이 발생하는 경우
  

      - [0을 0으로 나누는 경우](#21-0을-0으로-나누는-경우)<br>
      - [숫자와 문자열의 부적절한 연산](#22-숫자와-문자열의-부적절한-연산)<br>
      - [`parseInt`나 `parseFloat` 사용 실패](#23-parseint나-parsefloat-사용-실패)<br>
      - [`Math` 메서드의 잘못된 입력](#24-math-메서드의-잘못된-입력)<br>
  
      ③ [`NaN` 처리 팁](#3-nan-처리-팁)<br>
  
      - [유효한 숫자인지 확인](#31-유효한-숫자인지-확인)<br>
  

  • 기본값 처리
    

1. NaN, 숫자형이지만 수학적으로 유효한 숫자가 아닌 값

1.1 숫자형 데이터 타입

• NaN은 자바스크립트에서 number타입으로 간주됩니다.

console.log(typeof NaN); // 'number'

1.2 자기 자신과 같지 않음

• NaN은 자바스크립트에서 유일하게 자기 자신과 같지 않은 값입니다.

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

1.3 isNaN() 함수로 확인가능

• NaN여부를 확인하려면 isNaN() 함수를 사용할 수 있습니다.

console.log(isNaN(NaN)); // true
console.log(isNaN(123)); // false

• 하지만, isNaN()은 입력값을 먼저 숫자로 변환하려고 시도한 후 판단하기 때문에 예상치 못한 결과를 낼 수 있다.

console.log(isNaN("hello")); // true ("hello"는 숫자로 변환 불가능하므로 NaN)

1.4 Number.isNaN()

• ECMAScript 2015(ES6)부터는 더 엄격한 Number.isNaN()함수가 추가되었습니다. 이함수는 값이 진짜 NaN인지 확인합니다.

console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN("hello")); // false ("hello"는 NaN이 아님)

2. NaN이 발생하는 경우

2.1 0을 0으로 나누는 경우

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

2.2 숫자와 문자열의 부적절한 연산

console.log("hello" - 5); // NaN

2.3 parseInt나 parseFloat 사용 실패

console.log(parseInt("abc")); // NaN

2.4 Math 메서드의 잘못된 입력

console.log(Math.sqrt(-1)); // NaN`

3. NaN 처리 팁

3.1 유효한 숫자인지 확인

const value = "hello";
if (Number.isNaN(Number(value))) {
  console.log("유효하지 않은 숫자입니다.");
}

3.2 기본값 처리

• NaN이 발생할 가능성이 있는 계산 결과에 기본값을 설정

const result = someCalculation();
const finalValue = Number.isNaN(result) ? 0 : result;

• NaN은 자바스크립트의 특이한 동작 중 하나로, 유효하지 않은 숫자를 다룰 때 주의가 필요합니다.

reference: 모던자바스크립트 Deep Dive 28장. Number