How to Randomize or Shuffle an Array in JavaScript

1. Shuffle an Array Depending on JavaScript Engine
2. Measure the Randomness of Our Simple Algorithm
3. Shuffle an Array Using Fisher-Yates Shuffle Algorithm
4. Shuffle an Array With the Underscore.js or Lo-Dash Library

In this tutorial, we will learn how to shuffle or randomize an array in JavaScript; there are many ways to shuffle an array in JavaScriptwhether by implementing shuffling algorithms or using already existing shuffle functions in some libraries.

To shuffle an array is to arrange its element randomly, so it mainly depends on how you reorder or sort the array with a degree of randomness.

Let’s move forward and discover different ways to randomize or shuffle an array.

Shuffle an Array Depending on JavaScript Engine

Let’s start with implementing a simple array shuffling algorithm by sorting the array using array.sort() but using some randomness generated by the equation Math.random() - 0.5 and -0.5 ensures that every time we call the algorithm, the random value can be positive or negative.

Let’s Implement that simple algorithm with the power of JavaScript engine and print the shuffled Array to console using Console.log():

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

var demoArray = [1, 3, 5];
shuffleArray(demoArray);
console.log(demoArray);

Output:

[1, 5, 3]

Measure the Randomness of Our Simple Algorithm

The probability of that array’s permutations can be calculated to check how excellent and random our algorithm we have implemented.

Let’s see how we can measure its randomness.

1. Create a dictionary that will count the appearance for all permutations.
2. Create a loop that will run 1000000 times and every time will increase the count of the permutation formed
3. Print the counts of all possible permutations and observe the probabilities between them.

This simple measuring algorithm can be implemented like the following:

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

// counts of the appearances for all possible permutations
var countDic = {
  '153': 0,
  '135': 0,
  '315': 0,
  '351': 0,
  '531': 0,
  '513': 0,
};

// Creating the loop
for (var i = 0; i < 1000000; i++) {
  var arr = [1, 5, 3];
  shuffleArray(arr);
  countDic[arr.join('')]++;
}

// Print the counts of all possible permutations
for (var key in countDic) {
  console.log(`${key}: ${countDic[key]}`);
}

Output:

135: 62256
153: 375832
315: 62976
351: 311865
513: 124518
531: 62553

From the above output, we can see the bias clearly as 135, 315, and 531 appear much less than others and so similar counts to each other.

Shuffle an Array Using Fisher-Yates Shuffle Algorithm

This simple algorithm based on the JavaScript engine is unreliable in the past section, but a great algorithm called Fisher-Yates is better regarding its efficiency and reliability.

The idea behind the Fisher-Yates Algorithm is to walk to the array in reverse order and swap each element with a random one before it. Fisher-Yates is a simple but very efficient and fast algorithm.

Let’s implement Fisher-Yates algorithm:

function fisherYatesShuffle(arr) {
  for (var i = arr.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));  // random index
    [arr[i], arr[j]] = [arr[j], arr[i]];          // swap
  }
}

var tmpArray = [1, 3, 5];
fisherYatesShuffle(tmpArray);
console.log(tmpArray);

So let’s explain it step-by-step:

1. for(var i =array.length-1 ; i>0 ;i--) a for loop that will walk on the array in a reverse order.
2. Math.floor( Math.random() * (i + 1) ) Generating a random index that ranges between 0 and i.
3. [arr[i],arr[j]]=[arr[j],arr[i]] is swaping the elements arr[i] and arr[j] with each other using the Destructuring Assignment syntax.

Output:

(3) [3, 1, 5]

Now let’s test Fisher-Yates the same we did before:

// counts of the appearances for all possible permutations
var countDic = {
  '153': 0,
  '135': 0,
  '315': 0,
  '351': 0,
  '531': 0,
  '513': 0,
};

// Creating the loop
for (var i = 0; i < 1000000; i++) {
  var arr = [1, 5, 3];
  fisherYatesShuffle(arr);
  countDic[arr.join('')]++;
}

// Print the counts of all possible permutations
for (var key in countDic) {
  console.log(`${key}: ${countDic[key]}`);
}

Output:

135: 166734
153: 166578
315: 166908
351: 166832
513: 166535
531: 166413

From the above output, you can see the big difference between Fisher-Yates algorithm and the simple algorithm we implemented before and how reliable is Fisher-Yates algorithm.

Shuffle an Array With the Underscore.js or Lo-Dash Library

The famous Underscore.js library also provides a shuffle function that can directly randomize an array without the need to write your implementation of any algorithm.

Let’s see the following example of using the _.shuffle() method.

First, We need to import the library using Cloudflare CDN inside the HTML Template,

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

Then we use the _.shuffle() method like:

var tmpUnderscoreArray = [1, 3, 5];
resultArray = _.shuffle(tmpUnderscoreArray);
console.log(resultArray);

Output:

(3) [1, 5, 3]