Thursday, 8 July, 2021 UTC
Summary
In this tutorial, we'll take a look at how to reverse an array in JavaScript. There are a few ways to do this, and figuring out which one you'll want to employ typically depends on your personal preference.
We'll be reversing these two arrays:
numArr = [1, 2, 3, 4, 5]
strArr = ['Java', 'Python', 'JavaScript']
Using Array.reverse()
The easiest and simplest way to reverse an array is via the
reverse() method:numArrReversed = numArr.reverse();
strArrReversed = strArr.reverse();
console.log(numArrReversed);
console.log(strArrReversed);
We've created two new variables to point to the resulting arrays:
[ 5, 4, 3, 2, 1 ]
[ 'JavaScript', 'Python', 'Java' ]
Note: The
reverse() method reverses the array in-place. This means that the original num_array and string_array are reversed and the original sequence is lost.You don't need to create a new variable to store a pointer to these arrays in memory, since the original pointers already point to the reversed arrays:
numArr.reverse();
strArr.reverse();
console.log(numArr);
console.log(strArr);
This also results in:
[ 5, 4, 3, 2, 1 ]
[ 'JavaScript', 'Python', 'Java' ]
However, it's still common practice to "assign" the result to a new variable to indicate a changed state, or to at least assign a more indicative name to the transformed array, such as
array_reversed.Reversing an Array Functionally
Functional programming is a wonderful addition to most imperative programmming languages. Functional constructs allow us to perform various, even complex, transformative operations on objects and sequences with intuitive and simple instructions.
Many developers simply love using functional constructs when they can, so it's no surprise that reversing a array is commonly done via functional constructs as well. This approach allows you to also pipe in another transformation alongside reversal, such as adding or changing the elements as well.
To reverse a array functionally in JavaScript, we'll leverage the spread operator and the
map() function:// Preserves original array
numArrReversed = numArr.map(numArr.pop, [...numArr]);
// Doesn't preserve original array
strArrReversed = [...strArr].map(strArr.pop, strArr);
The
map() method maps each popped element (removed last element) from the numArr and pushes it into a new array, which is created as a copy of numArr. By removing the last element and adding it as the first into a new array, we create a new reversed array.The first approach deals with a frozen copy of the
numArr object, and thus doesn't modify the original array.In the second approach, we modify the original array as we're using the reference to the original array in the
map() method, even though we create a copy of the array beforehand:console.log('Original num_array: ' + numArr);
console.log('Original string_array: ' + strArr);
console.log('Reversed num_array: ' + numArrReversed);
console.log('Reversed string_array: ' + strArrReversed);
Thus, when all is said and done, the
num_array remains unchanged, while string_array is gone:Original num_array: 1,2,3,4,5
Original string_array:
Reversed num_array: 5,4,3,2,1
Reversed string_array: JavaScript,Python,Java
Reversing an Array with a for Loop
Finally, the good old way is to simply run the array through a
for loop in backwards order, and adding each element into a new array.This works great for creating a new reversed array, but won't reverse the old one in-place. If you'd like to reverse it in-placee, you'll want to use the
unshift() method to add elements at the start of the array, while splicing (in-place operation) continually:function reverse(array) {
newArr = [];
for(i = array.length-1; i >= 0; i--) {
newArr.push(array[i]);
}
return newArr;
}
function reverseInPlace(array) {
for(i = 0; i < array.length; i++) {
tmp = array.splice(i, 1)[0];
array.unshift(tmp);
}
return array;
}
You can use these methods as:
numArrReversed = reverseInPlace(numArr);
strArrReversed = reverse(strArr);
console.log('Original num_array: ' + numArr);
console.log('Original string_array: ' + strArr);
console.log('Reversed num_array: ' + numArrReversed);
console.log('Reversed string_array: ' + strArrReversed);
Which results in:
Original num_array: 5,4,3,2,1
Original string_array: Java,Python,JavaScript
Reversed num_array: 5,4,3,2,1
Reversed string_array: JavaScript,Python,Java