2002

I have an array like this:

var arr1 = ["a", "b", "c", "d"];

How can I randomize / shuffle it?

11
  • 14
    Just throwing this here that you can visualize how random a shuffle function actually is with this visualizer Mike Bostock made: bost.ocks.org/mike/shuffle/compare.html
    – aug
    Dec 10, 2014 at 19:42
  • 6
    @Blazemonger jsPref is dead. Can you just post here which is the fastest?
    – eozzy
    Sep 28, 2016 at 1:06
  • 43
    How about this? arr1.sort(() => (Math.random() > .5) ? 1 : -1);
    – yuval.bl
    Sep 26, 2018 at 17:18
  • 20
    a short answer would be a.sort(() => Math.random() - 0.5)
    – SaboSuke
    Sep 3, 2021 at 18:52
  • 4
    @TheVee see few lines above, on the same spec: "The sort order is implementation-defined if ...If comparefn is not undefined and is not a consistent comparison function for the elements of items"
    – yuval.bl
    Nov 11, 2021 at 16:12

71 Answers 71

2417

The de-facto unbiased shuffle algorithm is the Fisher-Yates (aka Knuth) Shuffle.

You can see a great visualization here (and the original post linked to this)

function shuffle(array) {
  let currentIndex = array.length,  randomIndex;

  // While there remain elements to shuffle.
  while (currentIndex > 0) {

    // Pick a remaining element.
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    // And swap it with the current element.
    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex], array[currentIndex]];
  }

  return array;
}

// Used like so
var arr = [2, 11, 37, 42];
shuffle(arr);
console.log(arr);

Some more info about the algorithm used.

9
  • 19
    The above answer skips element 0, the condition should be i-- not --i. Also, the test if (i==0)... is superfluous since if i == 0 the while loop will never be entered. The call to Math.floor can be done faster using ...| 0. Either tempi or tempj can be removed and the value be directly assigned to myArray[i] or j as appropriate.
    – RobG
    Jun 8, 2011 at 7:21
  • 65
    @RobG the implementation above is functionally correct. In the Fisher-Yates algorithm, the loop isn't meant to run for the first element in the array. Check out wikipedia where there are other implementations that also skip the first element. Also check out this article which talks about why it is important for the loop not to run for the first element.
    – theon
    Jul 20, 2012 at 12:57
  • 1
    Be sure to transpile if you're going to do destructuring assignments in a busy loop -- allocating objects is expensive.
    – ggorlen
    Jul 25, 2021 at 22:18
  • @ggorlen What do you mean by transpiling in this context? Can you give us an example or further explanation?
    – nkhil
    Oct 4, 2021 at 16:12
  • 9
    I'm a bit surprised that this is the top answer. There are actually a lot of things wrong... Improper scoping, neglecting to simply use a for loop, incorrectly using != with !==, the infinite loop if passed an empty array, and the modification and return of a parameter.
    – Sam
    Mar 14, 2022 at 3:18
1166

Here's a JavaScript implementation of the Durstenfeld shuffle, an optimized version of Fisher-Yates:

/* Randomize array in-place using Durstenfeld shuffle algorithm */
function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
}

It picks a random element for each original array element, and excludes it from the next draw, like picking randomly from a deck of cards.

This clever exclusion swaps the picked element with the current one, then picks the next random element from the remainder, looping backwards for optimal efficiency, ensuring the random pick is simplified (it can always start at 0), and thereby skipping the final element.

Algorithm runtime is O(n). Note that the shuffle is done in-place so if you don't want to modify the original array, first make a copy of it with .slice(0).


EDIT: Updating to ES6 / ECMAScript 2015

The new ES6 allows us to assign two variables at once. This is especially handy when we want to swap the values of two variables, as we can do it in one line of code. Here is a shorter form of the same function, using this feature.

function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
}
13
435

You can do it easily with map and sort:

let unshuffled = ['hello', 'a', 't', 'q', 1, 2, 3, {cats: true}]

let shuffled = unshuffled
    .map(value => ({ value, sort: Math.random() }))
    .sort((a, b) => a.sort - b.sort)
    .map(({ value }) => value)
   
console.log(shuffled)

  1. We put each element in the array in an object, and give it a random sort key
  2. We sort using the random key
  3. We unmap to get the original objects

You can shuffle polymorphic arrays, and the sort is as random as Math.random, which is good enough for most purposes.

Since the elements are sorted against consistent keys that are not regenerated each iteration, and each comparison pulls from the same distribution, any non-randomness in the distribution of Math.random is canceled out.

Speed

Time complexity is O(N log N), same as quick sort. Space complexity is O(N). This is not as efficient as a Fischer Yates shuffle but, in my opinion, the code is significantly shorter and more functional. If you have a large array you should certainly use Fischer Yates. If you have a small array with a few hundred items, you might do this.

19
  • 24
    Very nice. This is the Schwartzian transform in js. Jun 29, 2018 at 10:43
  • 18
    This is the best answer here (for short arrays) for a number of reasons. to me, it's really useful because I'm using react in 2021 which works best with a functional approach like this. Sep 1, 2021 at 13:43
  • 1
    Think about the compexity again if you have to map 2 times it goes over the elements N two times already and that is not considering the quick sort complexity of JS's .sort algorithm
    – Ilja KO
    Mar 23, 2022 at 9:51
  • 1
    @IljaKO 2N is still O(N), which is less than the time complexity of O(N log N) Apr 24, 2022 at 1:40
  • 9
    @IljaKO - O(2N + 2(N log N)) simplifies to O(N log N), so this is truly O(N log N). Big O notation is all about the largest scaling factor. We remove constants because they don't scale with input size, and simplify to the largest single scaling factor. Big O notation is deliberately NOT all about the details. Jun 10, 2022 at 11:51
229

Warning!
The use of this algorithm is not recommended, because it is inefficient and strongly biased; see comments. It is being left here for future reference, because the idea is not that rare.

[1,2,3,4,5,6].sort( () => .5 - Math.random() );

This https://javascript.info/array-methods#shuffle-an-array tutorial explains the differences straightforwardly.

7
  • 208
    Downvoting as this isn't really that random. I don't know why it has so many upvotes. Do not use this method. It looks pretty, but isn't completely correct. Here are results after 10,000 iterations on how many times each number in your array hits index [0] (I can give the other results too): 1 = 29.19%, 2 = 29.53%, 3 = 20.06%, 4 = 11.91%, 5 = 5.99%, 6 = 3.32%
    – radtad
    Nov 13, 2013 at 18:35
  • 30
    It's fine if you need to randomize relatively small array and not dealing with cryptographic things. I totally agree that if you need more randomness you need to use more complex solution.
    – deadrunk
    Nov 21, 2013 at 0:37
  • 25
    It's also the least efficient of all the methods available. Dec 17, 2013 at 14:21
  • 15
    The problem is that it's not deterministic, which will give wrong results (if 1 > 2 and 2 > 3, it should be given that 1 > 3, but this will not guarantee that. This will confuse the sort, and give the result commented by @radtad).
    – MatsLindh
    Sep 10, 2014 at 14:07
  • 5
    Essential reading: Is it correct to use JavaScript Array.sort() method for shuffling?
    – Bergi
    Apr 3, 2015 at 20:48
76

Use the underscore.js library. The method _.shuffle() is nice for this case. Here is an example with the method:

var _ = require("underscore");

var arr = [1,2,3,4,5,6];
// Testing _.shuffle
var testShuffle = function () {
  var indexOne = 0;
    var stObj = {
      '0': 0,
      '1': 1,
      '2': 2,
      '3': 3,
      '4': 4,
      '5': 5
    };
    for (var i = 0; i < 1000; i++) {
      arr = _.shuffle(arr);
      indexOne = _.indexOf(arr, 1);
      stObj[indexOne] ++;
    }
    console.log(stObj);
};
testShuffle();
0
74

One could (but should NOT) use it as a protoype from Array:

From ChristopheD:

Array.prototype.shuffle = function() {
  var i = this.length, j, temp;
  if ( i == 0 ) return this;
  while ( --i ) {
     j = Math.floor( Math.random() * ( i + 1 ) );
     temp = this[i];
     this[i] = this[j];
     this[j] = temp;
  }
  return this;
}
2
  • Don't touch prototype unless you actually need to shuffle ALL or most of your arrays throughout the program and you are writing this program under the rock where no one will find it. I see this answer is decade old, maybe happen before all the movement of "people, stop extending prototype, it's bad". stackoverflow.com/questions/14034180/… Mar 15, 2022 at 10:09
  • in the while loop when you get to i being 0 it turns false, therefore ignoring the first element in the list while only shuffling the rest ... so the first element never gets shuffled ... +1 on extending prototype, Makes code more readable in my case. May 15, 2022 at 20:59
67

NEW!

Shorter & probably *faster Fisher-Yates shuffle algorithm

  1. it uses while---
  2. bitwise to floor (numbers up to 10 decimal digits (32bit))
  3. removed unecessary closures & other stuff

function fy(a,b,c,d){//array,placeholder,placeholder,placeholder
 c=a.length;while(c)b=Math.random()*(--c+1)|0,d=a[c],a[c]=a[b],a[b]=d
}

script size (with fy as function name): 90bytes

DEMO http://jsfiddle.net/vvpoma8w/

*faster probably on all browsers except chrome.

If you have any questions just ask.

EDIT

yes it is faster

PERFORMANCE: http://jsperf.com/fyshuffle

using the top voted functions.

EDIT There was a calculation in excess (don't need --c+1) and noone noticed

shorter(4bytes)&faster(test it!).

function fy(a,b,c,d){//array,placeholder,placeholder,placeholder
 c=a.length;while(c)b=Math.random()*c--|0,d=a[c],a[c]=a[b],a[b]=d
}

Caching somewhere else var rnd=Math.random and then use rnd() would also increase slightly the performance on big arrays.

http://jsfiddle.net/vvpoma8w/2/

Readable version (use the original version. this is slower, vars are useless, like the closures & ";", the code itself is also shorter ... maybe read this How to 'minify' Javascript code , btw you are not able to compress the following code in a javascript minifiers like the above one.)

function fisherYates( array ){
 var count = array.length,
     randomnumber,
     temp;
 while( count ){
  randomnumber = Math.random() * count-- | 0;
  temp = array[count];
  array[count] = array[randomnumber];
  array[randomnumber] = temp
 }
}
17
  • 7
    check out the performance ... 2x faster on most browsers... but needs more jsperf testers...
    – cocco
    Sep 23, 2014 at 11:20
  • 11
    js is a language that accepts many shortcuts and different ways to write it.. while there are many slow readable functions in here i just like to show how it could be done in a more performant way, also saving some bytes... bitwise and shorthand is really underestimated here and the web is full of buggy and slow code.
    – cocco
    Sep 23, 2014 at 11:29
  • Not a slam dunk perf increase. Swapping the fy and shuffle prototype, I get fy consistently at the bottom in Chrome 37 on OS X 10.9.5 (81% slower ~20k ops compared to ~100k) and Safari 7.1 it's up to ~8% slower. YMMV, but it's not always faster. jsperf.com/fyshuffle/3
    – Spig
    Oct 9, 2014 at 18:49
  • 1
    This is mental and amazing in equal measure. I've been writing JS for 20 years, and I learned some new tricks reading this just now. I'm not sure whether I've been enlightened or ruined forever. Sep 23, 2021 at 19:48
  • 1
    If your software does something useful besides shuffling arrays, micro-optimizations doesn't matter. If your software just shuffles arrays without any other effects, it's a waste of human time 🤷‍♂️
    – meandre
    Nov 26, 2021 at 14:58
66

Shuffle Array In place

function shuffleArr (array){
    for (var i = array.length - 1; i > 0; i--) {
        var rand = Math.floor(Math.random() * (i + 1));
        [array[i], array[rand]] = [array[rand], array[i]]
    }
}

ES6 Pure, Iterative

const getShuffledArr = arr => {
    const newArr = arr.slice()
    for (let i = newArr.length - 1; i > 0; i--) {
        const rand = Math.floor(Math.random() * (i + 1));
        [newArr[i], newArr[rand]] = [newArr[rand], newArr[i]];
    }
    return newArr
};

Reliability and Performance Test

Some solutions on this page aren't reliable (they only partially randomise the array). Other solutions are significantly less efficient. With testShuffleArrayFun (see below) we can test array shuffling functions for reliability and performance.

function testShuffleArrayFun(getShuffledArrayFun){
    const arr = [0,1,2,3,4,5,6,7,8,9]

    var countArr = arr.map(el=>{
        return arr.map(
            el=> 0
        )
    }) //   For each possible position in the shuffledArr and for 
       //   each possible value, we'll create a counter. 
    const t0 = performance.now()
    const n = 1000000
    for (var i=0 ; i<n ; i++){
        //   We'll call getShuffledArrayFun n times. 
        //   And for each iteration, we'll increment the counter. 
        var shuffledArr = getShuffledArrayFun(arr)
        shuffledArr.forEach(
            (value,key)=>{countArr[key][value]++}
        )
    }
    const t1 = performance.now()
    console.log(`Count Values in position`)
    console.table(countArr)

    const frequencyArr = countArr.map( positionArr => (
        positionArr.map(  
            count => count/n
        )
    )) 

    console.log("Frequency of value in position")
    console.table(frequencyArr)
    console.log(`total time: ${t1-t0}`)
}

Other Solutions

Other solutions just for fun.

ES6 Pure, Recursive

const getShuffledArr = arr => {
    if (arr.length === 1) {return arr};
    const rand = Math.floor(Math.random() * arr.length);
    return [arr[rand], ...getShuffledArr(arr.filter((_, i) => i != rand))];
};

ES6 Pure using array.map

function getShuffledArr (arr){
    return [...arr].map( (_, i, arrCopy) => {
        var rand = i + ( Math.floor( Math.random() * (arrCopy.length - i) ) );
        [arrCopy[rand], arrCopy[i]] = [arrCopy[i], arrCopy[rand]]
        return arrCopy[i]
    })
}

ES6 Pure using array.reduce

function getShuffledArr (arr){
    return arr.reduce( 
        (newArr, _, i) => {
            var rand = i + ( Math.floor( Math.random() * (newArr.length - i) ) );
            [newArr[rand], newArr[i]] = [newArr[i], newArr[rand]]
            return newArr
        }, [...arr]
    )
}
3
  • So, where is the ES6(ES2015) ? [array[i], array[rand]]=[array[rand], array[i]] ? Maybe you can outline how that works. Why do you choose to iterate downwards? Sep 11, 2017 at 19:00
  • @sheriffderek Yes, the ES6 feature I'm using is the assignment of two vars at once, which allows us to swap two vars in one line of code.
    – Ben Carp
    Sep 12, 2017 at 2:47
  • Credit to @sheriffderek who suggested the ascending Algorithm. The ascending algorithm could be proved in induction.
    – Ben Carp
    Sep 15, 2017 at 1:00
43

Edit: This answer is incorrect

See comments and https://stackoverflow.com/a/18650169/28234. It is being left here for reference because the idea isn't rare.


A very simple way for small arrays is simply this:

const someArray = [1, 2, 3, 4, 5];

someArray.sort(() => Math.random() - 0.5);

It's probably not very efficient, but for small arrays this works just fine. Here's an example so you can see how random (or not) it is, and whether it fits your usecase or not.

const resultsEl = document.querySelector('#results');
const buttonEl = document.querySelector('#trigger');

const generateArrayAndRandomize = () => {
  const someArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  someArray.sort(() => Math.random() - 0.5);
  return someArray;
};

const renderResultsToDom = (results, el) => {
  el.innerHTML = results.join(' ');
};

buttonEl.addEventListener('click', () => renderResultsToDom(generateArrayAndRandomize(), resultsEl));
<h1>Randomize!</h1>
<button id="trigger">Generate</button>
<p id="results">0 1 2 3 4 5 6 7 8 9</p>

7
  • Nice one, but does generate a complete random elements every time? Apr 10, 2017 at 20:00
  • Not quite sure if I understood you correctly. This approach will indeed shuffle the array in a random way (albeit pseudo-random) every time you call the sort array - it's not a stable sort, for obvious reasons. Apr 11, 2017 at 11:00
  • 6
    For the same reasons as explained at stackoverflow.com/a/18650169/28234 . This is much more likely to leave early elements near the start of the array.
    – AlexC
    Jun 23, 2017 at 10:41
  • 7
    This is a great, easy one-liner for when you need to scramble an array, but don't care too much about having the results be academically provably random. Sometimes, that last few inches to perfection take more time than it's worth. Nov 3, 2017 at 18:48
  • 1
    It would be lovely if this worked, but it doesn't. Because of the way quick-search works, an inconsistent comparator will be likely to leave array elements close to their original position. Your array will not be scrambled. Mar 14, 2018 at 14:34
26

Adding to @Laurens Holsts answer. This is 50% compressed.

function shuffleArray(d) {
  for (var c = d.length - 1; c > 0; c--) {
    var b = Math.floor(Math.random() * (c + 1));
    var a = d[c];
    d[c] = d[b];
    d[b] = a;
  }
  return d
};
6
  • 8
    We should be encouraging people to use _.shuffle rather than pasting code from stack overflow; and, we should be discouraging people from compressing their stack overflow answers. That's what jsmin is for. Apr 5, 2013 at 8:28
  • 60
    @DavidJones: Why would I include an entire 4kb library just to shuffle an array?
    – Blender
    May 4, 2013 at 19:23
  • 2
    is it efficient to do var b = in a loop instead of declaring b outside loop and assigning it with b = in a loop?
    – Alex K
    Oct 28, 2013 at 9:51
  • 1
    @Alex: Javascript doesn't actually support block-scope variables (see Why does JavaScript not have block scope?). So, declaring b outside the loop probably won't make a difference.
    – Brian
    Jul 12, 2014 at 4:17
  • 2
    @Brian Won't make a difference; the hoisting happens when the source code is parsed. No probably involved. Sep 15, 2014 at 4:18
25

Warning!
Using this answer for randomizing large arrays, cryptography, or any other application requiring true randomness is not recommended, due to its bias and inefficiency. Elements position is only semi-randomized, and they will tend to stay closer to their original position. See https://stackoverflow.com/a/18650169/28234.


You can arbitrarily decide whether to return 1 : -1 by using Math.random:

[1, 2, 3, 4].sort(() => (Math.random() > 0.5) ? 1 : -1)

Try running the following example:

const array =  [1, 2, 3, 4];

// Based on the value returned by Math.Random,
// the decision is arbitrarily made whether to return 1 : -1

const shuffeled = array.sort(() => {
  const randomTrueOrFalse = Math.random() > 0.5;
  return randomTrueOrFalse ? 1 : -1
});

console.log(shuffeled);

7
  • Is this unbiased?
    – Juzer Ali
    Jun 21, 2019 at 6:23
  • what? this is so pointless. it has almost 0 chance of leaving the element intact (random generating exactly 0.5)
    – user151496
    Nov 2, 2019 at 2:04
  • I suggest removing this answer. Answer isn't correct and isn't new. The other wrong answer is left for future reference so I think this one can be removed :-)
    – Ben Carp
    Oct 10, 2022 at 11:14
  • @BenCarp First of all, your comment and suggestion are greatly appreciated! They will be reviewed and considered (as for your assertion that my answer isn't new, I believe it differs from the one you referred to)
    – Rafi Henig
    Oct 10, 2022 at 20:25
  • @RafiHenig The difference from the other answer is very very minor. Given that both are incorrect, nothing less, I don't see the point of it.
    – Ben Carp
    Oct 11, 2022 at 13:45
24

I found this variant hanging out in the "deleted by author" answers on a duplicate of this question. Unlike some of the other answers that have many upvotes already, this is:

  1. Actually random
  2. Not in-place (hence the shuffled name rather than shuffle)
  3. Not already present here with multiple variants

Here's a jsfiddle showing it in use.

Array.prototype.shuffled = function() {
  return this.map(function(n){ return [Math.random(), n] })
             .sort().map(function(n){ return n[1] });
}
7
  • (I suspect it was deleted as it is a very inefficient way to randomize the array, especially for larger arrays... whereas the accepted answer, and a number of other clones of that answer randomize in-place). Jul 14, 2015 at 12:17
  • 1
    Yeah, but given that the well-known wrong answer is still up with a bunch of votes, an inefficient but correct solution should at least be mentioned. Jul 14, 2015 at 18:54
  • [1,2,3,4,5,6].sort(function() { return .5 - Math.random(); }); - it doesn't give a random sort, and if you use it you can end up embarrassed: robweir.com/blog/2010/02/microsoft-random-browser-ballot.html Jul 14, 2015 at 22:58
  • 3
    You need to use .sort(function(a,b){ return a[0] - b[0]; }) if you want the sort to compare values numerically. The default .sort() comparator is lexicographic, meaning it will consider 10 to be less than 2 since 1 is less than 2.
    – 4castle
    Nov 10, 2017 at 14:39
  • 1
    @4castle Okay, I updated the code, but am going to revert it: the distinction between lexicographic order and numerical order doesn't matter for numbers in the range that Math.random() produces. (that is, lexicographic order is the same as numeric order when dealing with numbers from 0 (inclusive) to 1 (exclusive)) Nov 10, 2017 at 14:56
23

With ES2015 you can use this one:

Array.prototype.shuffle = function() {
  let m = this.length, i;
  while (m) {
    i = (Math.random() * m--) >>> 0;
    [this[m], this[i]] = [this[i], this[m]]
  }
  return this;
}

Usage:

[1, 2, 3, 4, 5, 6, 7].shuffle();
2
  • 5
    To truncate, you should use n >>> 0 instead of ~~n. Array indices can be higher than 2³¹-1.
    – Oriol
    Jul 24, 2016 at 3:46
  • 1
    Destructuring like this makes for such a clean implementation +1 May 11, 2017 at 12:28
23

benchmarks

Let's first see the results then we'll look at each implementation of shuffle below -

  • splice

  • pop

  • inplace


splice is slow

Any solution using splice or shift in a loop is going to be very slow. Which is especially noticeable when we increase the size of the array. In a naive algorithm we -

  1. get a rand position, i, in the input array, t
  2. add t[i] to the output
  3. splice position i from array t

To exaggerate the slow effect, we'll demonstrate this on an array of one million elements. The following script almost 30 seconds -

const shuffle = t =>
  Array.from(sample(t, t.length))

function* sample(t, n)
{ let r = Array.from(t)
  while (n > 0 && r.length)
  { const i = rand(r.length) // 1
    yield r[i]               // 2
    r.splice(i, 1)           // 3
    n = n - 1
  }
}

const rand = n =>
  0 | Math.random() * n

function swap (t, i, j)
{ let q = t[i]
  t[i] = t[j]
  t[j] = q
  return t
}

const size = 1e6
const bigarray = Array.from(Array(size), (_,i) => i)
console.time("shuffle via splice")
const result = shuffle(bigarray)
console.timeEnd("shuffle via splice")
document.body.textContent = JSON.stringify(result, null, 2)
body::before {
  content: "1 million elements via splice";
  font-weight: bold;
  display: block;
}


pop is fast

The trick is not to splice and instead use the super efficient pop. To do this, in place of the typical splice call, you -

  1. select the position to splice, i
  2. swap t[i] with the last element, t[t.length - 1]
  3. add t.pop() to the result

Now we can shuffle one million elements in less than 100 milliseconds -

const shuffle = t =>
  Array.from(sample(t, t.length))

function* sample(t, n)
{ let r = Array.from(t)
  while (n > 0 && r.length)
  { const i = rand(r.length) // 1
    swap(r, i, r.length - 1) // 2
    yield r.pop()            // 3
    n = n - 1
  }
}

const rand = n =>
  0 | Math.random() * n

function swap (t, i, j)
{ let q = t[i]
  t[i] = t[j]
  t[j] = q
  return t
}

const size = 1e6
const bigarray = Array.from(Array(size), (_,i) => i)
console.time("shuffle via pop")
const result = shuffle(bigarray)
console.timeEnd("shuffle via pop")
document.body.textContent = JSON.stringify(result, null, 2)
body::before {
  content: "1 million elements via pop";
  font-weight: bold;
  display: block;
}


even faster

The two implementations of shuffle above produce a new output array. The input array is not modified. This is my preferred way of working however you can increase the speed even more by shuffling in place.

Below shuffle one million elements in less than 10 milliseconds -

function shuffle (t)
{ let last = t.length
  let n
  while (last > 0)
  { n = rand(last)
    swap(t, n, --last)
  }
}

const rand = n =>
  0 | Math.random() * n

function swap (t, i, j)
{ let q = t[i]
  t[i] = t[j]
  t[j] = q
  return t
}

const size = 1e6
const bigarray = Array.from(Array(size), (_,i) => i)
console.time("shuffle in place")
shuffle(bigarray)
console.timeEnd("shuffle in place")
document.body.textContent = JSON.stringify(bigarray, null, 2)
body::before {
  content: "1 million elements in place";
  font-weight: bold;
  display: block;
}

20
//one line solution
shuffle = (array) => array.sort(() => Math.random() - 0.5);


//Demo
let arr = [1, 2, 3];
shuffle(arr);
alert(arr);

https://javascript.info/task/shuffle

Math.random() - 0.5 is a random number that may be positive or negative, so the sorting function reorders elements randomly.

2
17
var shuffle = function(array) {
   temp = [];
   originalLength = array.length;
   for (var i = 0; i < originalLength; i++) {
     temp.push(array.splice(Math.floor(Math.random()*array.length),1));
   }
   return temp;
};
3
  • This is obviously not as optimal as the Fisher-Yates algorithm, but would it work for technical interviews? May 19, 2016 at 22:17
  • @Andrea The code was broken due to the fact that array length is changed inside the for loop. With the last edit this is corrected. Mar 20, 2019 at 16:41
  • You didn't declare your variables, which makes them globals - and this function seems to randomly remove elements from the input array. Apr 6, 2021 at 15:08
12

A recursive solution:

function shuffle(a,b){
    return a.length==0?b:function(c){
        return shuffle(a,(b||[]).concat(c));
    }(a.splice(Math.floor(Math.random()*a.length),1));
};
11

Modern short inline solution using ES6 features:

['a','b','c','d'].map(x => [Math.random(), x]).sort(([a], [b]) => a - b).map(([_, x]) => x);

(for educational purposes)

2
  • what's the distribution of this one?
    – chovy
    Nov 27, 2021 at 6:44
  • 1
    @chovy To explain what is happening, we generate random number for each item in the array and then sort the items by that number. So as long as you are getting "real random" numbers from the Math.random() function, you will get an uniform distribution (each item has the same chance to be at any position).
    – icl7126
    Nov 27, 2021 at 8:04
10

Fisher-Yates shuffle in javascript. I'm posting this here because the use of two utility functions (swap and randInt) clarifies the algorithm compared to the other answers here.

function swap(arr, i, j) { 
  // swaps two elements of an array in place
  var temp = arr[i];
  arr[i] = arr[j];
  arr[j] = temp;
}
function randInt(max) { 
  // returns random integer between 0 and max-1 inclusive.
  return Math.floor(Math.random()*max);
}
function shuffle(arr) {
  // For each slot in the array (starting at the end), 
  // pick an element randomly from the unplaced elements and
  // place it in the slot, exchanging places with the 
  // element in the slot. 
  for(var slot = arr.length - 1; slot > 0; slot--){
    var element = randInt(slot+1);
    swap(arr, element, slot);
  }
}
10

Using Fisher-Yates shuffle algorithm and ES6:

// Original array
let array = ['a', 'b', 'c', 'd'];

// Create a copy of the original array to be randomized
let shuffle = [...array];

// Defining function returning random value from i to N
const getRandomValue = (i, N) => Math.floor(Math.random() * (N - i) + i);

// Shuffle a pair of two elements at random position j
shuffle.forEach( (elem, i, arr, j = getRandomValue(i, arr.length)) => [arr[i], arr[j]] = [arr[j], arr[i]] );

console.log(shuffle);
// ['d', 'a', 'b', 'c']
1
  • Great and easy to understand. Jan 8, 2021 at 20:17
8

First of all, have a look here for a great visual comparison of different sorting methods in javascript.

Secondly, if you have a quick look at the link above you'll find that the random order sort seems to perform relatively well compared to the other methods, while being extremely easy and fast to implement as shown below:

function shuffle(array) {
  var random = array.map(Math.random);
  array.sort(function(a, b) {
    return random[array.indexOf(a)] - random[array.indexOf(b)];
  });
}

Edit: as pointed out by @gregers, the compare function is called with values rather than indices, which is why you need to use indexOf. Note that this change makes the code less suitable for larger arrays as indexOf runs in O(n) time.

3
  • Array.prototype.sort passes in two values as a and b, not the index. So this code doesn't work.
    – gregers
    Mar 29, 2016 at 13:34
  • @gregers you're right, I've edited the answer. Thanks. May 15, 2016 at 15:00
  • 1
    This is not very random. Depending on the implementation of sort, an element at the lowest array index might require more comparisons in order to get to the highest index than the element next to the highest index. This means that it is less likely for the element at the lowest index to get to the highest index.
    – 1' OR 1 --
    Jul 19, 2016 at 0:16
8

All the other answers are based on Math.random() which is fast but not suitable for cryptgraphic level randomization.

The below code is using the well known Fisher-Yates algorithm while utilizing Web Cryptography API for cryptographic level of randomization.

var d = [1,2,3,4,5,6,7,8,9,10];

function shuffle(a) {
	var x, t, r = new Uint32Array(1);
	for (var i = 0, c = a.length - 1, m = a.length; i < c; i++, m--) {
		crypto.getRandomValues(r);
		x = Math.floor(r / 65536 / 65536 * m) + i;
		t = a [i], a [i] = a [x], a [x] = t;
	}

	return a;
}

console.log(shuffle(d));

8

a shuffle function that doesn't change the source array

Disclaimer

Please note that this solution is not suitable for large arrays! If you are shuffling large datasets, you should use the Durstenfeld algorithm suggested above.

Solution

function shuffle(array) {
  const result = [], itemsLeft = array.concat([]);

  while (itemsLeft.length) {
    const randomIndex = Math.floor(Math.random() * itemsLeft.length);
    const [randomItem] = itemsLeft.splice(randomIndex, 1); // take out a random item from itemsLeft
    result.push(randomItem); // ...and add it to the result
  }

  return result;
}

How it works

  1. copies the initial array into itemsLeft

  2. picks up a random index from itemsLeft, adds the corresponding element to the result array and deletes it from the itemsLeft array

  3. repeats step (2) until itemsLeft array gets empty

  4. returns result

5
  • This is essentially the original Fisher-Yates algorithm, with your splice being a horribly inefficient way to do what they called "striking out". If you don't want to mutate the original array, then just copy it, and then shuffle that copy in place using the much more efficient Durstenfeld variant.
    – user9315861
    Jul 9, 2018 at 4:49
  • @torazaburo, thank you for your feedback. I've updated my answer, to make it clear that I'm rather offering a nice-looking solution, than a super-scaling one Jul 20, 2018 at 11:10
  • We could also use the splice method to create a copy like so: source = array.slice();.
    – tg_so
    Apr 21, 2019 at 12:14
  • what is the difference between array.concat([]) and [...array]
    – Flo rian
    Apr 16 at 7:49
  • Hi Flo rian, perhaps you can find a decent answer in this thread: stackoverflow.com/questions/48865710/… Apr 20 at 5:51
7

For those of us who are not very gifted but have access to the wonders of lodash, there is such a thing as lodash.shuffle.

7

Here is the EASIEST one,

function shuffle(array) {
  return array.sort(() => Math.random() - 0.5);
}

for further example, you can check it here

3
  • 2
    Looks a lot like this older answer... Sep 23, 2020 at 20:40
  • 4
    Not to mention this answer. No need to repeat... Moreover this method does not provide a homogeneous probability distribution.
    – trincot
    Sep 29, 2020 at 8:49
  • From the link you added yourself: "But because the sorting function is not meant to be used this way, not all permutations have the same probability." Aug 16, 2022 at 8:05
7

We're still shuffling arrays in 2019, so here goes my approach, which seems to be neat and fast to me:

const src = [...'abcdefg'];

const shuffle = arr => 
  [...arr].reduceRight((res,_,__,s) => 
    (res.push(s.splice(0|Math.random()*s.length,1)[0]), res),[]);

console.log(shuffle(src));
.as-console-wrapper {min-height: 100%}

6

You can do it easily with:

// array
var fruits = ["Banana", "Orange", "Apple", "Mango"];
// random
fruits.sort(function(a, b){return 0.5 - Math.random()});
// out
console.log(fruits);

Please reference at JavaScript Sorting Arrays

4
6

A simple modification of CoolAJ86's answer that does not modify the original array:

 /**
 * Returns a new array whose contents are a shuffled copy of the original array.
 * @param {Array} The items to shuffle.
 * https://stackoverflow.com/a/2450976/1673761
 * https://stackoverflow.com/a/44071316/1673761
 */
const shuffle = (array) => {
  let currentIndex = array.length;
  let temporaryValue;
  let randomIndex;
  const newArray = array.slice();
  // While there remains elements to shuffle...
  while (currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    // Swap it with the current element.
    temporaryValue = newArray[currentIndex];
    newArray[currentIndex] = newArray[randomIndex];
    newArray[randomIndex] = temporaryValue;
  }
  return newArray;
};
6

I found this useful:

const shuffle = (array: any[]) => {
    return array.slice().sort(() => Math.random() - 0.5);
  }
        
console.log(shuffle([1,2,3,4,5,6,7,8,9,10]));
// Output: [4, 3, 8, 10, 1, 7, 9, 2, 6, 5]
2
5

yet another implementation of Fisher-Yates, using strict mode:

function shuffleArray(a) {
    "use strict";
    var i, t, j;
    for (i = a.length - 1; i > 0; i -= 1) {
        t = a[i];
        j = Math.floor(Math.random() * (i + 1));
        a[i] = a[j];
        a[j] = t;
    }
    return a;
}
5
  • What value does the addition of use strict provide over the accepted answer? Sep 17, 2017 at 15:21
  • To learn more about strict mode and how it influences performance you can read about it here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
    – Raphael C
    Sep 18, 2017 at 17:55
  • Hmm, could you point to something specific from the referenced document? Nothing in there seems to reference "improving performance," aside from a vague comment at the top about potentially making it difficult for the js engine to optimize. In this case, it's unclear to me what use strict would improve. Sep 19, 2017 at 15:04
  • Strict mode has been around for quite some time, and there are sufficient reads out there for anyone to make their own opinion if they should always use it or not and why. Jslint for instance makes it clear enough that you should always use strict mode. Douglas Crockford has written quite an amount of articles and some great videos on why it is important to always use strict mode not only as a good practice but also how it is interpreted differently by browser js engines such as V8. I strongly advise you to Google it and make your own opinion about it.
    – Raphael C
    Sep 20, 2017 at 15:53
  • Here is an old thread about perfs in strict mode, a bit old but still relevant: stackoverflow.com/questions/3145966/…
    – Raphael C
    Sep 20, 2017 at 16:06

Not the answer you're looking for? Browse other questions tagged or ask your own question.