Skip to content
Related Articles

Related Articles

How to shuffle an array using JavaScript ?
  • Difficulty Level : Medium
  • Last Updated : 17 Feb, 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

filter_none

edit
close

play_arrow

link
brightness_4
code

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;
}

chevron_right


Example: 

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
  
        // Fucntion 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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Example: 

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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
  
        // Fucntion 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

chevron_right


 Output:  

  • Before Clicking the Button:
     

  • After Clicking the button:
     

 

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :