In this article, I'll show you two ways to reverse arrays in JavaScript.
The reverse
method of arrays reverses an array by making the last item the first, and making the first item the last. The other items in between also get reversed, respectively.
Before showing you examples of the reverse
method, let me show you how to reverse an array without using it.
I have a video version of this article you can check out as well.
1. How to Reverse an Array Using a for
Loop
Using a for
loop (or any other type of loop), we can loop through an array from the last time to the first item, and push those values to a new array which becomes the reversed version. Here's how:
const array = [1, 2, 3, 4]
const reversedArray = []
for(let i = array.length - 1; i >= 0; i--) {
const valueAtIndex = array[i]
reversedArray.push(valueAtIndex)
}
console.log(reversedArray)
// [4, 3, 2, 1]
By using a for
loop, we start looping from the index of the last value (array.length - 1
) to the index of the first value (0
). Then we push the values accordingly to reversedArray
.
But there's an easier way to reverse an array, which is using the reverse
method.
2. How to Use Array.reverse
to Reverse an Array
You can use the reverse
method, which is an easier-to-read/write approach to the for
loop, to reverse an array. This method reverses the array in place, which means that the array it is used on is modified.
Let's see an example:
const array = [1, 2, 3, 4]
array.reverse()
console.log(array)
// [ 4, 3, 2, 1 ]
As you can see in this example, the array
is modified when the reverse
method is applied to it.
If you do not want the array
to be modified, you can clone it before applying the reverse
. The reverse
method also returns the reversed array, so you can assign that array to a variable.
Here's how to duplicate and reverse an array:
const array = [1, 2, 3, 4]
const reversed = [...array].reverse()
console.log(reversed)
// [ 4, 3, 2, 1 ]
console.log(array)
// [ 1, 2, 3, 4 ]
Using the spread operator here, we first clone the array
, then apply the reverse
method on the clone. The returned reverse array is then returned to the reverse
variable.
As you can see, by logging array
, it is not affected because we cloned it first.
Thanks for reading!
So if you ever need to reverse an array, I hope this article has taught you something.