JavaScript에는 두 가지 중요한 특수 숫자 값이 있습니다. 하나는 유효한 숫자가 아님을 나타내는 NaN(Not a Number)이고, 다른 하나는 무한대를 의미하는 Infinity입니다. 예를 들어 어떤 수를 0으로 나누면 Infinity가 반환되고, 숫자로 변환할 수 없는 문자열에 Number() 함수를 적용하면 NaN이 반환됩니다.
다음 코드는 JavaScript에서 NaN과 Infinity가 어떻게 동작하는지 확인할 수 있는 간단한 예제입니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>NaN and Infinity in JavaScript</h1>
<div style="color: green;" class="result"></div>
<button class="btn">CLICK HERE</button>
<h3>
Click on the above button to see nan and infinity example
</h3>
<script>
let btnEle = document.querySelector(".btn");
let resEle = document.querySelector(".result");
btnEle.addEventListener("click", () => {
resEle.innerHTML = "9/0 = " + 9 / 0 + "<br>";
resEle.innerHTML += 'Number("AJKL") = ' + Number("AJKL") + "<br>";
});
</script>
</body>
</html>코드 설명
위 예제에서 버튼을 클릭하면 두 가지 연산 결과가 화면에 표시됩니다. 첫 번째는 9/0 연산으로, JavaScript에서 0으로 나누기는 오류를 발생시키지 않고 Infinity를 반환합니다. 두 번째는 Number("AJKL")로, 알파벳 문자열은 숫자로 변환할 수 없으므로 NaN이 반환됩니다.
실행 결과
위 코드를 실행하면 다음과 같은 초기 화면이 출력됩니다.
'CLICK HERE' 버튼을 클릭하면 아래 그림처럼 연산 결과가 표시됩니다.
정리
NaN과 Infinity는 JavaScript의 숫자 타입(Number)에 속하는 특수한 값입니다. Infinity는 산술 연산의 한계를 넘어서거나 0으로 나누었을 때 나타나며, NaN은 유효하지 않은 숫자 연산의 결과로 나타납니다. 참고로 NaN은 자기 자신과도 같지 않은(NaN === NaN은 false) 유일한 값이므로, NaN 여부를 확인할 때는 Number.isNaN() 메서드를 사용하는 것이 안전합니다.