자바스크립트 Infinity 속성이란?
자바스크립트의 Infinity(무한대) 속성은 부동 소수점 숫자가 표현할 수 있는 범위를 벗어났을 때 사용되는 특수한 값입니다. 숫자가 부동 소수점의 상한(최댓값)을 초과하면 양의 무한대인 Infinity가 표시되고, 반대로 하한(최솟값)을 벗어나면 음의 무한대인 -Infinity가 표시됩니다.
참고로 자바스크립트에서 부동 소수점 숫자가 나타낼 수 있는 최댓값은 약 1.7976931348623157 × 10308입니다. 이 값을 초과하는 연산 결과는 모두 무한대로 처리됩니다.
다음은 자바스크립트 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;
}
.num {
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript Infinity property</h1>
<div class="num">1.797693134862315E+10308</div>
<div class="num">-1.797693134862315E+10308</div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to add and subtract the above floating numbers
by 1 respectively
</h3>
<script>
let sampleEle = document.querySelector(".sample");
let num1 = document.querySelectorAll(".num")[0];
let num2 = document.querySelectorAll(".num")[1];
document.querySelector(".Btn").addEventListener("click", () => {
num1.innerHTML = +num1.innerHTML + 1;
num2.innerHTML = +num2.innerHTML - 1;
});
</script>
</body>
</html>코드 설명
위 예제에서는 이미 부동 소수점 표현 한계를 훨씬 초과하는 두 개의 숫자(1.797693134862315E+10308와 -1.797693134862315E+10308)를 화면에 출력합니다.
그리고 'CLICK HERE' 버튼을 클릭하면 첫 번째 숫자에는 1을 더하고, 두 번째 숫자에는 1을 빼는 연산이 실행됩니다. 두 값 모두 이미 표현 가능한 범위를 벗어났기 때문에 연산 결과는 각각 Infinity와 -Infinity로 표시됩니다.
실행 결과
페이지를 처음 열었을 때의 화면입니다.
'CLICK HERE' 버튼을 클릭한 후의 화면입니다.
정리
자바스크립트에서 매우 큰 수를 다룰 때는 Infinity 속성의 동작을 반드시 염두에 두어야 합니다. 연산 결과가 Infinity 또는 -Infinity가 되면 더 이상 유효한 수치 계산이 불가능하기 때문에, 필요하다면 Number.MAX_VALUE와 같은 상수를 활용해 값의 범위를 사전에 검사하는 것이 좋습니다.