DEV Community

Vanilla JavaScript Shuffle Array

Chris Bongers on June 21, 2020

Now and then, you need randomly to shuffle an array in JavaScript. There is a super-easy way of doing so. We can use the sort() method and pass a r...

Read full post

SavagePixie • Jun 21 '20

It's worth noting that this won't work well for big arrays or if you need a thorough shuffle, as it isn't very likely that element are moved more than a couple positions.

Chris Bongers • Jun 22 '20

You are absolutely right! Good mention indeed. Might have to update this

Serhii Pimenov • Jun 22 '20

In Metro 4, I use this method

Array.prototype.shuffle = function () {
    var currentIndex = this.length, temporaryValue, randomIndex;

    while (0 !== currentIndex) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
        temporaryValue = this[currentIndex];
        this[currentIndex] = this[randomIndex];
        this[randomIndex] = temporaryValue;
    }
    return this;
};

Chris Bongers • Jun 22 '20

Very nice that would be your normalized javascript solution as well.
Btw hadn't heard of Metro, but looks very cool

SavagePixie • Jun 23 '20

The video may be old, but its main points are still valid:

Code in benchmarking is rarely written like code in a real application
Runtimes have all sorts of optimisations that aren't always easy to understand or bypass
Best practice is to just write code that makes sense and profile your app if you run into performance issues

If you find that misleading, ¯_(ツ)_/¯

Chris Bongers • Jun 23 '20

Hey there,

Thank you for the really extended answer.
I still find it weird you see everyone promoting the new functions like sort and map over basic loops because it reads easier or whatever the hip answer is here.

How do you feel about these very hyped functions?

I mean i love the simplicity of them, but performance-wise it may not always be the right solution.

As to your answer regarding the benchmarking, it is very specific. I love doing console.time logs but even they vary every run, like a lot. Of course the bigger the test, the better you see the actual result.

Chris Bongers • Jun 23 '20

Hey,

wow nice results! so it's just Math.random in sort?
Any idea too why that is?

SavagePixie • Jun 23 '20 • Edited

My guess would be that it's because, while in the other examples you're running the operation once per item in the array, with sort you're potentially running the operation several times per item, which increases the computation time.

That being said, you generally shouldn't trust benchmarking on jsperf

Chris Bongers • Jun 23 '20

Very interesting though, would you mind if i do some testing of my own and maybe do another blog on the sort with bigger arrays and include some of your findings?

SavagePixie • Jun 23 '20

Go ahead!^^

Chris Bongers • Jun 22 '20

Oeh nice one! still will work slightly better on bigger arrays it seems.