How To Shuffle Array Values In JavaScript?

In JavaScript

Shuffling an array in JavaScript is a common operation that can be useful in a variety of situations. For example, you might want to shuffle the elements of an array to randomly select a subset of items, or to create a shuffled list of items for a game or quiz.


There are a few different approaches you can take to shuffle an array in JavaScript, and in this blog post, we'll go over three different techniques:


Using the Fisher-Yates shuffle algorithm: This is a classic shuffling algorithm that guarantees a random and unbiased shuffle of an array. To implement the Fisher-Yates shuffle, you'll need to loop through the array and swap each element with a randomly selected element from the rest of the array.


Using the built-in sort() function: The JavaScript sort() function can be used to shuffle an array by providing a custom comparison function that returns a random value. This method is simpler and faster than the Fisher-Yates shuffle, but it is not guaranteed to produce a truly random shuffle.


Using the shuffle() function from the Lodash library: If you're using the Lodash library in your project, you can use the shuffle() function to easily shuffle an array. This function uses the Fisher-Yates shuffle algorithm under the hood, so it guarantees a random and unbiased shuffle.


Let's take a closer look at each of these approaches and see how they work in practice.

1. Using the Fisher-Yates shuffle algorithm

The Fisher-Yates shuffle is a classic algorithm for shuffling an array that was first described by Durstenfeld in 1964 and popularized by Donald E. Knuth in "The Art of Computer Programming." The algorithm works by looping through the array and swapping each element with a randomly selected element from the rest of the array.


Here's an example of how to implement the Fisher-Yates shuffle in JavaScript:

function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    // Get a random index from 0 to i
    const j = Math.floor(Math.random() * (i + 1));
    // Swap element i with element j
    [array[i], array[j]] = [array[j], array[i]];
  }
}


To use this function, you can simply pass in the array that you want to shuffle as an argument:

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


The Fisher-Yates shuffle is a reliable and efficient way to shuffle an array, and it is often used as a reference implementation for shuffling algorithms.

2. Using the built-in sort() function

Another way to shuffle an array in JavaScript is to use the built-in sort() function, which allows you to specify a custom comparison function that returns a random value. The sort() function will then use this comparison function to sort the elements of the array in a random order.


Here's an example of how to use the sort() function to shuffle an array:

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


To use this function, you can simply pass in the array

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


The sort() function is a convenient and fast way to shuffle an array, but it is not guaranteed to produce a truly random shuffle. The comparison function used in the example above returns a random value between -0.5 and 0.5, which means that the elements of the array will be randomly sorted, but there is a small chance that the resulting shuffle will not be completely random.

3. Using the shuffle() function from the Lodash library

If you're using the Lodash library in your project, you can use the shuffle() function to easily shuffle an array. The shuffle() function uses the Fisher-Yates shuffle algorithm under the hood, so it guarantees a random and unbiased shuffle of the array.


To use the shuffle() function, you'll need to install the Lodash library and import it into your project. Then, you can use the shuffle() function like this:

import _ from 'lodash';

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


The shuffle() function returns a new shuffled array, so you'll need to assign the result to a new variable if you want to keep the shuffled version of the array.

Conclusion

In this blog post, we've covered three different approaches for shuffling an array in JavaScript: using the Fisher-Yates shuffle algorithm, using the built-in sort() function, and using the shuffle() function from the Lodash library. Each of these methods has its own strengths and weaknesses, and you can choose the one that best fits your needs and requirements.

You May Also Like