JavaScript의 Math 객체는 숫자에 대한 다양한 수학 연산을 손쉽게 처리할 수 있도록 도와주는 내장 객체입니다. 원주율(π) 같은 수학 상수부터 반올림, 제곱근, 거듭제곱 등 자주 사용되는 수학 함수까지 속성과 메서드 형태로 제공합니다.
Math 객체는 생성자(constructor)가 아니기 때문에 new 키워드 없이 Math.round(), Math.sqrt()처럼 바로 호출하면 됩니다.
예제 코드
다음은 JavaScript Math 객체의 대표적인 메서드를 활용한 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Math 객체 예제</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 Math 객체</h1>
<div class="sample"></div>
<div style="font-weight: bold; color: black;" class="result"></div>
<button class="Btn">클릭하세요</button>
<h3>
위 버튼을 클릭하면 Math 객체의 다양한 메서드 결과를 확인할 수 있습니다.
</h3>
<script>
let sampleEle = document.querySelector(".sample");
document.querySelector(".Btn").addEventListener("click", () => {
sampleEle.innerHTML = 'Math.round(7.7) = ' + Math.round(7.7) + '<br>';
sampleEle.innerHTML += 'Math.sqrt(121) = ' + Math.sqrt(121) + '<br>';
sampleEle.innerHTML += 'Math.pow(4,4) = ' + Math.pow(4,4) + '<br>';
});
</script>
</body>
</html>실행 결과
페이지를 처음 열면 아래와 같이 빈 화면과 버튼이 표시됩니다.
“클릭하세요” 버튼을 누르면 각 메서드의 계산 결과가 화면에 출력됩니다.
결과 해설
- Math.round(7.7) → 8 : 소수점 이하를 반올림하여 가장 가까운 정수를 반환합니다.
- Math.sqrt(121) → 11 : 입력값의 제곱근을 계산합니다.
- Math.pow(4,4) → 256 : 첫 번째 인수를 두 번째 인수만큼 거듭제곱합니다(4⁴).
자주 사용하는 Math 객체 메서드
- Math.abs(x) : 절댓값 반환
- Math.ceil(x) : 소수점 올림
- Math.floor(x) : 소수점 내림
- Math.max(...) / Math.min(...) : 여러 값 중 최대·최솟값 반환
- Math.random() : 0 이상 1 미만의 난수 생성
- Math.PI : 원주율 π(약 3.14159) 상수
이처럼 Math 객체는 별도의 설치나 선언 없이 즉시 사용할 수 있어, 계산 로직을 구현할 때 매우 유용하게 활용됩니다.