JavaScript Array reverse() Method

What You’ll Learn

The reverse() method flips an array in place so the first element becomes last and vice versa. This tutorial covers syntax, five examples, copying before reverse, string reversal, palindrome checks, and comparison with toReversed().

Introduction

Need to walk a list backward, undo a stack visually, or reverse characters in a word? reverse() swaps element positions so index 0 and index length - 1 trade places, then the next pair inward, until the whole array is flipped.

Because it mutates the original array, be careful when other variables reference the same array—they will see the reversed order too.

Understanding the reverse() Method

array.reverse() rearranges elements within the existing array object. No new array is allocated. The method returns a reference to that same array (now reversed), which enables chaining like arr.reverse().join("-").

To keep the original order, copy first: [...arr].reverse() or arr.slice().reverse(). Modern JavaScript also offers non-mutating arr.toReversed() (ES2023).

📝 Syntax

General form of Array.prototype.reverse:

array.reverse()

Parameters

• None.

Return value

• The same array reference, with elements reversed.

Side effects

• Mutates element order in the array.

Common patterns

• arr.reverse() — flip in place.
• [...arr].reverse() — reversed copy, original safe.
• str.split("").reverse().join("") — reverse ASCII string.
• arr.toReversed() — non-mutating (ES2023).

Examples Gallery

Open DevTools Console (F12) or use Try-it labs. Example N maps to ?tryit=N.

const numbers = [1, 2, 3, 4, 5];

numbers.reverse();

console.log(numbers);
// [5, 4, 3, 2, 1]

[5, 4, 3, 2, 1]

const colors = ["red", "green", "blue"];

const result = colors.reverse();

console.log(result === colors);
// true

console.log(result);
// ["blue", "green", "red"]

true
["blue", "green", "red"]

const original = [1, 2, 3, 4, 5];

const reversed = [...original].reverse();

console.log("original:", original);
// [1, 2, 3, 4, 5]

console.log("reversed:", reversed);
// [5, 4, 3, 2, 1]

original: [1, 2, 3, 4, 5]
reversed: [5, 4, 3, 2, 1]

const greeting = "Hello";

const reversed = greeting.split("").reverse().join("");

console.log(reversed);
// "olleH"

olleH

function isPalindrome(word) {
  const normalized = word.toLowerCase();
  const reversed = normalized.split("").reverse().join("");
  return normalized === reversed;
}

console.log(isPalindrome("level"));
// true

console.log(isPalindrome("hello"));
// false

true
false

🚀 Common Use Cases

• Display newest first — reverse a fetched list for UI.
• Undo stack inspection — walk items backward.
• String tricks — char reverse and palindrome tests.
• Algorithm practice — two-pointer problems on reversed copies.
• Sort companion — flip ascending to descending (prefer sort comparator when possible).
• Immutable UI state — use copy or toReversed().

📝 Notes

• Mutates element order in the array.
• Returns the same array reference.
• Copy with spread/slice when the original order must stay.
• toReversed() (ES2023) is the non-mutating alternative.
• String reverse via split/reverse/join is for simple text.
• Shared references all see the reversal after mutation.
• ES3—supported everywhere JavaScript runs.

💡 Best Practices