Reversing an array is changing the order of array elements to its opposite, such that the last elements occupy the first positions now. It will be helpful in various problems. In this article, we will discuss the different methods to reverse an array in JavaScript. So, let’s get started!
What does it mean to Reverse an Array?
As we know, arrays are linear data structures that store homogenous data, i.e. same type of data. An array can contain all integers, all characters, or all strings as the elements. For example, Arr = [ 1, 2, 10, 20 ] is an array of integers.
Reversing an array means changing the order of the array to its opposite. If we have an array as [1,2,3,4,5], the reverse of this array is [5,4,3,2,1].
We can perform the reversal in primarily two ways.
- We can either perform the in-place reversal. The original array’s elements are reversed inside the array.
- We can make a new array and push the elements of the original array in reverse order. The new array is called the Reversed Array.
4 Methods to Reverse an Array in JavaScript
In this section, we will look at various methods for reversing an array:
1) Using the reverse() method
The simplest way to reverse an array in JavaScript is by using the built-in reverse() method. This method reverses the order of the elements within the array. It means that this is an in-place reversal of the array.
Here’s an example of how to use reverse() method in JavaScript:
//declaring an array let ogArray=[4,5,6,7]; //printing the array console.log(ogArray); //using the reverse function ogArray.reverse(); //printing the reversed ogArray console.log(ogArray);
Output:
[ 4, 5, 6, 7 ]
[ 7, 6, 5, 4 ]
So, in this example, we have used the in-built reverse function on the original array. We observe that the original array has been reversed, and we have obtained the desired output.
2) Using the for() loop
The second method is to make a new array to store the array elements in the reverse order. We have to iterate over the original array in the opposite direction using the for() loop.
Here’s an example:
//declaring an array
let ogArray=[4,5,6,7];
//printing the array
console.log(ogArray);
//creating a new array to store elements in reverse order
let reversedArray=[];
//using the for() loop
for(let i=ogArray.length-1;i>=0;i--){
//adding elements in reversedArray
reversedArray.push(ogArray[i]);
}
//printing the reversed ogArray
console.log(reversedArray);Output:
[ 4, 5, 6, 7 ]
[ 7, 6, 5, 4 ]
In this example, we iterate over the original array using a for loop from the last element to the first element (i.e. in the reverse order) and one by one add each element to the new array. We obtain a new array with reversed elements from the original array.
3) Using the unshift() function
The unshift() function is used to add elements at the beginning of an array. The syntax of the unshift function is as follows.
array_name.unshift(element);where array_name is the name of the array on which unshift() has to be performed and element is the element that has to be added to the beginning of the array.
We will iterate over every element of the array and use this function for every element from first to last. At every iteration, the current element of the original array will be pushed at the beginning of the reversed array. At the final iteration, we will observe that the last element of the original array will come at first of the reversed array.
Check this example:
//declaring an array
let ogArray=[4,5,6,7];
//printing the array
console.log(ogArray);
//creating a new array to store elements in reverse order
let reversedArray=[];
//using the unshift() loop
for(let i=0;i<ogArray.length;i++){
//adding elements in the reversedArray using
reversedArray.unshift(ogArray[i]);
}
//printing the reversed ogArray
console.log(reversedArray)Output:
[ 4, 5, 6, 7 ]
[ 7, 6, 5, 4 ]
We have obtained the desired result.
4) Using the reduce() function
JavaScript’s reduce() method provides another powerful way to reverse an array. This method applies a function to each element in the array, accumulating the result in a single value. Check how to do it:
//creating a custom function for reversing array using reduce
function reverseArray(ogArray) {
//using reduce function
return ogArray.reduce((accumulator, currentValue) => {
accumulator.unshift(currentValue);
return accumulator;
}, []);
}
//declaring an array
let ogArray=[4,5,6,7];
//printing the array
console.log(ogArray);
//declaring another array and using the custom function
let reversedArray=reverseArray(ogArray);
//printing the reversedArray
console.log(reversedArray);Output:
[ 4, 5, 6, 7 ]
[ 7, 6, 5, 4 ]
In this example, the reverseArray function takes an array as input and uses the reduce() method to iterate through the elements of the input array. The reduce() method applies a function that takes two arguments: the accumulator and the currentValue.
Inside the function, we use the unshift() method to add the currentValue to the beginning of the accumulator array, effectively reversing the order of the elements. Finally, we return the accumulator array as the result of the reduce() method.
Conclusion
In this article, we took a deep dive into various methods to reverse an array in JavaScript. Try using these methods with different examples to understand them better. You can check out Convert Array to String in JavaScript etc to learn about arrays in detail.
