How to shuffle an array in JavaScript

When we talk about “shuffling” an array, it means changing the order of the elements within the array in a random or pseudo-random manner. The goal is to produce a different arrangement of the elements, creating unpredictability in their sequence.

For example, consider array [1, 2, 3, 4, 5]. After shuffling, it might become [3, 1, 5, 2, 4]. The order of the elements has been randomly rearranged.

Even though JavaScript doesn’t have a built-in shuffle function, it’s relatively easy to implement one using existing language features.

Using Fisher-Yates algorithm

The Fisher-Yates shuffle algorithm, also known as the Knuth shuffle, is a simple and efficient algorithm used for shuffling an array randomly.

The basic idea behind the algorithm is to iterate through the array from the last element to the first, and at each iteration, swap the current element with a randomly chosen element that comes before it.

// Shuffles the array in place
function shuffle(array) {
  // Loop over the array from the last element to the first
  for (let i = array.length - 1; i > 0; i--) {
    // Pick a random index from 0 to i
    let j = Math.floor(Math.random() * (i + 1));
    // Swap the elements at i and j
    [array[i], array[j]] = [array[j], array[i]];
  }
}

This algorithm has a time complexity of O(n), where n is the length of the array. The randomness comes from the fact that at each step, an element is chosen uniformly at random from the remaining unshuffled elements.

Keep in mind that this algorithm shuffles the array in place, meaning it modifies the original array directly. If you need to keep the original array unchanged, you can create a copy of it before shuffling.

The Fisher-Yates algorithm ensures each element has an equal chance of ending up in any position, leading to a statistically fair shuffle.

Using sort method with random compare

Using the sort() method with a custom compare function that introduces randomness is a creative way to in-place shuffle an array in JavaScript.

function shuffle(array) {
  return array.sort(() => Math.random() - 0.5);
}

The random compare function returns a random value that is either negative, positive, or zero. This randomness is achieved by subtracting 0.5 from the result of Math.random(), which gives a random number between -0.5 and 0.5.

However, it’s important to note that this method is not as reliable as the Fisher-Yates shuffle for creating truly random permutations. The primary reason is that the sort() method assumes a stable sorting algorithm, which means equal elements will maintain their relative order.

Using a library like Lodash

Lodash is a widely used utility library in JavaScript, providing a range of helpful functions to simplify common programming tasks. One of the functions provided by Lodash is _.shuffle(), which is specifically designed to shuffle the elements of an array.

Calling _.shuffle() on an array in Lodash returns a new array with the elements randomly reordered. It uses a variation of the Fisher-Yates shuffle algorithm, known for its efficient and statistically fair randomness.

const _ = require("lodash");

const array = [1, 2, 3, 4, 5];
const shuffledArray = _.shuffle(array);
console.log(shuffledArray); // [ 5, 1, 3, 4, 2 ] (random order)
console.log(array); // [ 1, 2, 3, 4, 5 ]