Skip to main content

How to Use map() Over an Array in Reverse Order in JavaScript

A common requirement in UI development is to display a list of items in reverse chronological order (newest first). While Array.prototype.map() iterates from beginning to end, you can easily process an array in reverse order by first reversing the array and then calling map().

This guide will teach you the modern, immutable toReversed() method, which is the new best practice. We will also cover the classic "copy-then-reverse" pattern for older environments and the less common but clever index-based mapping approach.

The Core Problem: Immutability is Key​

A critical characteristic of the Array.prototype.reverse() method is that it is mutating—it reverses the elements of an array in place, directly changing the original array. This can lead to unexpected bugs, especially in frameworks like React where immutable data is the standard.

Therefore, the first step in any robust solution is to create a copy of the array before reversing it.

Modern JavaScript (ES2023) introduced the Array.prototype.toReversed() method, which is the direct, immutable equivalent of reverse(). It returns a new, reversed array and leaves the original array completely untouched.

Problem: you have an array of comments and want to display them from newest to oldest.

// Problem: How to map over this array in reverse?
let comments = ['First comment', 'Second comment', 'Third comment'];

Solution: this is the recommended best practice in modern environments.

let comments = ['First comment', 'Second comment', 'Third comment'];

// 1. toReversed() creates a new, reversed array.
// 2. map() then iterates over that new array.
let reversedComments = comments.toReversed().map(comment => {
  return `<p>${comment}</p>`;
});

console.log(reversedComments);
// # Output: [ '<p>Third comment</p>', '<p>Second comment</p>', '<p>First comment</p>' ]

console.log(comments);
// # Output: ['First comment', 'Second comment', 'Third comment'] (Unchanged!)

Output:

['<p>Third comment</p>', '<p>Second comment</p>', '<p>First comment</p>']
['First comment', 'Second comment', 'Third comment']
note

This method is clean, explicit, and aligns with modern functional programming principles.

The Classic Solution: The "Copy-then-Reverse" Pattern​

If you need to support older browsers or JavaScript runtimes that do not have toReversed(), the standard practice is to manually create a copy of the array before you reverse it. The modern spread syntax (...) is the most common and readable way to create this shallow copy.

let comments = ['First comment', 'Second comment', 'Third comment'];

let reversedComments = [...comments].reverse().map(comment => {
  return `<p>${comment}</p>`;
});

console.log(reversedComments);
// # Output: [ '<p>Third comment</p>', '<p>Second comment</p>', '<p>First comment</p>' ]

console.log(comments); 
// # Output: ['First comment', 'Second comment', 'Third comment'] (Unchanged!)

Output:

['<p>Third comment</p>', '<p>Second comment</p>', '<p>First comment</p>']
['First comment', 'Second comment', 'Third comment']
note

This "copy-then-reverse" pattern is a robust and widely-used fallback.

An Alternative: Mapping with a Reversed Index​

A less common but clever approach is to use map() on the original array but calculate the "reversed" index manually inside the callback.

let comments = ['First comment', 'Second comment', 'Third comment'];

let reversedComments = comments.map((_, index) => {
  // Calculate the index from the end of the array
  let reversedIndex = comments.length - 1 - index;
  let item = comments[reversedIndex];
  
  return `<p>${item}</p>`;
});

console.log(reversedComments);
// # Output: [ '<p>Third comment</p>', '<p>Second comment</p>', '<p>First comment</p>' ]

Output:

['<p>Third comment</p>', '<p>Second comment</p>', '<p>First comment</p>']
note

While this works, it is less readable and more complex than the toReversed() or "copy-then-reverse" methods, so it is generally not recommended unless you have a specific reason to avoid creating an intermediate array.

Conclusion​

Mapping over an array in reverse is a simple task if you follow the best practice of immutability.

  • The modern and recommended best practice is to use the array.toReversed().map(...) method. It is explicitly designed for immutable reversal and is the clearest expression of your intent.
  • For older environments, the standard "copy-then-reverse" pattern using the spread syntax is the best alternative: [...myArray].reverse().map(...).
  • While mapping with a reversed index is possible, it is less idiomatic and harder to read.

Table of Contents