Skip to content
Related Articles

Related Articles

Improve Article

How to shuffle an array using JavaScript ?

  • Difficulty Level : Medium
  • Last Updated : 16 Jul, 2021

Shuffling an array or a list means that we randomly re-arranging the content of that structure. To shuffle an array we will use the following algorithms:

Algorithm 1: 

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

javascript




function shuffleArray(array) {
   for (var i = array.length - 1; i > 0; i--) {
   
       // Generate random number
       var j = Math.floor(Math.random() * (i + 1));
                   
       var temp = array[i];
       array[i] = array[j];
       array[j] = temp;
   }
       
   return array;
}

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Shuffle array</title>
</head>
 
<body>
     
 
<p>Array is=[1, 2, 3, 4, 5, 6, 7]</p>
 
 
     
    <button onclick="show()">
        click
    </button>
     
    <script>
 
        // Function to shuffle the array content
        function shuffleArray(array) {
            for (var i = array.length - 1; i > 0; i--) {
 
                // Generate random number
                var j = Math.floor(Math.random() * (i + 1));
 
                var temp = array[i];
                array[i] = array[j];
                array[j] = temp;
            }
 
            return array;
        }
 
        // Function to show the result
        function show() {
            var arr = [1, 2, 3, 4, 5, 6, 7]
            var arr1 = shuffleArray(arr)
 
            document.write("After shuffling: ", arr1)
        }
    </script>
</body>
 
</html>

Output:  



  • Before Clicking the Button: 
     

  • After Clicking the button: 
     

Algorithm 2:

Passing a function that returns (random value – 0.5 ) as comparator to sort function, so as to sort elements on random basis. 

Javascript




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

Example: 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Shuffle array</title>
</head>
 
<body>
     
 
<p>Array is=[1, 2, 3, 4, 5, 6, 7]</p>
 
  
     
    <button onclick="show()">
        click
    </button>
     
    <script>
 
        // Function to shuffle the array content
        function shuffleArray(array) {
           return array.sort( ()=>Math.random()-0.5 );
        }
 
        // Function to show the result
        function show() {
            var arr = [1, 2, 3, 4, 5, 6, 7]
            var arr1 = shuffleArray(arr)
 
            document.write("After shuffling: ", arr1)
        }
    </script>
</body>
 
</html>

 Output:  

  • Before Clicking the Button:
     

  • After Clicking the button:
     

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :