
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
How to shuffle an array in a random manner in JavaScript?
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>
- Related Articles
- How to shuffle an array in Java?
- How to randomize (shuffle) a JavaScript array?
- Shuffle an Array in Python
- JavaScript - How to pick random elements from an array?
- how to shuffle a 2D array in java correctly?
- Checking the intensity of shuffle of an array - JavaScript
- Shuffle an Array using STL in C++
- Select random values from an array in JavaScript?
- How to do Butterfly Shuffle in JavaScript?
- Substitute random items in a JavaScript array?
- Java Program to shuffle an array using list
- How to print star pattern in JavaScript in a very simple manner?
- Alternative shuffle in JavaScript
- How to randomize and shuffle array of numbers in Java?
- Golang program to shuffle the elements of an array
