How do you reverse an array without modifying original array?

The reverse() method reverses the order of the elements in an array but it mutates the original array. Let's take a simple example to demonistrate this case,

javascript

1const originalArray = [1, 2, 3, 4, 5];
2
3const newArray = originalArray.reverse();
4
5console.log(newArray); // [ 5, 4, 3, 2, 1]
6
7console.log(originalArray); // [ 5, 4, 3, 2, 1]

There are few solutions that won't mutate the original array. Let's take a look.

1. Using slice and reverse methods:

In this case, just invoke the slice() method on the array to create a shallow copy followed by reverse() method call on the copy.

javascript

1const originalArray = [1, 2, 3, 4, 5];
2  const newArray = originalArray.slice().reverse(); //Slice an array gives a new copy
3
4  console.log(originalArray); // [1, 2, 3, 4, 5]
5  console.log(newArray); // [ 5, 4, 3, 2, 1]

2. Using spread and reverse methods:

In this case, let's use the spread syntax (...) to create a copy of the array followed by reverse() method call on the copy.

javascript

1const originalArray = [1, 2, 3, 4, 5];
2  const newArray = [...originalArray].reverse();
3
4  console.log(originalArray); // [1, 2, 3, 4, 5]
5  console.log(newArray); // [ 5, 4, 3, 2, 1]

3. Using reduce and spread methods:

Here execute a reducer function on an array elements and append the accumulated array on right side using spread syntax

javascript

1const originalArray = [1, 2, 3, 4, 5];
2  const newArray = originalArray.reduce((accumulator, value) => {
3  return [value, ...accumulator];
4  }, []);
5
6  console.log(originalArray); // [1, 2, 3, 4, 5]
7  console.log(newArray); // [ 5, 4, 3, 2, 1]

4. Using reduceRight and spread methods:

Here execute a right reducer function(i.e. opposite direction of reduce method) on an array elements and append the accumulated array on left side using spread syntax

javascript

1const originalArray = [1, 2, 3, 4, 5];
2  const newArray = originalArray.reduceRight((accumulator, value) => {
3  return [...accumulator, value];
4  }, []);
5
6  console.log(originalArray); // [1, 2, 3, 4, 5]
7  console.log(newArray); // [ 5, 4, 3, 2, 1]

5. Using reduceRight and push methods:

Here execute a right reducer function(i.e. opposite direction of reduce method) on an array elements and push the iterated value to the accumulator

javascript

1const originalArray = [1, 2, 3, 4, 5];
2  const newArray = originalArray.reduceRight((accumulator, value) => {
3  accumulator.push(value);
4  return accumulator;
5  }, []);
6
7  console.log(originalArray); // [1, 2, 3, 4, 5]
8  console.log(newArray); // [ 5, 4, 3, 2, 1]

How do you reverse an array without modifying original array?

JavaScript Coding Exercise 4