JavaScript toReversed

reverse() has the same old problem sort() has, it flips the array you call it on instead of giving you a new one. The first time this bites you is usually when that same array is read somewhere else right after, and suddenly the order changed under you. Array.prototype.toReversed() does the same flip but returns a brand new array, leaving the original exactly as it was.

We will look at how toReversed compares to the regular reverse, and then use it to show the newest items first in a list that still needs to keep its original order somewhere else in the app.

How it Works

toReversed takes no arguments, it just walks the array from the end to the start and hands you a new array in that order.

const letters = ["a", "b", "c"]

const backwards = letters.toReversed()

console.log(backwards) // ["c", "b", "a"]
console.log(letters) // ["a", "b", "c"]

backwards comes out flipped, letters stays untouched. With the regular reverse(), letters itself would end up as ["c", "b", "a"] too, since reverse always changes the array it was called on, there is no copy involved.

Showing the Newest First

A common case for this is a list of events the backend sends oldest first, while the UI wants to show the newest one on top and something else in the app still depends on the original order.

const activity = [
  { id: 1, action: "created" },
  { id: 2, action: "updated" },
  { id: 3, action: "closed" },
]

const latestFirst = activity.toReversed()

console.log(latestFirst[0].action) // closed
console.log(activity[0].action) // created

Before toReversed we would spread the array first, [...activity].reverse(), just to avoid touching the original. Now toReversed() does that copy for us, and activity keeps its original order for whatever else in the app still reads from it, maybe a timeline component rendered right below the list.

Conclusion

toReversed will not replace reverse everywhere, when you own the array and nothing else needs the old order, mutating in place is still fine and a little faster too. But in a component that receives an array as a prop, or any array kept in shared state, not touching it saves you a bug that is annoying to track down later. Check that your target browsers and Node version cover ES2023 before relying on it in production.

Happy coding!