자바스크립트 배열 요소 랜덤 선택하기

자바스크립트 배열에 담긴 요소를 랜덤으로 선택하려면 어떻게 해야 할까요? 다양한 방법이 있지만 가장 많이 사용되는 방법은 다음과 같습니다.

배열 요소 랜덤 선택하기

아래와 같이 날씨의 정보를 담은 배열이 있다고 해보겠습니다.

const weather = ["Sunny", "Cloudy", "Rainy", "Windy"];

각 요소를 랜덤으로 선택하려면 아래와 같이 Math() 메소드를 사용할 수 있습니다.

Math.floor(Math.random() * weather.length);

Math.random()은 0에서 1 사이의 소수를 랜덤하게 생성해주는 메소드죠. 여기에 배열의 길이를 곱해준 다음 Math.floor()를 통해 정수로 만들어줍니다. 이렇게 하면 랜덤한 배열 인덱스를 받을 수 있습니다.

최종 구현

이를 활용하여 다음과 같이 배열 요소를 랜덤으로 선택하는 함수를 구현할 수 있습니다.

const weather = ["Sunny", "Cloudy", "Rainy", "Windy"];

function getRandomWeather() {
    const randomIndex = Math.floor(Math.random() * weather.length);
    return weather[randomIndex];
}

이벤트 리스너를 활용하여 다음과 같이 간단히 구현해보았습니다.

 

See the Pen Untitled by 11292021 (@11292021) on CodePen.