How to Reverse an Array in JavaScript

In this tutorial, we’ll learn how to reverse an Array in JavaScript using Array.reverse() method.

Array.reverse()

The easiest way to reverse an array is to use reverse() method.

const list = [1, 2, 3, 4, 5];
list.reverse();

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

Here is the catch, it reversed the elements of your original array. Sometime you wish not to alter the original array, and assign it to a new variable instead.

You can do in two steps:

1. First you have to make a copy of the original array
2. Reverse the copy and assign it to a new variable

In Javascript, you can do this in multiple ways in a single statement.

Spread Operator (…) and Array.reverse()

It is recommended to use spread operator ... to make a copy of an array and chain it with reverse() method. It’s short syntax is very handy.

const list = [1, 2, 3, 4, 5];
const reversedList = [...list].reverse();

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

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

We see that our original array remains the same and reversed array is assigned to a new variable.

Array.slice() and Array.reverse()

You can also chain slice() method with reverse() method to make a new copy of reversed array.

const list = [1, 2, 3, 4, 5];
const reversedList = list.slice().reverse();

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

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

Array.from() and Array.reverse()

Another way is to chain Array.from() method with reverse() method to make a new copy of reversed array.

const list = [1, 2, 3, 4, 5];
const reversedList = Array.from(list).reverse();

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

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

Reversing a String

Strings don’t have a reverse() method of their own, but since split('') turns a string into an array of characters, you can borrow Array.reverse() and join('') the result back together:

function reverseString(str) {
  return str.split('').reverse().join('');
}

reverseString("hello");       // "olleh"
reverseString("JavaScript");  // "tpircSavaJ"

This is by far the most common pattern you’ll see for this, and it works fine for plain ASCII text.

The Emoji / Unicode Caveat

split('') splits on UTF-16 code units, not visible characters. Most letters map one-to-one to a single code unit, but emoji and many other symbols outside the Basic Multilingual Plane are encoded as surrogate pairs — two code units that only make sense together. split('') doesn’t know that, so it tears the pair apart, and reversing the array scrambles the two halves independently:

function reverseString(str) {
  return str.split('').reverse().join('');
}

const withEmoji = "hello😀world";

reverseString(withEmoji);
// "dlrow\ude00\ud83dolleh" — the two surrogate halves got reversed
// independently, so the emoji renders as broken/replacement glyphs
// instead of the expected 😀

withEmoji.split('');
// ["h","e","l","l","o","\ud83d","\ude00","w","o","r","l","d"]
// the emoji has been split into two lone surrogate halves

The fix is to iterate by Unicode code point instead of by code unit. The spread operator (and for...of) does exactly that, because both use the string’s iterator, which is code-point aware:

function reverseString(str) {
  return [...str].reverse().join('');
}

reverseString("hello😀world");
// "dlrow😀olleh"  — correct

[...withEmoji];
// ["h","e","l","l","o","😀","w","o","r","l","d"]
// the emoji stays intact as one element

If you’re reversing arbitrary user-generated text — which may contain emoji, or other astral-plane characters — prefer the spread version. Note that even the spread version isn’t a complete Unicode solution: some emoji (flags, skin-tone modifiers, family emoji joined with ZWJ) are made of multiple code points that should stay grouped as one grapheme, and no built-in method splits those correctly without a full Intl.Segmenter (new Intl.Segmenter().segment(str)) pass. For everyday text and single-code-point emoji, though, the spread version is a solid, dependency-free fix.

Performance: Big-O of Array.reverse()

Array.prototype.reverse() runs in O(n) time — it walks the array once, swapping elements from the outside in until the two pointers meet in the middle — and O(1) extra space, since it reverses in place rather than allocating a new array. The copying approaches ([...list].reverse(), list.slice().reverse(), Array.from(list).reverse()) are still O(n) overall, but they do two O(n) passes instead of one: one to copy, one to reverse.

When You Don’t Actually Need to Reverse

It’s easy to reach for .reverse() as a first step and then immediately loop over the result — but if all you need is to process elements in reverse order, and you don’t need the reversed array to persist anywhere, reversing first is unnecessary extra work. A plain backward for loop gets you there in one pass, without mutating the original array or allocating a copy:

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

// Unnecessary: copy + reverse just to iterate backward
[...list].reverse().forEach(item => console.log(item));

// Simpler and cheaper: iterate backward directly
for (let i = list.length - 1; i >= 0; i--) {
  console.log(list[i]);
}

Reach for an actual reversed array when the order itself is the thing you need — returning reversed results from an API, rendering a list newest-first in the UI, or feeding the reversed sequence into something else that expects it in that order. Reach for a backward loop when reversing is just a means to “visit these in the other direction” and nothing needs to hold onto the reversed copy afterward.