Array.prototype.toReversed()
Returns a new array with the elements in reverse order, leaving the original untouched.
toReversed()- Added in JavaScript ECMAScript 2023
Return value
ArrayA new array containing the elements of the original in reverse order.
Errors
Throws a TypeError only if called on null or undefined.
toReversed() is the copying counterpart of reverse(). It reads the array from the last index to the first and returns the result as a new array. Nothing about the receiver changes, which is what makes it safe on shared or frozen data.
When to reach for it
Display order is the usual case: showing newest-first without disturbing the chronological array everyone else reads from, or walking a breadcrumb trail backwards. It is also the right tool inside render functions and reducers, where reverse() would quietly rewrite state.
What trips people up
reverse()looks harmless and is not.const shown = items.reverse()reversesitemstoo, because it returns the same array it just reordered. This is one of the most common accidental-mutation bugs in JavaScript.- The copy is shallow — the elements are the same references in the opposite order.
- Sparse arrays become dense:
[1, , 3].toReversed()is[3, undefined, 1], with a realundefinedwhere the hole was. - If you only need to iterate backwards, a counting
forloop orat()avoids allocating a whole array.
For a reversed and reordered view, chain it: rows.toSorted(cmp).toReversed() descends without inverting your comparator.
Example
When to use it
- Render a chat or log newest-first while the stored array stays oldest-first.
- Descend a sorted list by chaining toSorted(cmp).toReversed() instead of flipping the comparator.
- Reverse a frozen or shared constant array without cloning it first.
- Build a reversed lookup order for a fallback chain of config sources.
Frequently asked questions
How do I reverse an array without mutating it?
Call arr.toReversed(), which returns a new array in reverse order and leaves the original alone. It replaces the older [...arr].reverse() idiom and also works on frozen arrays.
What is the difference between reverse() and toReversed()?
reverse() reorders the array in place and returns that same array, while toReversed() returns a new array and changes nothing. Assigning the result of reverse() to a new variable does not protect the original.
Does toReversed() copy the objects inside the array?
No, it is a shallow copy: the new array holds the same object references in the opposite order. Mutating one of those objects is still visible through the original array.
More examples
The reverse() mutation bug
reverse() returns the very array it reordered, so bad and state are the same object and the source is destroyed. toReversed() returns a distinct array and leaves fresh in its original order.
const state = [1, 2, 3];
const bad = state.reverse();
console.log(bad === state, state);
const fresh = [1, 2, 3];
const good = fresh.toReversed();
console.log(good === fresh, fresh, good);Descending sort by chaining
Both lines print the same descending array; chaining toReversed() keeps a single ascending comparator you can reuse. The source is untouched by either route.
const scores = [5, 1, 9, 3];
console.log(scores.toSorted((a, b) => a - b).toReversed());
console.log(scores.toSorted((a, b) => b - a));
console.log(scores);Works on frozen arrays
toReversed() never writes to the receiver, so a frozen array is fine. reverse() attempts an in-place write and throws a TypeError on a frozen array in strict and sloppy mode alike, because the method itself always uses the throwing form of assignment rather than deferring to the caller's strictness.
const frozen = Object.freeze(["a", "b", "c"]);
console.log(frozen.toReversed());
try {
frozen.reverse();
} catch (err) {
console.log(err.constructor.name);
}
Discussion