• Friday , 23 August 2019

## Fisher-Yates Shuffle Modern Algorithm JavaScript Programming Tutorial

Lesson Code: http://www.developphp.com/video/JavaScript/Fisher-Yates-Shuffle-Modern-Algorithm-Array-Programming-Tutorial
In this programming exercise we will demonstrate the concepts behind the Fisher-Yates Modern Shuffle algorithm because we are going to use its logic to program a shuffle method into JavaScript. Using a physical example on the table we will convey the logic behind the algorithm and discuss the concept, then we will write the logic in JavaScript programming to add an array shuffle method to JavaScript’s array object.

Original source

## Related Posts

1. ##### Preeti Nair
February 12, 2019 at 02:46

Thanks for this video. Can we use this method for shuffling a dataset?

2. ##### Paul-Sebastian Manole
February 12, 2019 at 02:46

Dis array is everywhere!

February 12, 2019 at 02:46

Thank you so so much! Finally I understand what is going on there!

4. ##### Natalie Ding
February 12, 2019 at 02:46

why do we need swap process？

5. ##### Preeti Nair
February 12, 2019 at 02:46

Hi thanks for this beautifully explained video. Can we use this algorithm for shuffling data sets for data analysis?

6. ##### TraceguyRune
February 12, 2019 at 02:46

The paper visualization was awesome. I was reading a documentation on this and was confused.

7. ##### David James
February 12, 2019 at 02:46

It took 2 guys to come up with this simple algorithm? Was it too much work for just 1 person?

8. ##### David James
February 12, 2019 at 02:46

Each time it will be different? Wrong for the 3rd time. It is possible the same random numbers will be generated. That is strike 3!

9. ##### David James
February 12, 2019 at 02:46

If the random number is a 2 or a 1, we go to index position 1? I dont think so!

10. ##### David James
February 12, 2019 at 02:46

Not all arrays start at index 0. Downvoted for inaccuracy.

11. ##### TkJarok
February 12, 2019 at 02:46

Excelente! perfecto para aplicarlo en mi tarea de Polibios!

12. ##### Crystal Nieves
February 12, 2019 at 02:46

OMG thank you for this video.

13. ##### Christopher Vistal
February 12, 2019 at 02:46

Thank you for this wonderful explanation 😀

14. ##### Doug Reiserrelief
February 12, 2019 at 02:46

Thank you for the code and good examples and an explanation that I understood.

15. ##### Samson Wanjihia
February 12, 2019 at 02:46

Awesome. Thank you.

16. ##### Richard Ramos
February 12, 2019 at 02:46

Thank you very much, the first time I've watch this I only watch the visual representation, and then I program it my own, I made it by looping the array from the end to 1, then inside that I made another loop, so it is nested loop, every time I loop it the end array will be replace inside the nested array with the random place of the array… But this method is more efficient and less code, It is really hard for me to understand, It takes me almost 2 days, dreaming about this problem, T_T but now I get it..

17. ##### iLLest Tv
February 12, 2019 at 02:46

Help my black ass out alot. Needed this code for a game Im programming my g.

18. ##### jakub klos
February 12, 2019 at 02:46

Hi guys!!! Could anyone please explane me the last line of the code arr[i] = temp; 🙁

19. ##### Aziz épiméthée
February 12, 2019 at 02:46

Thanks a lot; very clear

20. ##### Kutaki
February 12, 2019 at 02:46

Thank you I understand all ^^ Thanks a lot really 😀

21. ##### George Harrison
February 12, 2019 at 02:46

Thank you for this! By far one of the best explanations. Excellent !

February 12, 2019 at 02:46

This is great thanks

23. ##### deodatus fink
February 12, 2019 at 02:46

Thanks, mate. Nice piece of code.

24. ##### Joel Sukumar
February 12, 2019 at 02:46

in the j variable , why write (i+1) ?

25. ##### Stacy Jean-Philippe
February 12, 2019 at 02:46

Thank you so much for explaining this so well! I've been trying to wrap my head around this for the longest time.

26. ##### J M
February 12, 2019 at 02:46

Good clear explanation, thank you.

