How to randomize (shuffle) a JavaScript array?

javascript

shuffle

algorithm

randomization

byAnton Shumikhin·Sep 19, 2024

Utilize the Fisher-Yates shuffle to shuffle a JavaScript array. This algorithm performs in-place random swaps, guaranteeing a balanced result:

function shuffle(array) {
  // Hey, it's shuffle o'clock!
  for (let i = array.length - 1; i > 0; i--) {
    // Engage randomizer!
    const j = Math.floor(Math.random() * (i + 1));
    // Swapping time!
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

// Let's play demo shuffle!
console.log(shuffle([1, 2, 3, 4, 5]));

To get a randomized version of myArray, just call shuffle(myArray). This is a decent, one-line solution wrapped in a function for maximized reusability.

Mechanics of the Fisher-Yates algorithm

The Fisher-Yates shuffle, alternatively referred to as the Knuth shuffle, promises unbiased results during array randomization. It circumvents the potential biases associated with simpler methods, like using .sort(() => 0.5 - Math.random()), which is less predictable and fair.

Performance with large arrays

Time complexity of the Fisher-Yates algorithm is linear O(n). Its clever mechanism of reverse iteration and smart swaps make it ideal for large array randomization.

Modern practices and functional style

ES6's array destructuring is employed for swaps, enhancing our function's readability and maintainability. Also, let is used for our loop variable, aligning with modern JavaScript practices for dependable variable scoping.

Non-mutating shuffling

To keep your original array intact, a copy can be generated using .slice(0) before shuffling:

const originalArray = [1, 2, 3, 4, 5];
const shuffledArray = shuffle(originalArray.slice(0));

Pitfalls and alternative methods

Sorting with random is a not a good idea: Though popular, the .sort(() => 0.5 - Math.random()) technique can result in a biased outcome.
External Libraries: If complexity isn't your cup of tea, consider using _.shuffle() from Lodash or Underscore libraries to simplify the shuffling process.

Extra tidbits and testing info

Shuffling for secure applications

Applications that require high security or fairness can use a cryptographically secure random number generator instead of Math.random().

Testing the randomness

Check the shuffling uniformity of your algorithm using statistical tests. The uniform distribution assures that every possible permutation of the array has an equal likelihood.

Visual orienteers

Devising visual aids or simulations can help present that the distribution of outcomes is even. This could elucidate the concept teaching, learning, or even for debugging needs.

Try to maintain clean code: Avoid unneeded complexity.
Important: Smart commenting: Only add comments where it can meaningfully explain the logic.
Track element positions during the shuffle using Lodash/Underscore's _.indexOf(arr, value).