자바스크립트에서의 NaN과의 숫자 유형 변환 이슈

08 Nov 2023

javascript

NaN은 “Not a Number”의 약자로, 자바스크립트에서 숫자가 아닌 값을 나타내는 특수한 값입니다. NaN은 숫자 유형이지만 숫자가 아니기 때문에, 숫자 연산에 사용할 때 예상치 못한 결과를 초래할 수 있습니다. 이러한 이슈는 숫자 유형 변환이 필요한 상황에서 자주 발생합니다.

1. NaN과의 비교

NaN은 자기 자신과도 일치하지 않는 값으로 간주됩니다. 이것은 NaN이 다른 NaN과 동일하지 않다는 것을 의미합니다. 따라서 NaN과 비교 연산을 하게 되면 예상치 못한 결과가 발생할 수 있습니다. 예를 들어:

let x = NaN;
if (x === NaN) {
  console.log('이 코드는 실행되지 않습니다.');
}

if (isNaN(x)) {
  console.log('이 코드는 실행됩니다.');
}

위의 예시에서는 isNaN() 함수를 사용하여 x가 NaN인지 확인하고 있습니다. isNaN() 함수는 인자로 전달한 값이 NaN이거나, 숫자로 변환할 수 없는 문자열인 경우 true를 반환합니다.

2. NaN과 숫자의 연산

NaN과 숫자의 연산은 예상치 못한 결과를 초래할 수 있습니다. 일반적인 연산자인 +, -, *, /를 사용하거나, Math 객체의 메서드를 사용할 때 주의해야 합니다. 예를 들어:

console.log(NaN + 5);  // NaN
console.log(NaN - 2);  // NaN
console.log(NaN * 3);  // NaN
console.log(NaN / 4);  // NaN

console.log(Math.sqrt(NaN));  // NaN

NaN과의 연산은 항상 NaN을 반환합니다.

3. 숫자 유형 변환 이슈 해결 방법

NaN과의 숫자 유형 변환 이슈를 해결하기 위해서는 다음과 같은 방법을 사용할 수 있습니다.

Number() 함수를 사용하여 NaN을 다른 숫자 값으로 변환합니다.

let x = Number('abc');
console.log(x);  // NaN

let y = Number('123');
console.log(y);  // 123

parseInt() 함수를 사용하여 NaN을 정수 값으로 변환합니다.

let x = parseInt('abc');
console.log(x);  // NaN

let y = parseInt('123');
console.log(y);  // 123

parseFloat() 함수를 사용하여 NaN을 실수 값으로 변환합니다.

let x = parseFloat('abc');
console.log(x);  // NaN

let y = parseFloat('3.14');
console.log(y);  // 3.14

사용자 정의 함수를 작성하여 NaN 여부를 확인하고 대체 값을 반환합니다.

function convertToNumber(value) {
  if (isNaN(value)) {
    return 0;  // NaN인 경우 0으로 변환
  }
  return Number(value);
}

let x = convertToNumber('abc');
console.log(x);  // 0

let y = convertToNumber('123');
console.log(y);  // 123

요약

자바스크립트에서 NaN과의 숫자 유형 변환 이슈는 주의가 필요한 부분입니다. NaN과의 비교 연산과 연산자를 사용할 때 예상치 못한 결과가 발생할 수 있으며, 적절한 숫자 유형 변환 방법을 사용하여 이러한 이슈를 해결할 수 있습니다.

#javascript #NaN