Skip to main content

reverse() in JS – How to Reverse a JavaScript Array

Whenever you use reverse() on an array, the method does the following:

  1. It reverses the array so that its first item becomes the last and its last element becomes the first.
  2. It returns a reference to the reversed-original array.
note
  • reverse() is a destructive method that alters the original array.
  • reverse() is sometimes written as Array.prototype.reverse() because it is a method of the Array object's prototype property.

Syntax of the reverse() Method​

reverse() accepts no argument. Here is the syntax:

arrayObject.reverse();

Examples​

Below are examples of the reverse() method.

How to reverse an array of three items​

// Define an array:
const numbersArray = [1, 2, 3];

// Reverse the numbersArray:
const reversedArray = numbersArray.reverse();

// Log the reversedArray to the console:
console.log(reversedArray);

// The invocation above will return: [3, 2, 1]

Try it on StackBlitz

The snippet above used reverse() to reorder numbersArray's elements so that its first item (1) becomes the last and its last element (3) becomes the first.

Buy CSS Flexbox book

How to reverse an array of five items​

// Define an array:
const colorsArray = ["Blue", "Green", "Indigo", "Lime", "Orange"];

// Reverse the colorsArray:
const reversedArray = colorsArray.reverse();

// Log the reversedArray to the console:
console.log(reversedArray);

// The invocation above will return: ["Orange", "Lime", "Indigo", "Green", "Blue"]

Try it on StackBlitz

The snippet above used reverse() to reverse colorsArray's layout.

Important Stuff to Know about the reverse() Method​

Here are two essential facts to remember when using the reverse() method.

1. reverse() does shallow copy​

reverse() returns a shallow copy of the original array. In other words, reverse() creates a reference between the returned array and its original.

Therefore, changes to the returned array will also reflect in the original.

Here's an example:

const numbersArray = [1, 2, 3];
const reversedArray = numbersArray.reverse();

console.log(numbersArray); // [3, 2, 1]
console.log(reversedArray); // [3, 2, 1]

// Add 2500 to the end of the reversedArray:
reversedArray.push(2500);

console.log(reversedArray); // [3, 2, 1, 2500]
console.log(numbersArray); // [3, 2, 1, 2500]

Try it on StackBlitz

You can see that mutating the reversedArray also changed the original array because reverse() returned a shallow copy of numbersArray.

note

You can use the spread syntax to make reverse() do a deep copy of the original array. But beware of how spread works on objects containing non-primitives.

2. reverse() reverses empty slots​

reverse() treats empty array slots like other filled indices.

Here's an example:

const numbersArray = [1, 2, , 3];
const reversedArray = numbersArray.reverse();

console.log(reversedArray); // [3, empty, 2, 1]

Try it on StackBlitz

You can see that reverse() reversed the empty slot's position like other filled indices.

Overview​

reverse() reverses an array so that its first item becomes the last and its last element becomes the first.