[JavaScript]배열을 섞는 방법

이번 포스팅에서는 JavaScript에서 배열을 섞는 방법을 소개합니다.

---

Fisher-Yates Shuffle 알고리즘

Fisher-Yates Shuffle 알고리즘은 마지막 인덱스를 시작으로 반복문이 실행됩니다. 배열 요소를 순회하여 배열의 임의의 요소로 값을 변경합니다. 인덱스 위치가 0에 도달하면 반복문은 종료됩니다.

 

다음은 JavaScript에서 Fisher-Yates Shuffle 알고리즘이 적용될 배열입니다.

let originArray = ["A", "B", "C"
                 , "D", "E", "F"
                 , "G", "H", "I"];

 

배열을 인자로 받으며, 배열의 요소를 뒤섞는 함수를 정의합니다.

const shuffleArray = (array) => {
  // ...
}

 

Fisher-Yates Shuffle 알고리즘은 반복문이 마지막 위치에서 시작하므로 시작 위치를 array.length - 1으로 설정합니다.

const shuffleArray = (array) => {
  for(let loop = array.length - 1; i >= 0; i--) {
    // ...
  }
}

 

Math.random() 함수와 Math.floor() 함수를 사용하여 난수를 생성하고 변수 randomNum에 할당합니다. 루프가 실행될 때마다 변수 randomNum 값이 변경됩니다.

const shuffleArray = (array) => {
  for(let loop = array.length - 1; i >= 0; i--) {
    let randomNum = Math.floor(Math.random() * (loop + 1));
    // ...
  }
}

 

위에서 생성한 난수를 배열 인덱스로 하여 배열 요소를 변수 randomArrayItem에 할당합니다.

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

 

마지막으로 randomNum가 배열 인덱스인 요소는 현재 배열 요소로 할당하며, 현재 배열 요소는 변수 randomArrayItem으로 할당합니다.

const shuffleArray = (array) => {
  for(let loop = array.length - 1; loop >= 0; loop--) {
    let randomNum = Math.floor(Math.random() * (loop + 1));
    let randomArrayItem = array[randomNum];
    
    array[randomNum] = array[loop];
    array[loop] = randomArrayItem;
  }
  // 배열이 잘 섞였는지 확인하기 위함. 
  console.log(array);
}

실행 결과

---

sort() 함수와 Math.random() 함수를 사용하는 방법

sort() 함수와 Math.random() 함수를 사용하여 배열을 섞을 수 있습니다.

let originArray = ["A", "B", "C"
                 , "D", "E", "F"
                 , "G", "H", "I"];
                 
console.log(originArray.sort(() => 0.5 - Math.random()));

배열을 섞기 위해 sort() 함수의 콜백에서 -0.5 ~ 0.5 사이의 임의의 숫자를 반환합니다.

 

반환된 숫자가 음수( - )이면 요소의 위치가 동일하게 유지되며, 음수( - )가 아닌 경우 값이 교환됩니다.

 

가장 간단한 방법이지만, Fisher-Yates Shuffle 알고리즘에 비해 성능이 좋지 않습니다.