Related Articles

# 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

 ```<``html``>` `<``head``>``    ``<``title``>Shuffle array``` `<``body``>``    `  `<``p``>Array is=[1, 2, 3, 4, 5, 6, 7]`  `    ` `    ``<``button` `onclick``=``"show()"``>``        ``click``    ````    ` `    ``<``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)``        ``}``    ````` ``

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

 ```<``html``>` `<``head``>``    ``<``title``>Shuffle array``` `<``body``>``    `  `<``p``>Array is=[1, 2, 3, 4, 5, 6, 7]` ` ` `    ` `    ``<``button` `onclick``=``"show()"``>``        ``click``    ````    ` `    ``<``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)``        ``}``    ````` ``

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