JavaScript - 배열 요소 무작위로 섞는 방법 (shuffle)

Javascriptarray

자바스크립트에서 배열의 요소를 무작위로 섞는 방법을 소개합니다. 두가지 예제가 있는데 모두 Math.random()을 사용하여 shuffle을 구현하였습니다.

1. 배열 Shuffle 예제 (1)

아래 예제에서 shuffleArray()는 인자로 전달받은 배열의 요소를 무작위로 섞습니다. 간단히 코드를 설명하면, Math.random()는 0이상 1미만의 숫자를 리턴합니다. (Math.random() - 0.5)는 무작위로 음수, 양수, 0을 리턴하게 됩니다. sort()는 음수, 양수, 0의 결과 값에 따라 정렬을 합니다. 무작위로 리턴된 결과값이기 때문에 정렬도 무작위로 정렬됩니다.

function shuffleArray(array) {
  array.sort(() => Math.random() - 0.5);
}

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
shuffleArray(arr);
console.log(arr);

Output:

[
  7,  9, 4, 8, 2,
  5, 10, 3, 6, 1
]

2. 배열 Shuffle 예제 (2)

아래 코드에서 index인 i가 10이라면 Math.random() * (i + 1)는 0이상 11 미만의 숫자를 리턴합니다. Math.floor()로 소수를 버리면 0이상 10이하의 숫자를 리턴합니다. shuffle에 사용할 Index j를 계산하고, i와 j의 값을 바꿉니다. 이렇게 모든 요소에 대해서 값을 바꾸면 무작위로 섞이게 됩니다.

const shuffleArray = array => {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    const temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
}

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
shuffleArray(arr);
console.log(arr);

Output:

[
  10, 8, 4, 6, 3,
   9, 2, 7, 1, 5
]

두 요소를 Swap할 때 Destructuring을 이용하면 아래와 같이 좀 더 간단히 구현할 수 있습니다.

const shuffleArray = array => {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
shuffleArray(arr);
console.log(arr);

References

Loading script...

Related Posts

codechachaCopyright ©2019 codechacha