Array.prototype.reverse()

One of the three mutating Array methods people forget about, alongside sort and splice. It looks functional because it returns the array — but that array is the one you passed in.

Array methodES1 (1997)Live demo
Common call
items.reverse()
Returns
the same array, mutated — not a copy
Replaces
nothing; toReversed() is the non-mutating version
Watch out
chaining after slice() is the usual way to stay safe
array.reverse()
→ Array

Demo

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

The elements come back in the opposite order, which is all there is to the operation itself. What the demo cannot show is the important part: the array you called it on has ALSO been reversed, because reverse edits in place and hands back the same reference. A palindrome makes that invisible, and a single element or an empty array makes it a no-op.

Common patterns

Reverse a copy
The safe form when the array is shared.
const backwards = [...items].reverse();
Non-mutating on modern runtimes
toReversed returns a new array.
const backwards = items.toReversed();  // ES2023
Sort descending
Usually better expressed as a comparator.
items.sort((a, b) => b - a);  // not sort().reverse()

Examples

1. Reversed
[1, 2, 3].reverse()
Returns
[3, 2, 1]
2. It mutates
const a = [1, 2, 3]; a.reverse(); a
Returns
[3, 2, 1]
3. Same reference
const a = [1, 2]; a.reverse() === a
Returns
true
4. Copy first
const a = [1, 2, 3]; [...a].reverse(); a
Returns
[1, 2, 3]
5. Non-mutating
[1, 2, 3].toReversed()
Returns
[3, 2, 1] // ES2023
6. Empty
[].reverse()
Returns
[]

Pitfalls

1. It mutates the original
Because it returns the array, reverse looks like it produced a new one. Assigning the result gives you two names for the SAME reversed array, and the original order is gone.
Both reversed
const a = [1, 2, 3];
const b = a.reverse();
a
[3, 2, 1] // a changed too
Copy first
const b = [...a].reverse();
a keeps its order
2. Reversing a prop or shared array
The same hazard as sort. Reversing something you did not create changes it for every other holder, which in React and similar is a silent state bug.
Mutates upstream
props.items.reverse()
the parent's array is reversed
Copy or toReversed
const shown = props.items.toReversed();
the prop is untouched
3. sort().reverse() for descending order
It works, but it sorts and then walks the array again — and it mutates twice. A descending comparator does it in one pass and says what it means.
Two passes
items.sort((a, b) => a - b).reverse()
descending, via two mutations
One comparator
items.sort((a, b) => b - a)
descending directly

When to use

Use it
  • Reversing an array you own and are happy to mutate
  • In-place reversal where allocation matters
Reach for something else
  • The array is shared or a prop → toReversed, or copy first
  • You want descending order → a sort comparator
  • You only need to iterate backwards → a reverse for loop

Notes

Complexity
O(n) — swaps elements from both ends inward
Return
The same array object, reordered — not a copy
CPython impl
V8: Builtins-array-reverse.tq
Memory
In place; no allocation
Thread-safe
Single-threaded; mutating a shared array is the hazard here

FAQ

Copy first with a spread or slice, or use toReversed on ES2023 runtimes. Both give you a new array and leave the source in its original order.

const backwards = [...items].reverse();
const backwards2 = items.toReversed();

History

ES1
reverse has been present since the first standard in 1997.
ES2023
toReversed added, alongside toSorted and toSpliced, giving non-mutating counterparts.