Reversing an array is a very popular coding problem which is often asked as an interview question when applying for an entry level JavaScript Developer position. Sometimes you will be asked to modify the original array so that the first element becomes the last and the second element becomes the second last element of the array and so on. Sometimes you might be asked to reverse an array without changing the original array.
In this post we will look at different methods which are used to reverse an array in JavaScript; these methods will include the methods which reverse the original array as well as methods which can be used to make a new reversed array.
How to use the JavaScript reverse() method
The reverse method in JavaScript is used to reverse the indices of the contents of an array such that the last element of the array becomes the first element of the array and vice versa:
Syntax
The JavaScript reverse method does not take any parameters and is used in combination with the array’s name. Let’s look at an example of the reverse method:
let employeeNames = [‘John’, ‘Jack’, ‘Chris’, ‘Hank’];
console.log(employeeNames.reverse());
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/image1-23.png" data-lazy- height="395" src="data:image/svg xml,” width=”691″>
Note: This method modifies the original string.
How to reverse array elements without changing the original array
As mentioned above, the reverse method modifies the original array. So if you want to reverse the array without modifying the original array you will have to use another method. Unfortunately JavaScript does not have a single specific method for this functionality, rather we have to use a combination of different methods to perform this function.
The first method we will learn is using the spread operator along with the reverse method. First you will copy the array by using the spread operator and then call the reverse method on the newly created array:
let employeeNames = [‘John’, ‘Jack’, ‘Chris’, ‘Hank’];
let reverseArr = […employeeNames].reverse();
console.log(employeeNames);
console.log(reverseArr);
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/image3-21.png" data-lazy- height="316" src="data:image/svg xml,” width=”693″>
We can also use the push and unshift methods in combination with a for loop to reverse an array without modifying the original array:
let employeeNames = [‘John’, ‘Jack’, ‘Chris’, ‘Hank’];
let reverseArr = [];
for (let i = 0; i <= employeeNames.length – 1; i ) {
reverseArr.unshift(employeeNames[i]);
}
console.log(reverseArr);
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/image2-22.png" data-lazy- height="427" src="data:image/svg xml,” width=”675″>
In the example above, we started the loop from i = 0 as the array indexing starts at 0; then we set the condition as i <= employeeNames.length – 1 as the highest index in an array will always be one number less than the total number of elements in the array.
Inside the for loop we used the unshift function to add the elements of the employeeNames array to the new reverseArr array. In the first iteration of the loop the i is equal to 0, so employeeNames[i] selects the first element of the array and the unshift function puts it on the first index of the reverseArr. On the second iteration i is equal to 1, so employeeNames[i] selects the second element of the array and the unshift function puts it on the first index. The element previously present on the first index now moves onto the second index. This process will keep on repeating until it reaches the last element and the whole array is reversed.
We can also use the push method to reverse an array in the same way, but for that we will have to use a decrementing for loop index.
let employeeNames = [‘John’, ‘Jack’, ‘Chris’, ‘Hank’];
let reverseArr = [];
for (let i = employeeNames.length – 1; i >= 0; i—) {
reverseArr.push(employeeNames[i]);
}
console.log(reverseArr);
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/image4-20.png" data-lazy- height="429" src="data:image/svg xml,” width=”667″>
Conclusion
Reversing the elements of an array is one of those coding challenges which everyone should attempt when they are new to learning programming/scripting languages; It is often asked in coding quizzes and interviews.
In this post we used the built-in reverse method to reverse a JavaScript array; this method modifies the original array, so we also learned other methods in which we could reverse an array while preserving the original array. For that purpose we learned to use the spread operator and push, unshift methods in combination with for loops.
About the author
<img data-del="avatar" data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/7011409B3A384F43A8417D1DAC68D179-150×150.jpg616506507e6ec.jpg" height="112" src="data:image/svg xml,” width=”112″>
Shehroz Azam
A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.
