[Javascript] Math.random() 난수 생성, 랜덤 숫자/번호 추출

자바스크립트 랜덤으로 숫자를 추출해야 할 경우가 종종 있다. 이러한 난수를 생성하기 위해 사용하는 Math.random() 매서드에 대해 알아보자.

 

 

 

 

 

목차

1. Math.random()
2. 숫자 범위 지정하고, 소수점을 자연수로 바꾸기
3. 무작위 숫자 배열로 추출

 

 

 

 

1. Math.random()

Math.random() 함수는 0부터 1 미만까지 무작위로 부동소수점의 난수를 추출한다. 아래 예제에서 추출된 난수는 새로고침 할 때마다 바뀐다.

 

See the Pen by cw (@fromnowwon) on CodePen.

 

 

 

2. 숫자 범위 지정하고, 소수점을 자연수로 바꾸기

1) 범위 지정하기

랜덤 숫자의 범위를 지정하고, 최댓값에서 최솟값을 빼준 다음 1을 더한다. 

Math.random() * (최대값 - 최소값) + 최소값

 

 

2) Math.floor 사용하여 자연수로 변경하기

위에서 정한 범위 내의 숫자들은 아직 소수점이 포함되어 있다. 이 값을 자연수로 바꾸기 위해서는 소수점을 내림, 올림, 반올림을 해야 한다. 이번 경우는 내림 함수인 Math.floor()를 사용하면 된다. Math.floor()는 소수점 이하를 버림 하여 반환하는 함수이다.

 

• Math.round() : 반올림 
• Math.ceil() : 올림 (소수점 이하를 올린다)
• Math.floor() : 내림 (소수점 이하를 버린다)

Math.floor(Math.random() * (최대값 - 최소값) + 최소값)

 

최종 예제

Math.floor(Math.random())	0 <= x < 1	x = [0, 1]
Math.floor(Math.random() * (10 - 0)+ 1)	0 <= x <= 10	x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Math.floor(Math.random() * (10 - 1) + 1)	1 <= x <= 10	x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Math.floor(Math.random() * (10 - 3) + 3)	3 <= x <= 10	x = [3, 4, 5, 6, 7, 8, 9, 10]

 

 

 

 

See the Pen Math.random() 랜덤 숫자 추출하기 by cw (@fromnowwon) on CodePen.

 

 

 

※ 1000 단위 이상의 랜덤 숫자일 때 TIP

- 2000부터 3000 사이의 랜덤 숫자 출력하기

 

Math.floor((Math.random() * (1000 - 1) + 1) + 2000);

 

우선, 1부터 1000 사이의 랜덤 숫자를 뽑는다는 생각으로 1000(최댓값) - 1(최솟값) + 1을 해준다. 그 뽑힌 숫자는 1부터 1000 사이의 숫자니까 거기에 2000을 더하면 2000부터 3000 사이의 숫자가 된다. (1+2000 ~ 1000+2000 = 2001 ~ 3000)

 

 

 

 

 

 

 

3. 무작위 숫자 배열로 추출

지정한 범위 내에서 무작위로 숫자를 뽑아 배열로 만들고 싶을 때는 어떻게 해야 할까? 1~10까지를 예를 들어 보자.

 

 

1) 우선 빈 배열을 생성한다. 그리고 그 배열을 fill() 함수를 통해 'undefined'로 채워진 10개 빈자리를 만들어둔다.

 

const numbers = Array(10).fill();
// fill()의 value 값을 지정하지 않으면 아래와 같이 undefined(빈 요소)로 채워진 배열이 생성된다.
// [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]

 

 

※ fill() 함수에 대해 아직 모른다면 다음 페이지 참고 

[Javascript] 배열 매서드 fill()

 

 

 

2) map() 함수의 두 번째 매개변수인 인덱스 값을 순회(0~9)하면서, 그 값에 1을 더하면 1~10까지의 숫자가 순서대로 반환된다.

 

const numbers = Array(10).fill().map((item, index) => index + 1);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

 

 

※ map() 함수에 대해 아직 모른다면 다음 페이지 참고 

