Array.prototype.toReversed()

The simplest of the four change-by-copy methods: reverse, minus the mutation. No other behaviour differs.

Array methodES2023Live demo
Common call
items.toReversed()
Returns
a new reversed array; the original is untouched
Replaces
[...items].reverse()
Watch out
the copy is shallow — nested objects are still shared
array.toReversed()
→ Array

Demo

Live evaluation
Try:
Inputs
itemsnumber[]numbers, comma separated
Output
[1, 2, 3].toReversed()
[3, 2, 1]

The output matches what reverse would produce — the difference is entirely in what happens to the source, which the demo cannot show. reverse would have left the original array reversed too; toReversed leaves it exactly as it was. That is the whole point, and the reason it exists for React state and shared props.

Common patterns

Display in reverse without touching state
The canonical use.
const newestFirst = messages.toReversed();
Reverse a prop safely
The parent keeps its order.
const shown = props.items.toReversed();
The pre-2023 equivalent
The copy was mandatory, and easy to forget.
const backwards = [...items].reverse();

Examples

1. Reversed
[1, 2, 3].toReversed()
Returns
[3, 2, 1]
2. Original untouched
const a = [1, 2]; a.toReversed(); a
Returns
[1, 2]
3. reverse would mutate
const a = [1, 2]; a.reverse(); a
Returns
[2, 1]
4. A different array
const a = [1]; a.toReversed() === a
Returns
false
5. Palindrome
[1, 2, 1].toReversed()
Returns
[1, 2, 1]
6. Empty array
[].toReversed()
Returns
[]

Pitfalls

1. The copy is shallow
Same caveat as every copying method here. The order is new; the elements are the same objects, so mutating one through the reversed array changes it in the original.
Shared objects
const a = [{n: 1}];
const b = a.toReversed();
b[0].n = 9;
a[0].n
9
Deep copy
const b = structuredClone(a).toReversed();
independent
2. Do not reverse just to iterate backwards
Allocating a whole array to walk it in reverse is wasteful. A counting-down loop, or at() with negative indices, reads the same order with no copy at all.
Allocates a copy
for (const x of items.toReversed()) { ... }
a full array for one pass
Loop backwards
for (let i = items.length - 1; i >= 0; i--) { ... }
no allocation
3. ES2023 and newer only
Node 20+, and reasonably recent browsers. Older targets need a spread and reverse, where forgetting the spread silently mutates.
Missing method
items.toReversed()
TypeError: items.toReversed is not a function
Copy first
[...items].reverse()
same result

When to use

Use it
  • Reversing state, props or a shared array
  • Displaying newest-first without changing the stored order
  • Anywhere [...items].reverse() appears today
Reach for something else
  • You own the array and want it reversed → reverse is cheaper
  • You only want to ITERATE backwards → a counting-down loop
  • Runtimes older than ES2023 → [...items].reverse()

Notes

Complexity
O(n) — copies while reversing
Return
A new array; the original is never modified
CPython impl
V8: Builtins-array-toreversed.tq
Memory
Allocates a full copy
Thread-safe
Single-threaded; the source is only read

FAQ

Identical results. toReversed is one call instead of two operations and removes the risk of forgetting the spread — which would silently reverse the original. Use the spread form for pre-2023 runtimes.

History

ES2023
Added by the change-array-by-copy proposal, alongside toSorted, toSpliced and with.