How to Reverse an Array In JavaScript

JavaScript Reverse Array

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" ]

 

SHARE:
nv-author-image

Brad Morton

I'm Brad, and I'm nearing 20 years of experience with Linux. I've worked in just about every IT role there is before taking the leap into software development. Currently, I'm building desktop and web-based solutions with NodeJS and PHP hosted on Linux infrastructure. Visit my blog or find me on Twitter to see what I'm up to.

Leave a Reply

Your email address will not be published. Required fields are marked *