Using map() in Reverse Order in JavaScript and React.js

# Table of Contents

1. Use map() on an Array in Reverse Order in JavaScript
2. Reverse an Array and use map() in reverse order in React

If you need to use map() on an array in reverse order in React.js, click on the second subheading.

# Use map() on an Array in Reverse Order in JavaScript

To use the map() method on an array in reverse order:

1. Use the slice() method to get a copy of the array.
2. Use the reverse() method to reverse the copied array.
3. Call the map() method on the reversed array.

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

const mapReverse1 = arr
  .slice(0)
  .reverse()
  .map(element => {
    return element;
  });

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

The first step is to use the Array.slice() method to create a shallow copy of the array.

We do this because the Array.reverse() method changes the contents of the original array in place.

The only argument we passed to the Array.slice() method is the start index - the index of the first element to be included in the new array.

By specifying a start index of 0 and no end index, we create a shallow copy of the original array, which we can reverse.

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

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

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

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

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

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

This is the reason we created a shallow copy in advance - to avoid changing the original array.

The last step is to use the Array.map() method on the reversed array.

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

const mapReverse1 = arr
  .slice(0)
  .reverse()
  .map(element => {
    return element;
  });

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

The function we passed to the Array.map() method gets called with each element in the array.

The map() method returns a new array containing the values returned from the callback function.

An alternative approach is to use the spread syntax (...) to create a shallow copy of the array.

# Use map() on an Array in Reverse Order using spread syntax (...)

This is a three-step process:

1. Use the spread syntax (...) to get a copy of the array.
2. Use the reverse() method to reverse the copied array.
3. Call the map() method on the reversed array.

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

const mapReverse2 = [...arr].reverse().map(element => {
  return element;
});

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

The spread syntax (...) unpacks the values of the original array into a new array, creating a shallow copy.

We then reverse the copy to avoid mutating the original array and call the map() method on the reversed array.

This approach is a bit more concise than using the slice() method.

# Use map() on an Array in Reverse Order using the current index

You can also use map() on an array in reverse order by using the current index.

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

const mapReverse = arr.map((_element, index) => {
  return arr[arr.length - 1 - index];
});

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

The second argument the callback function gets called with is the index of the current iteration.

For example, on the first iteration, we get an index of arr.length - 1 - 0.

For an array that has 3, elements this evaluates to 2, which is the last index in the array.

JavaScript indexes are zero-based, so the first element in an array has an index of 0 and the last element has an index of array.length - 1.

On each iteration, we subtract 1 and the current index from the array's length to map over the array in reverse order.

# Use map() on an Array in Reverse Order by reversing after

An alternative approach is to use Array.map() to iterate over the array from index 0 onwards and then reverse the new array.

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

const mapReverse = arr
  .map(element => {
    return element;
  })
  .reverse();

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

The code sample calls the Array.map() method on the array directly.

The map() method returns a new array, so we can safely call the reverse() method on the array without mutating the original.

# Use map() on an Array in Reverse Order by using reduceRight

You can also use the Array.reduceRight() method to iterate over an array in reverse order.

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

const result = arr.reduceRight((accumulator, last) => {
  return accumulator.concat(last);
}, []);

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

The reduceRight() method applies the provided function against an accumulator and each value of the array from right to left, reducing the array to a single value.

The accumulator variable is initialized to an empty array because that's what we passed as the second argument to the Array.reduceRight() method.

# Reverse an Array and use map() in reverse order in React

To reverse an array in React:

1. Use the spread syntax (...) to create a shallow copy of the array.
2. Call the reverse() method on the copy.
3. Store the result in a variable.

Copied!
export default function App() {
  const people = [
    {name: 'Alice', country: 'Austria'},
    {name: 'Bob', country: 'Belgium'},
    {name: 'Carl', country: 'Canada'},
  ];

  // 👇️ create copy and reverse
  const reversed = [...people].reverse();

  return (
    <div>
      {reversed.map((person, index) => {
        return (
          <div key={index}>
            <h2>Name: {person.name}</h2>
            <h2>Country: {person.country}</h2>

            <hr />
          </div>
        );
      })}
    </div>
  );
}

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

The Array.reverse() method changes the contents of the original array in place.

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

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

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

The reverse() method reverses an array in place and returns the result. This might not be the behavior you're looking for.

This is the reason we created a shallow copy in advance - to avoid changing the original array.

Alternatively, you can use the Array.slice() method.

# Use map() on an Array in Reverse Order using slice()

This is a three-step process:

1. Call the slice() method on the array to create a shallow copy.
2. Call the reverse() method on the copy.
3. Store the result in a variable.

Copied!
export default function App() {
  const people = [
    {name: 'Alice', country: 'Austria'},
    {name: 'Bob', country: 'Belgium'},
    {name: 'Carl', country: 'Canada'},
  ];

  // 👇️ create copy and reverse
  const reversed = people.slice().reverse();

  return (
    <div>
      {reversed.map((person, index) => {
        return (
          <div key={index}>
            <h2>Name: {person.name}</h2>
            <h2>Country: {person.country}</h2>

            <hr />
          </div>
        );
      })}
    </div>
  );
}

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']

When the slice method is called without supplying any parameters, it returns a shallow copy of the original array.

Then we can call the reverse() method on the copy to avoid mutating the original array.

Which approach you pick is a matter of personal preference. I'd go with the spread syntax (...) because it's more readable and intuitive, especially if the reader of your code is not familiar with the parameters the slice() method takes.