How to Randomize (shuffle) a JavaScript Array

Arrays

The JavaScript array class is used to construct arrays, which are high-level and list-like objects. Arrays can be used for storing several values in a single variable. An array can be described as a unique variable that is capable of holding more than one value at the same time.

Each item has a number attached to it which is called a numeric index allowing you to access it. JavaScript arrays are manipulated with different methods.

As the following example suggests, we have a fruits array that consists of 4 elements and can be targeted by their index, starting from 0.

const fruits = ["apple", "orange", "banana", "coconut"];

alert( fruits[0] ); // apple
alert( fruits[1] ); // orange
alert( fruits[2] ); // banana
alert( fruits[2] ); // coconut

In contrary to languages like Ruby and PHP, JavaScript does not have an built-in method of shuffling the array. However, there is a method that allows shuffling the sequence. Let’s discuss a particular case.

For example, we have the following array:

let arr = [1, 2, 3, 4, 5]
=> [3, 5, 4, 1, 2] // a possible shuffle result

As the first example, we will define a function called randomize, which will take a parameter that is the array we want to shuffle. Then, we get a random index on each call and swap the elements' locations with each other, returning the values at the end.

Javascript shufflig an array
function randomize(values) { let index = values.length, randomIndex; // While there remain elements to shuffle. while (index != 0) { // Pick a remaining element. randomIndex = Math.floor(Math.random() * index); index--; // And swap it with the current element. [values[index], values[randomIndex]] = [values[randomIndex], values[index]]; } return values; } // define an array and randomize it var arr = ["a", "b", "c", "d", "e"]; randomize(arr); console.log(arr);

Shuffling an array of values is considered one of the oldest problems in computer science. Shuffling is possible with the Fisher-Yates shuffle algorithm for generating a random permutation of a finite sequence. That is to say, and the algorithm shuffles the sequence.

We can implement the algorithm with a for loop compared to the first example.

Javascript shufflig an array
function shuffleArray(arr) { // Start from the last element and swap // one by one. We don't need to run for // the first element that's why i > 0 for (let i = arr.length - 1; i > 0; i--) { // pick a random index from 0 to i inclusive const j = Math.floor(Math.random() * (i + 1)); // at random index // Swap arr[i] with the element [arr[i], arr[j]] = [arr[j], arr[i]]; } console.log(arr); } let arr = [1, 2, 3, 4, 5]; shuffleArray(arr);

Richard Durstenfeld introduces the modern version of the Fisher-Yates shuffle designed for computer use.

Javascript shufflig an array
function shuffleArray(array) { let curId = array.length; // There remain elements to shuffle while (0 !== curId) { // Pick a remaining element let randId = Math.floor(Math.random() * curId); curId -= 1; // Swap it with the current element. let tmp = array[curId]; array[curId] = array[randId]; array[randId] = tmp; } return array; } // Usage of shuffle let arr = [1, 2, 3, 4, 5]; arr = shuffleArray(arr); console.log(arr);

As the last example, we can also use the built-in javascript sort function to get the array sorted randomly on each call, which is much cleaner:

Javascript shufflig an array
function shuffleArray(arr) { arr.sort(() => Math.random() - 0.5); } let arr = [1, 2, 3, 4, 5]; shuffleArray(arr); console.log(arr)