JavaScript: 랜덤의 마법, Math.random()과 Math.floor() 기초부터 알아보기 🎲

안녕하세요, 독자 여러분! 개발자의 삶입니다. 😊

29일차 포스팅에서는 시계의 숫자가 항상 예쁜 두 자리를 유지하도록 padStart를 이용해 빈칸을 채우는 방법을 배웠습니다. 이제 우리의 웹 페이지에는 정확하고 깔끔한 실시간 시계가 돌아가고 있습니다.

오늘은 웹 페이지에 조금 더 재미있는 요소를 추가해 보려고 합니다. 페이지를 새로고침 할 때마다 배경색이 바뀌거나, 매번 다른 명언이 나오는 웹사이트를 본 적 있으신가요? 오늘은 자바스크립트로 예측 불가능한 무작위 숫자를 만들어내는 랜덤 기능에 대해 완벽하게 파헤쳐 보겠습니다.

1. 도입

프로그래밍에서 우연성을 만들어내는 것은 매우 중요합니다. 게임에서 주사위를 굴리거나, 음악 플레이어에서 노래를 무작위로 재생하거나, 이벤트 당첨자를 추첨할 때 모두 랜덤 기능이 필요합니다. 자바스크립트가 제공하는 수학 도구 상자인 Math 객체를 활용하면, 아주 간단하게 무작위 데이터를 뽑아내어 웹사이트를 다채롭게 만들 수 있습니다.

2. 개념 설명: 소수점 난수와 가위질

자바스크립트에서 랜덤 숫자를 만들고 가공하기 위해서는 두 가지 도구를 짝꿍처럼 함께 사용해야 합니다.

A. Math.random() : 무작위 소수 생성기 이 함수는 0.0부터 0.999999... 사이의 무작위 소수를 하나 던져줍니다. 중요한 점은 1은 절대 나오지 않는다는 것입니다. (0 이상 1 미만) 비유: 룰렛을 돌렸을 때 0부터 0.99 사이의 눈금 중 하나에 구슬이 멈추는 것과 같습니다.

B. Math.floor() : 소수점 내림 처리 (가위질) 우리가 필요한 것은 0, 1, 2 같은 깔끔한 정수형 인덱스입니다. 소수점이 필요 없죠. Math.floor()는 괄호 안에 들어온 숫자의 소수점 아래를 자비 없이 싹둑 잘라내어 내림 처리해 주는 함수입니다. 예시: Math.floor(3.99)는 3이 됩니다. 반올림이 아니라 무조건 내림입니다.

3. 예시 코드: 새로고침마다 바뀌는 명언 생성기

여러 개의 명언이 들어있는 배열을 준비하고, 무작위로 하나의 명언을 뽑아서 출력하는 코드를 작성해 보겠습니다.

JavaScript

 

// 1. 명언 데이터가 담긴 배열 준비
const quotes = [
    "포기하지 마라. 시작이 항상 가장 어렵다.", // 인덱스 0
    "성공은 매일 반복한 작은 노력들의 합이다.", // 인덱스 1
    "실패는 잊어라. 하지만 그것이 준 교훈은 절대 잊지 마라.", // 인덱스 2
    "아무것도 하지 않으면 아무 일도 일어나지 않는다.", // 인덱스 3
    "당신의 한계는 당신이 정하는 것이다." // 인덱스 4
];

// 2. 랜덤 인덱스 구하기 (공식처럼 외우면 좋습니다!)
// Math.random() * 배열의 길이
const randomNumber = Math.random() * quotes.length;
const randomIndex = Math.floor(randomNumber);

// 3. 배열에서 랜덤 인덱스에 해당하는 명언 뽑기
const todaysQuote = quotes[randomIndex];

// 4. 결과 출력
console.log("계산된 랜덤 소수:", randomNumber);
console.log("선택된 정수 인덱스:", randomIndex);
console.log("오늘의 명언:", todaysQuote);

 

코드 실행 결과 (새로고침 할 때마다 다르게 나옵니다): 계산된 랜덤 소수: 2.74839103... 선택된 정수 인덱스: 2 오늘의 명언: 실패는 잊어라. 하지만 그것이 준 교훈은 절대 잊지 마라.

4. 코드 설명: 무작위 정수가 만들어지는 과정

무작위로 배열의 요소를 뽑을 때 사용하는 Math.floor(Math.random() * 배열.length)는 자바스크립트의 국민 공식과도 같습니다. 이 수식이 어떻게 작동하는지 분해해 보겠습니다.

1. quotes.length: 이 배열 안에는 총 5개의 명언이 있으므로 길이는 5입니다. 우리가 필요한 인덱스는 0, 1, 2, 3, 4 중 하나입니다.
2. Math.random() * 5: Math.random()이 0부터 0.999... 사이의 숫자를 만듭니다. 여기에 5를 곱하면, 결과는 0.0부터 4.999... 사이의 숫자가 됩니다. 5.0은 절대 넘지 않습니다.
3. Math.floor(...): 위에서 나온 0.0 ~ 4.999... 사이의 숫자를 Math.floor에 넣으면 소수점이 모두 잘려나갑니다. 결과적으로 0, 1, 2, 3, 4라는 완벽한 정수 인덱스 중 하나만 남게 됩니다.
4. quotes[randomIndex]: 뽑혀 나온 정수를 배열의 대괄호 [] 안에 넣으면, 배열에 들어있던 무작위 명언이 튀어나오게 됩니다.

---

5. 마무리

오늘은 30일차 포스팅으로, 자바스크립트에서 우연성을 만들어내는 Math.random()과 소수점을 깔끔하게 정리하는 Math.floor()에 대해 배웠습니다. 이 원리를 응용하면 배경 이미지를 배열에 담아두고 매번 다른 화면을 보여주는 기능도 거뜬히 만들 수 있습니다.

지금까지 30일에 걸쳐 자바스크립트의 필수 문법부터 DOM 제어, 데이터 저장, 랜덤 처리까지 많은 것을 다루었습니다. 다음 31일차 포스팅에서는 드디어 웹 브라우저가 제공하는 강력한 기능 중 하나인 Geolocation API를 사용하여, 사용자의 현재 위치(위도와 경도)를 가져와서 날씨 앱을 만들 준비를 해보겠습니다.

점점 진짜 서비스에 가까운 기능들을 다루게 되니 무척 기대되시죠? 다음 시간에 만나요! 👋