How to Reverse an Array In JavaScript

This short article will show you how to reverse an array in the JavaScript programming language.

What is an Array?

An array is a type of variable that holds an ordered list of values. Each value has a position in the array, called the index – and can be accessed by using that index.

As an array is ordered, the position matters. Values within arrays will be processed by loops and other data structures in order – so being able to reverse that order is beneficial.

Reversing an Array In JavaScript Using the Array.reverse() Method

Arrays in JavaScript have a built-in method (a function that can be called from the variable that affects the variable itself) conveniently called the reverse() method – which will reverse the array it is called on.

Below, an array is declared, and the reverse() method is called – reversing it. It’s then logged to the console so that the change can be viewed:

var pets = ["dog", "cat", "bird", "lizard"];
pets.reverse();
console.log(pets);

Note that this reverses the array in place – the original variable is altered, with the following result:

[ "lizard", "bird", "cat", "dog" ]

Creating a Reversed Copy

If you don’t want to modify the original array, you can create a reversed copy by duplicating the original array and calling reverse on the copy.

This can be streamlined by using the spread operator (…) – this will expand the values in a given array, allowing you to create a copy without having to declare an intermediate variable:

var pets = ["dog", "cat", "bird", "lizard"];
var reversedPets = [...pets].reverse(); // Note the use of the spread operator - this enumerates all of the values in the pets array inside a new array
console.log(pets);
console.log(reversedPets);

The above code will result in the following output:

[ "dog", "cat", "bird", "lizard" ]
[ "lizard", "bird", "cat", "dog" ]

The original array is untouched, and the copied array is reversed.

Using a Loop

If for some reason, you wish to manually reverse an array (you may have other operations you want to perform on the elements within the array), you can use a for loop:

function arrayReverse(arr) {
    var result = [];
    for(var i = arr.length-1; i >= 0; i--) {
        result.push(arr[i]);
    }
    return result;
}

var pets = [ "dog", "cat", "bird", "lizard" ]
var reversedPets = arrayReverse(pets);

console.log(pets);
console.log(reversedPets)

This method will also leave the original array untouched – the above outputs the following to the console:

[ "dog", "cat", "bird", "lizard" ]
[ "lizard", "bird", "cat", "dog" ]