Different ways to reverse an array in JavaScript

There are multiple ways to reverse an array in JavaScript. Some methods mutate the original array while some do not. We will dive deep into both the ways

Using Non built-in method

By using the for loop we can iterate over the original array and push the elements in the reversed order into a new array.

let originalArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let reversedArray = [];

for (let i = originalArray.length - 1; i >= 0; i--) {
  reversedArray.push(originalArray[i]);
}
console.log(`Using the for loop method ===> ${reversedArray}`);

// Output Using the for loop method ===> [10,9,8,7,6,5,4,3,2,1]

This method does not mutate the original array, however there are better ways to reverse an array using one-liner code

Using built-in methods

Using Array.reverse() method

The Array.prototype.reverse() is an in-built method that reverses the order of the elements of an array.

let originalArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
originalArray.reverse()
console.log(`Using the Array.reverse() method ===> ${originalArray}`);

// Output Using the Array.reverse() method ===> [10,9,8,7,6,5,4,3,2,1]

This method mutuates the original array that means it returns the reference to the same array.

The first array element now becoming the last, and the last array element becoming the first.

Now if you want to use the .reverse() method without mutating the original array, you can use it either by combining it with the .slice() method or the spread operator.

Using Array.reverse() method in combination with the Slice() method

let originalArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let reversedArray = originalArray.slice().reverse();

console.log(`Using the reverse() method with slice method===> ${reversedArray}`);
console.log(`Original Array===> ${originalArray}`);

//Output Using the reverse() method with slice method===> [10,9,8,7,6,5,4,3,2,1]
//Output Original Array===> [1,2,3,4,5,6,7,8,9,10]

The Array.slice() method used before the .reverse() method returns a shallow copy of the array into a new array.

Once the shallow copy is returned, the reverse operation is performed, Thus resulting in a new reversed array.

Using Array.reverse() method in combination with the Spread Operator

let originalArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let reversedArray = [...originalArray].reverse();

console.log(`Using the reverse() method with spread operator===>${reversedArray}`);
console.log(`Original Array===> ${originalArray}`);

//Output Using the reverse() method with spread operator===> [10,9,8,7,6,5,4,3,2,1]
//Output Original Array===> [1,2,3,4,5,6,7,8,9,10]

The spread operator is used to spread the original array values into a new array.
Once the new array is returned, the reverse operation takes place keeping the original array untouched.

Using Array.toReversed() (ES2023) method

The toReversed() method in JavaScript was introduced in ECMAScript 2023.It is a is a non-mutating array method unlike the .reverse() method.

let originalArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(`Using the toReversed() method ===> ${originalArray.toReversed()}`);
console.log(`Original Array===> ${originalArray}`);

// Output Using the toReversed() method ===> [10,9,8,7,6,5,4,3,2,1]
// Output Original Array===> [1,2,3,4,5,6,7,8,9,10]

This method returns a new array with the elements of the original array reversed, while preserving the original array unchanged.