27. ##### Antonio Cárdenas Fuentes
February 12, 2019 at 02:46

Thank you so much! Great explanation.

28. ##### Ma Chan
February 12, 2019 at 02:46

I wonder why A and G were swapped for the 3rd random number 5. Index position should be moved to E without moving G. That is, the last 3 alphabets of shuffled array are GBD.

February 12, 2019 at 02:46

Thanks for sharing your knowledge very clear explanation !

30. ##### Diana Sebö
February 12, 2019 at 02:46

Great explanation. Thank you so much, sir! 🙂

February 12, 2019 at 02:46

Excellent!

32. ##### Alex
February 12, 2019 at 02:46

Very instructive video I didn't understand the wikipedia page but now I do

33. ##### Mark Giblin
February 12, 2019 at 02:46

The prototype method is a good idea but for some people, they may get confused by it as I know from experience of tying to demonstrate to people in a web developer forum I frequent.

I have used a different method of shuffling and one that uses a random number that is 0 to 'nth' where the random selects the array element, in my routine I remove the element and put it in to a results array, the routine runs for as many elements in the array, the result is very compact code and like most forums, people go on about performance, which would have been relevant 20 years ago but pose no issues with todays computers.

—————————————————————————-
Array.prototype.shuffle = function(){
var s = [];
while( this.length ) s.push( this.splice( -(~~(Math.random()*this.length)|0),1) );
return s;
}
testarray = ["some","data","is","here","so","we","can","shuffle","items","randomly"].shuffle();
—————————————————————————-

IMHO it is much faster to pull a set of elements out of an array by a random method than swapping, in the method I posted, your using a new array to store the results sequentially and the original array is reducing and the range of randoms gets lower as it would in the moving a pointer, the efficiency arguments and claims by some people are IMHO unfounded and when you examine the different methods, they are essentially doing the same thing. I have even weighted the random function to output a negative integer to pull from the end of the array like in the Fisher Yates demo you just gave.

The output will produce something like [randomly, items, so, shuffle, we, some, can, here, is, data] and [we, so, randomly, can, here, data, some, shuffle, is, items] as an output. If your really paranoid that the sort is not random enough, you can run the shuffle twice or more times if you like…

34. ##### Basheer Almomani
February 12, 2019 at 02:46

thank you very much in 2017

35. ##### grmmhp
February 12, 2019 at 02:46

I'm not flawless, but you know, I got a diamond heart.

36. ##### Stefan Tataru
February 12, 2019 at 02:46

TNAKS YOUUUUUUUUUUUUUUUUU

37. ##### kierkegaardrulez
February 12, 2019 at 02:46

Woody Allen teaches computer programming.

38. ##### Kong MinJeong
February 12, 2019 at 02:46

thank you :)!!!!!

39. ##### glendon philipp baculio
February 12, 2019 at 02:46

40. ##### Kristen Kumagai
February 12, 2019 at 02:46

Really appreciate you posting this tutorial. Thank you!

41. ##### Jhoger Guerrero
February 12, 2019 at 02:46

Excellent!!!

42. ##### Kenneth F
February 12, 2019 at 02:46

This guy's a great teacher! Very useful stuff.

43. ##### RagePeanut
February 12, 2019 at 02:46

Thanks for this tutorial, been trying to do that today without any success. Thanks to you I've managed to do it, really well explained !

44. ##### not real
February 12, 2019 at 02:46

/* shuffle array */
function shuffle(a) {
var j, x, i;
for (i = a.length; i; i -= 1) {
j = Math.floor(Math.random() * i);
x = a[i – 1];
a[i – 1] = a[j];
a[j] = x;
}
}

45. ##### MedullaOblongata
February 12, 2019 at 02:46

Great explanation… tnx

46. ##### Danko Milutinovic
February 12, 2019 at 02:46

Thanks for this awesome tutorial!

47. ##### Tee Bee
February 12, 2019 at 02:46

Awesome video

48. ##### Talent Acquisition
February 12, 2019 at 02:46

How can you add breaks to the results? Or can I call the results some how and style them?

49. ##### Talent Acquisition
February 12, 2019 at 02:46

How can you add breaks to the results? Or can I call the results some how and style them?