
JavaScript로 숫자 계산을 할 때 꼭 등장하는 친구가 바로 Math 객체입니다.
Math 객체는 우리가 따로 만들지 않아도 이미 JavaScript 안에 준비되어 있는 내장 객체예요.
즉, 배달 와있는 상자를 그냥 열어서 쓰기만 하면 되는 도구 세트 같은 느낌입니다.
Math 객체란?
- 내장 객체 → 이미 JavaScript 내부에 만들어져 있는 도구
- 바로 꺼내 쓰면 됨 (Math.random(), Math.floor() 처럼 . 찍어서 호출)
- 숫자 계산과 관련된 유용한 메서드들이 잔뜩 들어 있음
Math는 직접 만들지 않고, 그냥 Math.메서드() 형식으로 불러 쓰기만 하면 됩니다.
자주 쓰는 Math 메서드들 정리
| 메서드 | 설명 | 예시 | 결과 |
| Math.random() | 0 이상 1 미만의 난수 생성 | Math.random() | 0.123… |
| Math.floor(x) | 내림 (x보다 작거나 같은 정수 중 가장 큼) | Math.floor(3.9) | 3 |
| Math.ceil(x) | 올림 (x보다 크거나 같은 정수 중 가장 작음) | Math.ceil(3.2) | 4 |
| Math.pow(x, y) | x의 y제곱 | Math.pow(2,3) | 8 |
| Math.abs(x) | 절댓값 | Math.abs(-7) | 7 |

0 이상 ~ 1 미만의 값만 나옵니다.
범위 바꾸려면 이렇게 작성됩니다.
예: 0 ~ 10 미만 만들기 → * 10 곱하기
Math.floor() —

내림
Math.floor(x)는 x보다 작거나 같은 수 중에서 가장 큰 정수를 반환합니다. 수학에서 내림과 같은 방식입니다.
난수와 함께 쓰면 정수 랜덤 만들기 가능↓
앞서 사용한 Math.random() 의 결과를 정수로 출력하고 싶다면 Math.floor() 와 함께 사용하면 됩니다.
이렇게 하면 0이상 10미만의 정수를 랜덤으로 출력하게 됩니다. Math.random()으로 생성된 실수에 10을 곱한 후, Math.floor()로 내림 처리하여 정수를 얻을 수 있습니다.
활용 예시 🎲 주사위 만들기 (1~6 랜덤)
💡 이 구조는 랜덤 정수 범위 만들기에 자주 사용되며, 예: Math.floor(Math.random() * (최댓값 - 최솟값 + 1)) + 최솟값 형태로 일반화할 수 있어요.
원리 설명
- Math.random() → 0 이상 1 미만의 소수값 생성
- * 6 → 0 이상 6 미만의 소수값으로 범위 확장
- Math.floor → 소수점 아래 버림 (0, 1, 2, 3, 4, 5 중 하나)
- + 1 → 1부터 6까지 정수값 완성 ✅

Math.ceil(x) 은 x 보다 크거나 같은 수 중에서 가장 작은 정수를 반환합니다. 수학에서의올림과 같은 방식입니다.

Math.pow(x, y)는x의y제곱을 반환합니다.

Math.abs(x)는x의 절대값을 반환합니다. x가 음수라면 -x 를 반환하고 양수라면 x 를 반환합니다. 따라서 결과는 항상 '양수' 혹은 '0' 입니다.

숫자 계산에서 Math 객체는 매우 자주 사용되며, 위에 나온 메서드들은 실무에서도 자주 활용됩니다. 필요한 계산이 있다면 Math에서 찾을 수 있을 가능성이 높습니다.
| 메서드 | 설명 | 예시 | 결과 |
| Math.round(x) | x를 가장 가까운 정수로 반올림 | Math.round(4.5) | 5 |
| Math.trunc(x) | x의 소수점을 제거하고 정수 부분만 반환 | Math.trunc(4.9) | 4 |
| Math.max(a, b, ...) | 전달한 값 중 가장 큰 수 반환 | Math.max(1, 5, 3) | 5 |
| Math.min(a, b, ...) | 전달한 값 중 가장 작은 수 반환 | Math.min(1, 5, 3) | 1 |
| Math.sqrt(x) | x의 제곱근 반환 | Math.sqrt(9) | 3 |
| Math.cbrt(x) | x의 세제곱근 반환 | Math.cbrt(27) | 3 |

Math 객체는 숫자 계산과 관련된 작업을 할 때 거의 필수로 등장합니다. 특히 난수(Random) 처리, 게임 구현, 정규화, 반올림/내림 처리 등에서 자주 쓰이기 때문에 초반에 제대로 이해해 두면 이후 코드 작성이 훨씬 수월해집니다.
더 많은 Math 객체가 궁금하다면 참고 문서:MDN을 확인할 수 있습니다:)
'프론트엔드 공부 > JavaScript' 카테고리의 다른 글
| JavaScript 비교 연산자 완전 기초 — 숫자 비교, 이렇게만 쓰면 끝! (9) | 2025.10.23 |
|---|---|
| JavaScript 산술 연산자 정리 — + - * / % 완벽 이해하기 (예제 포함) (0) | 2025.10.23 |
| 자바스크립트 기초 | DOM(Document Object Model) 완벽 이해 & 콘텐츠 변경하기 (11) | 2025.10.13 |
| 자바스크립트 기초 | undefined, null, window.confirm() 완벽 정리 (4) | 2025.10.13 |
| 자바스크립트 템플릿 리터럴 완전 정리 | 백틱(`)과 표현식 삽입의 마법 (0) | 2025.10.13 |