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: 

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:
     

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :