I was asked recently what was the most efficient way to reverse an array in Javascript. At the moment, I suggested using a for loop and fiddling with the array but then realized there is a native `Array.reverse()` method.

For curiosity's sake, can anyone help me explore this by showing examples or pointing in the right direction so I can read into this? Any suggestions regarding how to measure performance would be awesome too.

Based on this setup:

``````var array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var length = array.length;
``````

`Array.reverse();` is the first or second slowest!

The benchmarks are here: http://jsperf.com/js-array-reverse-vs-while-loop/5

Across browsers, swap loops are faster. There are two common types of swap algorithms (see Wikipedia), each with two variations.

The two types of swap algorithms are temporary swap and XOR swap.

The two variations handle index calculations differently. The first variation compares the current left index and the right index and then decrements the right index of the array. The second variation compares the current left index and the length divided by half and then recalculates the right index for each iteration.

You may or may not see huge differences between the two variations. For example, in Chrome 18, the first variations of the temporary swap and XOR swap are over 60% slower than the second variations, but in Opera 12, both variations of the temporary swap and XOR swap have similar performance.

Temporary swap:

First variation:

``````function temporarySwap(array)
{
var left = null;
var right = null;
var length = array.length;
for (left = 0, right = length - 1; left < right; left += 1, right -= 1)
{
var temporary = array[left];
array[left] = array[right];
array[right] = temporary;
}
return array;
}
``````

Second variation:

``````function temporarySwapHalf(array)
{
var left = null;
var right = null;
var length = array.length;
for (left = 0; left < length / 2; left += 1)
{
right = length - 1 - left;
var temporary = array[left];
array[left] = array[right];
array[right] = temporary;
}
return array;
}
``````

XOR swap:

First variation:

``````function xorSwap(array)
{
var i = null;
var r = null;
var length = array.length;
for (i = 0, r = length - 1; i < r; i += 1, r -= 1)
{
var left = array[i];
var right = array[r];
left ^= right;
right ^= left;
left ^= right;
array[i] = left;
array[r] = right;
}
return array;
}
``````

Second variation:

``````function xorSwapHalf(array)
{
var i = null;
var r = null;
var length = array.length;
for (i = 0; i < length / 2; i += 1)
{
r = length - 1 - i;
var left = array[i];
var right = array[r];
left ^= right;
right ^= left;
left ^= right;
array[i] = left;
array[r] = right;
}
return array;
}
``````

There is another swap method called destructuring assignment: http://wiki.ecmascript.org/doku.php?id=harmony:destructuring

Destructuring assignment:

First variation:

``````function destructuringSwap(array)
{
var left = null;
var right = null;
var length = array.length;
for (left = 0, right = length - 1; left < right; left += 1, right -= 1)
{
[array[left], array[right]] = [array[right], array[left]];
}
return array;
}
``````

Second variation:

``````function destructuringSwapHalf(array)
{
var left = null;
var right = null;
var length = array.length;
for (left = 0; left < length / 2; left += 1)
{
right = length - 1 - left;
[array[left], array[right]] = [array[right], array[left]];
}
return array;
}
``````

Right now, an algorithm using destructuring assignment is the slowest of them all. It is even slower than `Array.reverse();`. However, the algorithms using destructuring assignments and `Array.reverse();` methods are the shortest examples, and they look the cleanest. I hope their performance gets better in the future.

Another mention is that modern browsers are improving their performance of array `push` and `splice` operations.

In Firefox 10, this `for` loop algorithm using array `push` and `splice` rivals the temporary swap and XOR swap loop algorithms.

``````for (length -= 2; length > -1; length -= 1)
{
array.push(array[length]);
array.splice(length, 1);
}
``````

However, you should probably stick with the swap loop algorithms until many of the other browsers match or exceed their array `push` and `splice` performance.

Native methods are always faster.

So use `Array.reverse` where possible. Otherwise an implementation that runs in `O(1)` would be best ;)

Otherwise just use something like this

``````var reverse = function(arr) {
var result = [],
ii = arr.length;
for (var i = ii - 1;i !== 0;i--) {
result.push(arr[i]);
}
return result;
}
``````

Benchmark!

Interesting the loop is faster if you use all three stages of the `for` construct instead of only one.

`for(var i = ii - 1; i !== 0;i--)` is faster then `var i = ii - 1;for(;i-- !== 0;)`

I opened a Firefox bug about slow reverse performance in Firefox. Someone from Mozilla looked at the benchmark used in the accepted post, and says that it is pretty misleading -- in their analysis the native method is better in general for reversing arrays. (As it should be!)

Here's a java example http://www.leepoint.net/notes-java/data/arrays/arrays-ex-reverse.html showing how to reverse an array. Very easy to convert to javascript.

I would suggest using something that simply captures the time before the function is called, and after the function is called. Which ever takes the least time / clock cycles will be the fastest.

Swap functions are the fastest. Here's a reverse function I wrote that is only slightly similar to the swap functions mentioned above but performs faster.

``````function reverse(array) {
var first = null;
var last = null;
var tmp = null;
var length = array.length;

for (first = 0, last = length - 1; first < length / 2; first++, last--) {
tmp = array[first];
array[first] = array[last];
array[last] = tmp;
}
}
``````

You can find the benchmarking here http://jsperf.com/js-array-reverse-vs-while-loop/19

If you want to copy a reversed version of an array and keep the original as it is:

``````a = [0,1,2,3,4,5,6,7,8,9];
b = []
for(i=0;i<a.length;i++){
b.push(a.slice(a.length-i-1,a.length-i)[0])
}
``````

Output of b:

``````[ 9, 8, 7, 6, 5, 4, 3, 2, 1, 0]
``````

Here is another example to permanently modify the array reversing it's elements:

``````var theArray = ['a', 'b', 'c', 'd', 'e', 'f'];

function reverseArrayInPlace(array) {
for (var i = array.length - 1; i >= 0; i -= 1) {
array.push(array[i]);
}
array.splice(0, array.length / 2);
return array;
};
reverseArrayInPlace(theArray);
console.log(theArray); // -> ["f", "e", "d", "c", "b", "a"]
``````

Since no one came up with it and to complete the list of ways to reverse an array...

``````array.sort(function() {
return 1;
})
``````

It's twice as fast as both while-approaches, but other than that, horribly slow.

http://jsperf.com/js-array-reverse-vs-while-loop/53

Here are a couple of tricks I found. Credit goes to Codemanx for the original solution of

``````array.sort(function() {
return 1;
})
``````

In Typescript, this can be simplified to just one line

``````array.sort(() => 1)
``````

``````var numbers = [1,4,9,13,16];

console.log(numbers.sort(() => 1));``````

In simple way you can do this using map.

``````let list = [10, 20, 30, 60, 90]
let reversedList = list.map((e, i, a)=> a[(a.length -1) -i]) // [90, 60...]
``````

Top