자바스크립트에서 숫자는 Number라는 단일 타입으로 처리됩니다. 다른 프로그래밍 언어와 달리 정수와 부동소수점(실수)을 구분하지 않고 하나의 타입으로 표현할 수 있다는 점이 특징입니다. 아래 예제는 자바스크립트에서 숫자를 선언하고, 연산한 뒤 화면에 출력하는 기본적인 방법을 보여줍니다.
예제 코드
<!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;
}
.sample{
font-size: 18px;
font-weight: 500;
color: red;
}
</style>
</head>
<body>
<h1>JavaScript Numbers</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to see numbers in JavaScript
</h3>
<script>
let sampleEle = document.querySelector(".sample");
let a =22;
let b = 1.523;
let c = 99;
document.querySelector(".Btn").addEventListener("click", () => {
sampleEle.innerHTML = 'a = ' + a + '<br>';
sampleEle.innerHTML += 'b =' + b + '<br>';
sampleEle.innerHTML += 'c = ' + c + '<br>';
sampleEle.innerHTML += 'a + c = ' + (a+c) + '<br>';
});
</script>
</body>
</html>
코드 설명
위 예제에서는 세 개의 숫자 변수를 선언했습니다. a = 22와 c = 99는 정수이고, b = 1.523은 소수점을 포함한 실수입니다. 자바스크립트는 이 두 종류의 숫자를 모두 동일한 Number 타입으로 취급합니다.
버튼을 클릭하면 이벤트 리스너가 실행되어 각 변수의 값과 a + c의 덧셈 결과가 .sample 영역에 순서대로 출력됩니다.
실행 결과
코드를 실행하면 아래와 같은 초기 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 다음과 같이 숫자 값과 연산 결과가 화면에 표시됩니다.
출력 결과를 보면 a = 22, b = 1.523, c = 99, 그리고 덧셈 결과인 a + c = 121이 정상적으로 나타나는 것을 확인할 수 있습니다. 이처럼 자바스크립트에서는 정수와 실수를 같은 방식으로 다루며, 산술 연산 또한 간단하게 수행할 수 있습니다.