How to reverse an array in JavaScript preserving the original order of the input array

Something theoretically so simple can become a problem if you are new to JavaScript and didn't know the default behavior of the inherited reverse method of an array. In JavaScript is pretty easy to reverse the current order of the items of an array in JavaScript using the mentioned method:

let myArray = [1, 2, 3, 4, 5];

// Outputs: [5, 4, 3, 2, 1]
console.log(myArray.reverse());

The problem with this approach is that the original content of myArray will be reversed as well, as the reverse method works in place instead of returning a new array with the new order of the elements:

let myArray = [1, 2, 3, 4, 5];

let myCopy = myArray.reverse();

// Outputs: [5, 4, 3, 2, 1]
console.log(myArray);

// Outputs: [5, 4, 3, 2, 1]
console.log(myCopy);

Because as mentioned, the reverse method mutates the original array and returns a reference to the array.

Solution

If you need to reverse the content of an array without modifying the current order of the current elements, there are a lot of ways to do it and we'll list all of them from fastest to the least optimal implementation:

Slice and reverse

The reverse method isn't slow as it's a native method of JavaScript. So it's by default the best solution, so the problem in our logic is that we are working with the original element that contains multiple elements, instead of working with a copy. The best way to make a copy and working with it is using the slice method of JavaScript that returns a shallow copy of the selected portion of an array. If we call the method without arguments, a copy of the array will be returned and we can work on it as we would expect:

let myArray = [1, 2, 3, 4, 5];

let myReversedCopy = myArray.slice().reverse();

// Outputs: [1, 2, 3, 4, 5]
console.log(myArray);

// Outputs: [5, 4, 3, 2, 1]
console.log(myReversedCopy);

Sweet, functional, and fast!

Spread operator and reverse array

Just like in the first approach, we could create a copy of the array using the spread operator to copy its content into a new empty array and then reverse that one:

let myArray = [1, 2, 3, 4, 5];

let myReversedCopy = [...myArray].reverse();

// Outputs: [1, 2, 3, 4, 5]
console.log(myArray);

// Outputs: [5, 4, 3, 2, 1]
console.log(myReversedCopy);

Using reduce

Another option is to use the reduce method of JavaScript. This weird-looking approach works like this, we are going to declare a variable that will store the result of the reduce method that will basically iterate over the array and will append every item at the beginning of the accumulator that in this case will be an empty array:

let myArray = [1, 2, 3, 4, 5];
let reversed = myArray.reduce((accumulator, value) => {
    return [value, ...accumulator];
}, []);

// Outputs: [1, 2, 3, 4, 5]
console.log(myArray);

// Outputs: [5, 4, 3, 2, 1]
console.log(reversed);

Iterate backward over an array

Another possible but not so optimal solution, besides of long, is to iterate backward over the original array, storing every element in a new array:

let myArray = [1, 2, 3, 4, 5];
let reversed = [];

for(let i = myArray.length - 1;i >= 0;i--)
{
    reversed.push(myArray[i]);
}

// Outputs: [1, 2, 3, 4, 5]
console.log(myArray);

// Outputs: [5, 4, 3, 2, 1]
console.log(reversed);

Iterate over an array and append every element at the beginning of an empty array

You can as well iterate progressively over the array and append every element at the beginning of a new array, so the order will be inversed as expected:

let myArray = [1, 2, 3, 4, 5];
let reversed = [];

for(let i = 0;i < myArray.length;i++)
{
    reversed.unshift(myArray[i]);
}

// Outputs: [1, 2, 3, 4, 5]
console.log(myArray);

// Outputs: [5, 4, 3, 2, 1]
console.log(reversed);

Happy coding ❤️!