자바스크립트의 랜덤 함수 Math.random() 사용법과 예시

자바스크립트의 랜덤 함수 Math.random() 사용법과 예시

개요

자바스크립트에서는 난수를 생성하기 위해 Math.random() 메서드를 사용한다.

Math.random() 메서드는 기본적으로 0 이상 1 미만의 랜덤 한 부동 소수점(float)을 반환하는데, 사실 실생활에서 0.344558 같은 랜덤 수는 쓸모가 없다. 이 글에서는 Math.random() 메서드를 사용해 보다 의미 있는 난수를 생성하려면 어떻게 해야 하는지를 알아본다.

Math.random()을 그대로 사용한다면?

console.log(Math.random()); // 0 이상 1 미만의 랜덤한 부동 소수점

앞에서 말했던 대로 0 이상 1 미만의 랜덤한 부동 소수점을 생성한다.

Math.random() 실행 결과

나는 살면서 어떤 서비스를 이용할 때 0.5568229970124625 같은 숫자를 한 번도 접해본 적이 없다.

우리는 어떤 서비스를 만들 때 진짜 아무 의미 없는 랜덤값을 만들어내는 게 아닌 이상, 이걸 그대로 쓰진 않을 것이다.

0부터 9 사이의 랜덤 숫자 생성하기

Math.random()은 0 이상 1 미만의 랜덤 부동 소수점을 생성해낸다고 했다.

그렇다면 우리가 0에서 9 사이의 랜덤 숫자를 생성하기 위해 고려해야 할 것은 다음과 같다.

1. 0 이상 1 미만을 어떻게 0 이상 9 이하로 만들지?
2. 랜덤 부동 소수점을 어떻게 랜덤 정수형으로 만들지?

1번 문제부터 해결해 보자.

우리는 어차피 부동 소수점을 정수형으로 만들 것이므로 9.999999나 9나 정수로 바꾸면 거기서 거기다. 따라서 0 이상 1 미만을 0 이상 9 이하로 만드는 방법은 0 이상 10 미만으로 만드는 것과 같다.

Math.random() * 10 // 0 이상 10 미만의 랜덤 부동 소수점

이제 미만을 이하로 확장하려면 어떻게 해야 할까?

지금 상태에서는 가장 작은 수는 0, 가장 큰 수는 9.999999... 가 된다.

이제 2번 문제를 해결할 차례다. 랜덤 정수형으로 만들어주는 가장 쉽고 간편한 방법은 Math.floor()를 사용해 소수점 이하의 수를 모두 버려버리는 것이다.

Math.floor(Math.random() * 10)

이제 완전히 깔끔하게 0 이상 9 이하의 랜덤 정수형이 만들어진다.

N부터 M 사이의 랜덤 숫자 생성하기

이제 0에서 9 사이가 아니라 N에서 M 사이의 랜덤 숫자로 확장해 볼 때다.

위에서 10을 왜 곱해줬는지 생각해 보자. 0 이상 1 미만이었던 것을 0 이상 10 미만으로 확장하기 위함이다. 이처럼 곱한다는 것은 MAX 범위를 확장하기 위해 사용된다.

그리고 곱한 수를 정수형으로 바꿔줘야 한다. 이것은 여전히 Math.floor()를 사용해서 버려주면 된다.

이제 MIN 범위를 늘리기 위해서는 어떻게 해야 할까? 0이상 1 미만을 3 이상 4 미만으로 확장하는 걸 생각해 보자. 양쪽 수 모두에 3이 더해진다. 따라서 MIN 값만큼 더해주면 된다.

이것을 모두 구현하면 아래의 코드가 된다.

Math.floor(Math.random() * (M - N + 1)) + N;

M - N + 1을 하는 이유는 Math.random()이 Max값 미만의 수를 만들어내기 때문이다.

배열에서 랜덤 요소를 선택하도록 하기

위의 내용까지 이해했다면 그 뒤의 응용은 간단하다. 배열에서 랜덤 요소를 선택하려면 어떻게 해야할까?

우선 배열의 요소에 어떻게 접근하는지를 먼저 생각해보자. 배열의 요소에 접근하기 위해서는 인덱스가 필요하다.

그리고 이 인덱스는 0 이상 배열의 길이 미만의 정수로 이루어진다.

따라서 랜덤 인덱스를 구하기 위해서는 0 이상 배열의 길이 미만의 정수를 만들어내면 된다.

let randomIndex = Math.floor(Math.random() * items.length);

여기서 배열[랜덤 인덱스]가 바로 배열의 랜덤 요소가 된다.

let items = ['apple', 'banana', 'cherry', 'date'];
let randomIndex = Math.floor(Math.random() * items.length);
let randomItem = items[randomIndex];
console.log(randomItem);  // 배열의 랜덤 요소

랜덤 불리언 값 생성하기

불리언 값은 true와 false 두 가지로 구성된다. 따라서 랜덤 불리언 값을 만들기 위해서는 0부터 1 미만의 수를 반으로 쪼개주면 된다. 0은 포함이지만 1은 미포함이므로 다음과 같이 구현하면 된다.

let randomBoolean = Math.random() >= 0.5;
console.log(randomBoolean);  // true 또는 false

랜덤 RGB 색상 생성하기

RGB는 이름처럼 R, G, B 세 가지로 구성되며 각각은 0~255(포함)의 수를 갖는다.

따라서 0 이상 255 이하, 곧 0 이상 266 미만의 난수를 세 개 생성하면 그것이 RGB가 된다.

let randomColor = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
console.log(randomColor);