How can I reverse an array in JavaScript without using libraries?

Question

I am saving some data in order using arrays, and I want to add a function that the user can reverse the list. I can\'t think of any possible method, so if anybo

Answer 1

As others mentioned, you can use .reverse() on the array object.

However if you care about preserving the original object, you may use reduce instead:

const original = ['a', 'b', 'c'];
const reversed = original.reduce( (a, b) => [b].concat(a) );
//                                           ^
//                                           |
//                                           +-- prepend b to previous accumulation

// original: ['a', 'b', 'c'];
// reversed: ['c', 'b', 'a'];

Answer 2

I'm not sure what is meant by libraries, but here are the best ways I can think of:

// return a new array with .map()
function ReverseArray1(array) {
    var len = array.length - 1;

    return array.map(function () {
        return array[len--]; 
    });
}

console.log(ReverseArray1([1,2,3,4,5])) //[5,4,3,2,1]

// initialize and return a new array
function ReverseArray2(array) {
    var len = array.length;
    var newArray = [];

    while (len--) {
        newArray.push(array[len]);
    }

    return newArray;
}

console.log(ReverseArray2([1,2,3,4,5]))//[5,4,3,2,1]

// use swapping and return original array
function ReverseArray3(array) {
    let i = 0, j = array.length - 1;

    while (i < j) {
        let swap = array[i];
        array[i++] = array[j];
        array[j--] = swap;
    }

    return array;
}
console.log(ReverseArray3([1,2,3,4,5]))//[5,4,3,2,1]

// use .pop() and .length
function ReverseArray4(array) {
    let newArray = [];

    while (array.length) {
        newArray.push(array.pop());
    }

    return newArray;
}
console.log(ReverseArray4([1,2,3,4,5]))//[5,4,3,2,1]

Answer 3

I've made some test of solutions that not only reverse array but also makes its copy. Here is test code. The reverse2 method is the fastest one in Chrome but in Firefox the reverse method is the fastest.

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

var reverse1 = function() {
  var reversed = array.slice().reverse();
};

var reverse2 = function() {
  var reversed = [];
  for (var i = array.length - 1; i >= 0; i--) {
    reversed.push(array[i]);
  }
};

var reverse3 = function() {
  var reversed = [];
  array.forEach(function(v) {
    reversed.unshift(v);
  });
};

console.time('reverse1');
for (var x = 0; x < 1000000; x++) {
  reverse1();
}
console.timeEnd('reverse1'); // Around 184ms on my computer in Chrome

console.time('reverse2');
for (var x = 0; x < 1000000; x++) {
  reverse2();
}
console.timeEnd('reverse2'); // Around 78ms on my computer in Chrome

console.time('reverse3');
for (var x = 0; x < 1000000; x++) {
  reverse3();
}
console.timeEnd('reverse3'); // Around 1114ms on my computer in Chrome

Answer 4

Reverse by using the sort method

• This is a much more succinct method.

const resultN = document.querySelector('.resultN');
const resultL = document.querySelector('.resultL');

const dataNum = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const dataLetters = ['a', 'b', 'c', 'd', 'e'];

const revBySort = (array) => array.sort((a, b) => a < b);

resultN.innerHTML = revBySort(dataNum);
resultL.innerHTML = revBySort(dataLetters);

<div class="resultN"></div>
<div class="resultL"></div>

Answer 5

JavaScript already has reverse() method on Array, so you don't need to do that much!

Imagine you have the array below:

var arr = [1, 2, 3, 4, 5];

Now simply just do this:

arr.reverse();

and you get this as the result:

[5, 4, 3, 2, 1];

But this basically change the original array, you can write a function and use it to return a new array instead, something like this:

function reverse(arr) {
  var i = arr.length, reversed = [];
  while(i) {
    i--;
    reversed.push(arr[i]);
  }
  return reversed;
}

Or simply chaning JavaScript built-in methods for Array like this:

function reverse(arr) {
  return arr.slice().reverse();
}

and you can call it like this:

reverse(arr); //return [5, 4, 3, 2, 1];

Just as mentioned, the main difference is in the second way, you don't touch the original array...

Answer 6

Array.prototype.reverse() is all you need to do this work. See compatibility table.

var myArray = [20, 40, 80, 100];
var revMyArr = [].concat(myArray).reverse();
console.log(revMyArr);
// [100, 80, 40, 20]