자바스크립트 랜덤 숫자 생성하기 – Math.random() 함수 완벽 정리

자바스크립트에서 무작위 숫자를 생성할 때 가장 많이 사용되는 것이 바로 Math.random() 함수입니다. 이 함수는 0 이상 1 미만 범위의 부동소수점(실수) 난수를 반환합니다. 즉, 0은 포함되지만 1은 포함되지 않습니다.

Math.random() 기본 문법

Math.random(); // 예: 0.23456789...

반환값이 항상 0과 1 사이의 소수이기 때문에, 실무에서는 원하는 범위의 정수를 얻기 위해 곱셈과 Math.floor()를 함께 사용합니다.

예제: 1부터 10 사이의 랜덤 숫자 생성

다음은 버튼을 클릭하면 1부터 10 사이의 무작위 정수를 생성하여 화면에 표시하는 전체 예제 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Random</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 Random</h1>
<div class="sample"></div>
<button class="Btn">여기를 클릭하세요</button>
<h3>
위 버튼을 클릭하면 1부터 10 사이의 랜덤 숫자가 생성됩니다.
</h3>
<script>
    let sampleEle = document.querySelector('.sample');
    document.querySelector('.Btn').addEventListener('click',()=>{
        let num = Math.floor((Math.random()*10))+1;
        sampleEle.innerHTML = '생성된 숫자 = ' + num;
    })
</script>
</body>
</html>

코드 동작 원리

핵심 로직은 다음 한 줄입니다.

let num = Math.floor((Math.random()*10))+1;

Math.random() → 0 이상 1 미만의 소수 생성 (예: 0.7234)
* 10 → 범위를 0 이상 10 미만으로 확장 (예: 7.234)
Math.floor() → 소수점 아래를 버려 정수화 (예: 7)
+ 1 → 최종적으로 1부터 10까지의 정수 보장

실행 결과

페이지를 열면 아래와 같은 화면이 나타납니다.

자바스크립트 랜덤 숫자 생성하기 – Math.random() 함수 완벽 정리

“여기를 클릭하세요” 버튼을 누르면 빨간색 영역에 1부터 10 사이의 무작위 숫자가 출력됩니다. 버튼을 누를 때마다 매번 다른 숫자가 표시되는 것을 확인할 수 있습니다.

자바스크립트 랜덤 숫자 생성하기 – Math.random() 함수 완벽 정리

응용: 원하는 범위의 랜덤 정수 만들기

임의의 최솟값(min)과 최댓값(max) 사이의 정수를 얻고 싶다면 다음 공식을 활용하면 됩니다.

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

console.log(getRandomInt(5, 15)); // 5부터 15 사이의 랜덤 정수

이처럼 Math.random()은 게임 개발, 랜덤 추첨, 샘플 데이터 생성 등 다양한 상황에서 유용하게 활용할 수 있는 자바스크립트의 기본 난수 생성 함수입니다.