[javascript] 자바스크립트 랜덤으로 배열 섞기 (shuffle array)

참고: https://sabe.io/blog/javascript-shuffle-array

대부분의 상황에서 배열의 순서는 중요하게 여겨지며 배열이 그렇게 나열된 데는 각자 이유가 있습니다. 하지만 어떤 경우에는 배열의 요소를 무작위로 섞어 새 위치에 나열하도록 해야할 때가 있습니다.

이 포스트에서는 JavaScript로 배열의 요소를 쉽게 섞는 방법을 알아보겠습니다.

JavaScript로 배열을 섞는 방법

배열을 섞는 가장 쉬운 방법은 sort() 메소드를 사용하는 것 입니다. sort() 메소드는 콜백 함수를 매개변수로 받습니다.

이 콜백 함수는 비교할 두 개의 요소를 매개변수로 사용하고 이 콜백 함수의 결과로 순서를 결정할 수 있도록 합니다.

이 콜백 함수의 리턴 값이 음수면 첫 번째 요소가 두 번째 요소보다 앞에 배치하도록 하고 결과 값이 양수면 두 번째 요소가 첫 번째 요소 보다 앞에 위치하도록 하며 0 이면 순서를 바꾸지 않습니다.

여기서 콜백 함수의 리턴 값을 임의로 음수, 양수 또는 0을 리턴하도록 하여 배열을 임의로 섞을 수 있습니다. 이를 위한 가장 쉬운 방법은 Math.random() 메소드를 사용하는 것 입니다.

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const shuffledArray = array.sort(() => Math.random() - 0.5);

콜백 함수가 호출될 때 마다 결과가 다르게 나타나기 때문에 배열을 무작위로 섞게 됩니다.

한가지 주의할 점은 sort() 메소드는 원본 배열을 변경한다는 점 입니다. 위의 이미지 처럼 sort() 메소드를 사용한 원본 배열인 array의 내용을 console.log()로 확인해 보니 원본 배열의 내용도 바뀐 것을 확인할 수 있습니다.

이와 다르게 원본 배열은 유지하고 새로운 섞인 배열을 얻고 싶다면 원본 배열을 복사한 다음 섞어야합니다.

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const shuffledArray = [...array].sort(() => Math.random() - 0.5);

정리

이 포스트에서는 JavaScript에서 배열을 섞는 가장 쉬운 방법을 알아봤습니다.

간단히 sort() 메소드를 사용하고 순서를 결정하기 위해 랜덤 숫자를 리턴하는 콜백 함수를 만들었습니다.

관련 글

자바스크립트 랜덤 문자열 만들기

자바스크립트 배열 정렬하기