Arrays are one of the most fundamental data structures in JavaScript. They are commonly used to store data in a structured and organized manner. One commonly encountered situation when working with arrays in JavaScript is to reverse the order of elements in the array, meaning the first element becomes the last, the second element becomes the second last, and so on.
In this tutorial, we are going to discuss four different ways you can reverse an array in JavaScript.
How to reverse an array using the reverse() method
The easiest way to do this is by utilizing the built-in method reverse().
1let originalArray = [1, 2, 3, 4, 5];
2let reversedArray = originalArray.reverse();
3
4console.log(reversedArray);
5console.log(originalArray);1[ 5, 4, 3, 2, 1 ]
2[ 5, 4, 3, 2, 1 ]The reverse() method directly operates on the original array and returns a copy of the reversed array.
Alternatively, if you wish to keep the original array intact, use toReversed() instead.
1let originalArray = [1, 2, 3, 4, 5];
2let reversedArray = originalArray.toReversed();
3
4console.log(reversedArray);
5console.log(originalArray);1[ 5, 4, 3, 2, 1 ]
2[ 1, 2, 3, 4, 5 ]The toReversed() method returns the reversed array without altering the original.
How to reverse an array using a for loop
Instead of using the built-in methods, you can also reverse the array using a for loop.
1let originalArray = [1, 2, 3, 4, 5];
2let reversedArray = [];
3
4for (let i = originalArray.length - 1; i >= 0; i--) {
5 reversedArray.push(originalArray[i]);
6}
7
8console.log(reversedArray); // Output: [5, 4, 3, 2, 1]
9console.log(originalArray); // Output: [1, 2, 3, 4, 5]In this example, we initialized the index i to point at the last element in the array (i = originalArray.length - 1). The index decrement by 1 for every iteration until i reaches 0, which points to the first element of the array.
For every iteration, the element the index points to will be pushed to reversedArray.
How to reverse an array using recursion
Besides the for loop, you can also reverse an array using recursion. For example:
1function reverseArray(array) {
2 if (array.length <= 1) {
3 return array;
4 }
5 return [array[array.length - 1]].concat(reverseArray(array.slice(0, -1)));
6}
7
8let originalArray = [1, 2, 3, 4, 5];
9let reversedArray = reverseArray(originalArray);
10
11console.log(reversedArray); // Output: [5, 4, 3, 2, 1]
12console.log(originalArray); // Output: [1, 2, 3, 4, 5]In this case, when the reverseArray() function is called, it will first test if the array is empty or has only one element.
The second part of reverseArray() is a bit confusing, so let's take a closer look. array[array.length - 1] retrieves the last element in the array. concat() is a built-in function that joins two arrays together in JavaScript.
Inside the concat() method, reverseArray() is called again with a new array as the input. This new array is the original array with the last element sliced off.
So, when you run reverseArray([1, 2, 3, 4, 5]), this will be returned:
1[5].concat(reverseArray([1, 2, 3, 4]));And then when reverseArray() is executed again:
1[5].concat([4].concat(reverseArray([1, 2, 3])));This process will be repeated over and over again until all the elements in the array are reversed.
How to reverse an array using the map() function
In JavaScript, map() is an array method that executes a function for every element in the array, and returns the result in a new array. For us, it is possible to use map() to reverse an array in JavaScript.
1let originalArray = [1, 2, 3, 4, 5];
2
3let reversedArray = originalArray.map((_, i, arr) => arr[arr.length - 1 - i]);
4
5console.log(reversedArray); // Output: [5, 4, 3, 2, 1]
6console.log(originalArray); // Output: [1, 2, 3, 4, 5]In this example, the function (_, i, arr) => arr[arr.length - 1 - i] will be executed for every element in the originalArray. The underscore (_) is a placeholder for a parameter that is not used, as map() has the following syntax:
1array.map(function(currentValue, index, arr))And currentValue is not necessary in our case.
The function returns the corresponding element in the array based on the current index. For example, when i is 0, arr.length - 1 - i gives 4, which points to the last element of the array.
When i is 1, arr.length - 1 - i gives 3, which points to the second last element in the originalArray.
When i is 4, arr.length - 1 - i gives 0, which points to the first element in the originalArray.
Since map() will go over the entire originalArray and apply this function to every element, which will eventually return a new array with all the elements reversed.
Conclusion
In this tutorial, we went over four different ways you can reverse an array in JavaScript. Hope this tutorial has been helpful to you.
Happy coding!