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 ]\u00a0 is an array of integers.<\/p>\n\n\n\n
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]. <\/p>\n\n\n
![\"example](\"https:\/\/favtutor.com\/articles\/wp-content\/uploads\/2023\/11\/rev-1024x320.png\")
<\/figure>\n<\/div>\n\n\nWe can perform the reversal in primarily two ways.<\/p>\n\n\n\n
- \n
- We can either perform the in-place reversal. The original array\u2019s elements are reversed inside the array.\u00a0<\/li>\n<\/ol>\n\n\n\n
- \n
- 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.\u00a0<\/li>\n<\/ol>\n\n\n\n
4 Methods to Reverse an Array in JavaScript<\/strong><\/h2>\n\n\n\n
In this section, we will look at various methods for reversing an array:<\/p>\n\n\n\n
1) Using the reverse() method<\/strong><\/h3>\n\n\n\n
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.<\/strong><\/p>\n\n\n\n
Here\u2019s an example of how to use reverse() method in JavaScript:<\/p>\n\n\n\n
\/\/declaring an array\nlet ogArray=[4,5,6,7];\n\n\/\/printing the array\nconsole.log(ogArray);\n\n\/\/using the reverse function\nogArray.reverse();\n\n\/\/printing the reversed ogArray\nconsole.log(ogArray);<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
[ 4, 5, 6, 7 ]\n[ 7, 6, 5, 4 ]\n<\/code><\/pre>\n\n\n\nSo, 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.<\/p>\n\n\n\n
2) Using the for() loop<\/strong><\/h3>\n\n\n\n
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.\u00a0<\/p>\n\n\n\n
Here\u2019s an example:<\/p>\n\n\n\n
\/\/declaring an array\nlet ogArray=[4,5,6,7];\n\n\/\/printing the array\nconsole.log(ogArray);\n\n\/\/creating a new array to store elements in reverse order\nlet reversedArray=[];\n\n\/\/using the for() loop\nfor(let i=ogArray.length-1;i>=0;i--){\n \/\/adding elements in reversedArray\n reversedArray.push(ogArray[i]);\n}\n\n\/\/printing the reversed ogArray\nconsole.log(reversedArray);<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n
[ 4, 5, 6, 7 ]\n[ 7, 6, 5, 4 ]\n<\/code><\/pre>\n\n\n\nIn 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.<\/p>\n\n\n\n
3) Using the unshift() function<\/strong><\/h3>\n\n\n\n
The unshift() function is used to add elements at the beginning of an array. The syntax of the unshift function is as follows.<\/p>\n\n\n\n
array_name.unshift(element);<\/code><\/pre>\n\n\n\nwhere\u00a0array_name is the name of the array on which unshift() has to be performed\u00a0and element is the element that has to be added to the beginning of the array.<\/p>\n\n\n\n
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.<\/strong> At the final iteration, we will observe that the last element of the original array will come at first of the reversed array. <\/p>\n\n\n\n
Check this example:<\/p>\n\n\n\n
\/\/declaring an array\nlet ogArray=[4,5,6,7];\n\n\/\/printing the array\nconsole.log(ogArray);\n\n\/\/creating a new array to store elements in reverse order\nlet reversedArray=[];\n\n\/\/using the unshift() loop\nfor(let i=0;i<ogArray.length;i++){\n \/\/adding elements in the reversedArray using\n reversedArray.unshift(ogArray[i]);\n}\n\n\/\/printing the reversed ogArray\nconsole.log(reversedArray)<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n
[ 4, 5, 6, 7 ]\n[ 7, 6, 5, 4 ]\n<\/code><\/pre>\n\n\n\nWe have obtained the desired result.<\/p>\n\n\n\n
4) Using the reduce() function<\/strong><\/h3>\n\n\n\n
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:<\/p>\n\n\n\n
\/\/creating a custom function for reversing array using reduce\nfunction reverseArray(ogArray) {\n \/\/using reduce function\n return ogArray.reduce((accumulator, currentValue) => {\n accumulator.unshift(currentValue);\n return accumulator;\n }, []);\n}\n \n\/\/declaring an array\nlet ogArray=[4,5,6,7];\n\n\/\/printing the array\nconsole.log(ogArray);\n\n\/\/declaring another array and using the custom function\nlet reversedArray=reverseArray(ogArray);\n\n\/\/printing the reversedArray\nconsole.log(reversedArray);<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n
[ 4, 5, 6, 7 ]\n[ 7, 6, 5, 4 ]\n<\/code><\/pre>\n\n\n\nIn 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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Conclusion<\/strong><\/h2>\n\n\n\n
- 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.\u00a0<\/li>\n<\/ol>\n\n\n\n