Reverse an Array without Modifying the Original in JS

Reverse an Array without Modifying the Original #

To reverse an array without modifying the original, call the slice() method on the array to create a shallow copy and call the reverse() method on the copy, e.g. arr.slice().reverse(). The reverse method will not modify the original array when used on the copy.

Copied!
const arr = ['a', 'b', 'c'];

const reversed1 = arr.slice().reverse();
console.log(reversed1); // 👉️ ['c', 'b', 'a']

console.log(arr); // 👉 ️['a', 'b', 'c']

The first step is to create a shallow copy of the array by using the Array.slice method.

Copied!
const arr = ['a', 'b', 'c'];

const copy = arr.slice();
console.log(copy); // 👉️ ['a', 'b', 'c']

The last step is to use the Array.reverse method on the copied array.

The reverse() method reverses the array in place and returns the result.

An alternative approach is to use the spread syntax (...).

To reverse an array without modifying the original:

1. Use the spread syntax (...) to create a copy of the array.
2. Call the reverse() method on the copy.
3. The final array will contain the elements in reversed order.

Copied!
const arr = ['a', 'b', 'c'];

const reversed2 = [...arr].reverse();
console.log(reversed2); // 👉️ ['c', 'b', 'a']

console.log(arr); // 👉 ️['a', 'b', 'c']

We used the spread syntax (...) to unpack the values of the array into a new array, creating a shallow copy.

This enables us to use the reverse() method without modifying the original array.

Further Reading #

• Find the First Array Element matching a Condition in JS
• Iterate over a Map in Reverse Order in JavaScript