[Javascript] 반복문 for, forEach, map 차이점

 

 

 

 

3) 랜덤 숫자가 담길 빈 배열을 생성한다.

 

const numbers = Array(10).fill().map((item, index) => index + 1);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 
const random = [];

 

 

 

 

4) while 문을 사용하여 random 배열에 하나씩 담는다.
추출된 요소는 numbers 배열에서 삭제되고, ramdom 배열에 담긴다. 따라서 numbers의 개수(length)가 1일 때까지 반복문을 돌리면 된다. num이라는 변수를 생성해 랜덤으로 뽑은 숫자를 담는다.

 

const numbers = Array(10).fill().map((item, index) => index + 1);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 
const random = []; // 랜덤으로 추출된 숫자를 담을 배열
 
while (numbers.length > 0) { // numbers 배열에서 하나씩 추출되면서 제거되므로 numbers가 1개 있을 때까지 반복문을 돌린다.
    const num = Math.floor(Math.random() * numbers.length); // 첫번째 랜덤 숫자 범위 : 1 <= x <= 45이므로, Math.random() * (45 - 1 + 1) = Math.random() * 45
}

 

 

 

5) numbers 배열에서 아까 뽑은 랜덤 숫자와 같은 숫자를 추출해 newArr 변수에 담는다. splice 메서드를 활용하면 배열로 담기므로, value라는 변수에 요소 값만 추출하여 담는다.

 

const numbers = Array(10).fill().map((item, index) => index + 1);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 
const random = []; // 랜덤으로 추출된 숫자를 담을 배열
 
while (numbers.length > 0) { // numbers 배열에서 하나씩 추출되면서 제거되므로 numbers가 1개 있을 때까지 반복문을 돌린다.
    const num = Math.floor(Math.random() * numbers.length); // 첫번째 랜덤 숫자 범위 : 1 <= x <= 45이므로, Math.random() * (45 - 1 + 1) = Math.random() * 45
    const newArr = numbers.splice(num, 1); // numbers 배열에서 해당 랜덤 넘버 추출
    const value = newArr[0]; // numbers는 배열이므로 요소 값만 추출해 변수에 담는다.
}

 

 

 

6) random 배열에 value 값을 담는다.

 

const numbers = Array(10).fill().map((item, index) => index + 1);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 
const random = []; // 랜덤으로 추출된 숫자를 담을 배열
 
while (numbers.length > 0) { // numbers 배열에서 하나씩 추출되면서 제거되므로 numbers가 1개 있을 때까지 반복문을 돌린다.
    const num = Math.floor(Math.random() * numbers.length); // 첫번째 랜덤 숫자 범위 : 1 <= x <= 45이므로, Math.random() * (45 - 1 + 1) = Math.random() * 45
    const newArr = numbers.splice(num, 1); // numbers 배열에서 해당 랜덤 넘버 추출
    const value = newArr[0]; // numbers는 배열이므로 요소 값만 추출해 변수에 담는다.
    random.push(value); // 추출한 값을 random 배열에 담는다.
}

 

 

 

7) random 배열에 1부터 10까지 랜덤으로 값이 담긴다. 새로고침 할 때마다 새로운 배열이 추출된다. 

 

const numbers = Array(10).fill().map((item, index) => index + 1);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 
const random = []; // 랜덤으로 추출된 숫자를 담을 배열
 
while (numbers.length > 0) { // numbers 배열에서 하나씩 추출되면서 제거되므로 numbers가 1개 있을 때까지 반복문을 돌린다.
    const num = Math.floor(Math.random() * numbers.length); // 첫번째 랜덤 숫자 범위 : 1 <= x <= 45이므로, Math.random() * (45 - 1 + 1) = Math.random() * 45
    const newArr = numbers.splice(num, 1); // numbers 배열에서 해당 랜덤 넘버 추출
    const value = newArr[0]; // numbers는 배열이므로 요소 값만 추출해 변수에 담는다.
    random.push(value); // 추출한 값을 random 배열에 담는다.
}
 
console.log(random);
// ex: [8, 4, 5, 10, 3, 2, 7, 1, 9, 6]