Implement Array Shuffling in MooTools

By  on  

While shuffling the order of array elements isn't a greatly useful function, I recently found myself needing to accomplish the task. I found a great post about how to achieve this feat using jQuery. Here's how to implement array shuffling in MooTools.

The MooTools JavaScript

Array.implement({
	shuffle: function() {
		//destination array
		for(var j, x, i = this.length; i; j = parseInt(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x);
		return this;
	}
});

This likely wont be used in the core framework but does have its uses.

Recent Features

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • By
    9 More Mind-Blowing WebGL Demos

    With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities.  I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL Demos, but I want to outdo...

Incredible Demos

  • By
    Telephone Link Protocol

    We've always been able to create links with protocols other than the usual HTTP, like mailto, skype, irc ,and more;  they're an excellent convenience to visitors.  With mobile phone browsers having become infinitely more usable, we can now extend that convenience to phone numbers: The tel...

  • By
    MooTools & Printing – Creating a Links Table of Contents

    One detail we sometimes forget when considering print for websites is that the user cannot see the URLs of links when the page prints. While showing link URLs isn't always important, some websites could greatly benefit from doing so. This tutorial will show you...

Discussion

  1. Another way (more elegant in my opinion):

    Array.implement({  
        shuffle:function() {  
            this.sort(function (x,y) { return Math.floor(Math.random()*3)-1; });
            return this;
        }  
    
    
    });
    
    alert([1,2,3,4,5,6,7,8].shuffle());
    
  2. @Elad: Awesome! Nice work. Definitely more elegant.

  3. Just a note that you can do cool stuff like this with Array Shuffling. :)

  4. @Lim Chee Aun: Awesome!

  5. I’ll point out that @David’s example is guaranteed to not require any additional storage space (it shuffles in place), is unbiased toward permutations, and runs in O(n) time. @Elad’s shuffle depends on the browser’s implementation of sort(). It may require more storage space, it may be biased to certain permutations, and it will run in O(n log n) time or worse due to the nature of sorting. However, I’m guessing that anything shuffled in JS is going to be small and no one will care if it is biased as long as it “seems” random.

  6. olivier

    I’ve tested both Elad and David script on a 27 lenght array… the shuffling is far better using David’s one….
    Anyone for the best of both world : efficiency and elegance ?
    Anyway thank you so much for the tip !

  7. I’m trying to learn mootools (both in a general sense, and all over again with 1.2), and javascript OOP at the same time. How I use this to shuffle the order of some list elements on a webpage?

    And, if you don’t mind, how would I do this in 1.1 vs. 1.2?

  8. Hehe although the original idea is older than my mom (probably no one here knows the creator of this…), I would be glad if people could copy my things keeping the credits ^^

    http://jsfromhell.com/array/shuffle

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!