How to shuffle an array in a random manner in JavaScript?

Javascript Web Development Front End Technology

Shuffle means you are rearranging something from the elements of your array or mixing it to produce a random order.

The _.shuffle() belongs to underscore.js a JavaScript library that provides versatile functions. It is used to arrange the list of array elements in a random manner it uses Fisher-Yates shuffle Algorithm.

So every time you execute your code this will gives outputs in a different order according to the Fisher-Yates shuffle Algorithm. Following is an example of the _.shuffle() function −

_.shuffle(list)

Parameters − This function accepts the single arguments list. the argument is used to hold the list of items when we will be shuffled.

Return Value − The returned value is an all-new randomized array holding all the elements which are available in the original array as proceed to the _.shuffle() function.

Example 1: Passing a numeric array to the _.shuffle() function

The _.shuffle() function takes the list one by one from the original array. And performing the specified operation according to the Fisher−Yates shuffle Algorithm.

<!DOCTYPE html>
<html>
<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
</head>
<body>
   <script type="text/javascript">
      document.write(_.shuffle([1, 2, 3, 4, 5, 6]));
   </script>
</body>
</html>

In the above output every time, it will give different outputs according to the page reloading.The above Javascript randomly re-arranging the output after reloading the page.

Example: 2: Passing a structure to _.shuffle() function

Passing a structure to the _.shuffle() function. first, we created an array named details and passed the array into _.shuffle() function. The element of the "details" array will be shuffled.

<!DOCTYPE html>
<html>
<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
</head>
<body>
   <script type="text/javascript">
      var details = [{
            "category": "Tutorials",
            "title": "Point",
            "id": "1"
         },
         {
            "category": "easy",
            "title": "to",
            "id": "2"
         },
         {
            "category": "learn",
            "title": "here",
            "id": "3"
         },
      ];
      document.write(JSON.stringify(_.shuffle(details)));
   </script>
</body>
</html>

Example: 3 Passing an array to the _.shuffle() function

Declare an array ‘users’ with property ‘num’ and then passed it into the _.shuffle() function with arguments users, and id.

<!DOCTYPE html>
<html>
<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
</head>
<body>
   <script type="text/javascript">
      var users = [
         { "num": "1" },
         { "num": "2" },
         { "num": "3" }
      ];
      document.write(JSON.stringify(_.shuffle(users, 'id')));
   </script>
</body>
</html>

Example 4: Using sort() and Math.random()

The following example demonstrates the use of the sort() and the Math.random() method in JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Shuffle an array in a random manner</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
   <div id="shuffle"></div>
</head>
<body>
   <script>
      let arr = new Array("Alice", 40, "Edward", 39, "cullen");
      arr = arr.sort(() => Math.random() - 1 / 2);
      document.getElementById("shuffle").innerHTML = "Shuffle an array in a random manner : " + arr;
   </script>
</body>
</html>