JavaScript Array reverse()

reverse() reverses the order of elements in an array in place. The first element becomes the last, the last becomes the first, and the original array is changed.

const numbers = [1, 2, 3, 4];
numbers.reverse();
console.log(numbers); // [4, 3, 2, 1]

If you need a reversed copy without changing the source array, use toReversed() in modern JavaScript or reverse a shallow copy.

JavaScript reverse() Syntax Top ↑

array.reverse()

reverse() takes no arguments. It returns a reference to the same array after reversing its indexed elements.

Reverse an Array of Strings Top ↑

The original page demonstrated reversing programming-language names. The same example with modern array syntax is:

const scripts = ["PHP", "ASP", "JavaScript", "HTML"];
console.log(scripts.join(" , "));

scripts.reverse();
console.log(scripts.join(" , "));

PHP , ASP , JavaScript , HTML
HTML , JavaScript , ASP , PHP

This follows the same progression as the original tutorial: first create an array, then display its elements, and finally change their order. See join() when you want to convert array elements to a display string with a chosen separator.

reverse() Changes the Original Array Top ↑

const original = ["A", "B", "C"];
const reversed = original.reverse();

console.log(original); // ["C", "B", "A"]
console.log(reversed); // ["C", "B", "A"]

Reverse an Array Without Changing the Original Top ↑

Using toReversed()

const original = [1, 2, 3];
const reversed = original.toReversed();

console.log(original); // [1, 2, 3]
console.log(reversed); // [3, 2, 1]

toReversed() is the modern copying counterpart to reverse().

Using a shallow copy before reverse()

const original = [1, 2, 3];
const reversed = [...original].reverse();

console.log(original); // [1, 2, 3]
console.log(reversed); // [3, 2, 1]

This pattern is useful when supporting environments where toReversed() is not part of your compatibility target.

reverse() Returns the Same Array Reference Top ↑

const values = [1, 2, 3];
const result = values.reverse();

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

This is different from copying methods such as slice(), which return a new array.

reverse() and Sparse Arrays Top ↑

When an array contains empty slots, reverse() keeps the array sparse and moves those empty positions as it reverses the indexes.

const values = [1, , 3];
values.reverse();
console.log(values); // [3, empty, 1]

Can reverse() Reverse a String? Top ↑

Strings are immutable and do not have Array.prototype.reverse(). For simple text, convert the string to an array, reverse it, and join it again.

const text = "plus2net";
const reversed = Array.from(text).reverse().join("");
console.log(reversed); // ten2sulp

Array.from() handles Unicode code points better than split(""), although user-perceived grapheme clusters such as combined emoji can require more specialized handling.

Using reverse() with sort() Top ↑

A common pattern is sorting first and then reversing. For numeric descending order, however, a descending comparator is clearer and avoids a second mutation.

const numbers = [4, 1, 10, 3];
numbers.sort((a, b) => b - a);
console.log(numbers); // [10, 4, 3, 1]

See sorting JavaScript arrays for string, numeric, object, and non-mutating sorting.

Common reverse() Mistakes Top ↑

• Expecting reverse() to leave the source array unchanged.
• Assigning the return value and assuming it is an independent copy.
• Calling reverse() directly on a string.
• Using sort().reverse() when a comparator can directly express the intended order.
• Forgetting that a spread copy is shallow when nested objects are involved.

join() and Array Strings → ← Array Reference Display Array Elements →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: