랜덤한 숫자를 뽑기 위한 두 가지 방법
자바스크립트에서 랜덤하게 숫자를 뽑기 위한 2가지 방법에 대해 알아보겠습니다.
무작위 숫자를 생성하는 자바스크립트 내장 함수는 Math.random()을 사용합니다.
이 함수는 0이상 1미만의 소수점 단위의 숫자를 무작위로 생성하기 때문에,
단순히 0부터 9까지의 숫자를 원한다면 랜덤 함수에 9를 곱해준 뒤 숫자 내림 함수인
Math.floor() 함수를 사용해 자연수 0~9까지의 숫자를 반복문을 이용해 랜덤하게
얻을 수 있습니다.
1. 뽑아서 가져오는 랜덤한 숫자
const numbers = [];
for(let i = 0; i < 9; i++) {
const random = Math.floor(Math.random() * 9);
numbers.push(random);
}이렇게 하면 numbers라는 배열에 0~9까지의 배열을 얻을 수 있게 됩니다.
1부터 랜덤하게 시작하는 숫자를 원한다면 9를 곱한 뒤, 1을 더해주면 됩니다.
const random = Math.floor(Math.random() * 9 + 1);이렇게만 하면 1~9까지의 숫자를 얻을 수 있지만,
중복된 숫자까지 얻게 됩니다.
중복된 숫자를 없애기 위해선 1~9까지의 숫자가 있는 배열을 만든 뒤,
이 배열에서 랜덤하게 숫자를 뽑아주고 배열에서 없애주는 겁니다.
const numbers = [];
for(let i = 0; i < 9; i++) {
numbers.push(i + 1)
}먼저 1부터 9까지의 숫자가 담긴 배열 하나를 만들어 준 뒤,
const answer = [];
for(let n = 0; n < 9; n++) {
const index = Math.floor(Math.random() * numbers.length); // 0 ~ 8까지의 인덱스 번호
answer.push(numbers[index]);
numbers.splice(index, 1);
}numbers 배열의 갯수만큼 랜덤한 숫자의 인덱스번호를 뽑아서
answer라는 빈 배열에 넣어줍니다.
그리고 numbers배열에서 뽑아준 인덱스번호에 해당하는 그 숫자를 splice를 이용해 없애줍니다.
이렇게 하면 중복없는 무작위의 1~9까지의 숫자를 얻을 수 있습니다.
2. 피셔 예이츠 셔플
두번째 방법은 '피셔 예이츠 셔플' 이라는 방법입니다.
앞선 방법은 기존 배열에서 랜덤하게 뽑은 숫자를 다른 배열로 옮기는 방식이었다면,
피셔 예이츠 셔플 이라는 방식은 기존 배열을 아예 다 섞은 뒤,
랜덤하게 뒤섞인 배열에서 숫자를 뽑는 방식입니다.
const candidate = Array(9).fill().map((v, i) => i + 1);먼저 candidate라는 변수에 1 ~ 9까지의 숫자들을 담아줬습니다.
Array라는 메소드로 길이가 9인 빈배열을 만들고, fill()메소드를 통해 어떤 값이 들어갈지를 정해주는데
이렇게 빈값으로 넣어두면 undefined 9개가 기본으로 들어갑니다.
그래서 map을 통해서 각각의 인덱스번호에 1을 더한 값을 리턴해준 값들이 (1 ~ 9)
변수에 배열로 저장이 된겁니다.
const shuffle = [];
while(candidate.length > 0) {
const random = Math.floor(Math.random() * candidate.length); // candidate길이의 무작위 인덱스 번호
const spliceArray = candidate.splice(random, 1); // candidate배열에서 뽑은 무작위 숫자를 변수에 저장
const value = spliceArray[0]; // 배열에 들어있는 값을 꺼내서
shuffle.push(value); // shuffle배열에 추가
}while문을 이용해 candidate길이가 0이 될 때까지 무작위의 숫자를 뽑아서 뽑은 숫자를 shuffle배열에
넣어주면 1~9까지 무작위로 섞인 배열이 완성됩니다.
언뜻 본다면 두 방식의 차이가 모호하게 느껴지는데,
1~9까지의 전체 숫자가 아닌, 그 숫자내에서 필요한 숫자를 뽑아낼 때 명확한 차이가 보이는 것 같습니다.
만약 1~9까지의 숫자에서 4개정도의 랜덤한 숫자가 필요하다면
앞에 방식은 1부터 9까지 정렬된 숫자에서 랜덤하게 하나씩 뽑아오는 형태라면,
피셔 예이츠 셔플의 방식은 1부터 9까지의 숫자를 모두 섞은뒤 그 뒤에 원본 배열에서 뽑아오기때문에
const shuffleNumber = shuffle.slice(0, 4);slice를 활용하여 이미 섞여있는 숫자에서 4개를 뽑아오는 정도로 이해하면 좋을 것 같습니다.
웹에서는 랜덤함수를 사용할 일이 많지는 않지만,
상황에 따라서, 혹은 자바스크립트로 게임을 만들때 랜덤함수를 자주 사용하기도 하기 때문에
2가지 방식을 정리해봤습니다.
이 2가지 방식의 출처는 제로초님의 렛츠기릿 자바스크립트 웹게임 강좌를 보고 공부하면서 정리한 글입니다.
