How to reverse an array in JavaScript using the built-in Array.prototype.reverse() method?
Well, stick around because this article provides a detailed explanation of the reverse() method, including its syntax, description, and examples of usage.
Apart from that, you’ll also discover alternative ways how to reverse an array using several methods in JavaScript.
What is JavaScript reverse array?
The Array.prototype.reverse() or the Array.reverse() method is a built-in function in JavaScript that reverses the order of the elements in an array.
This method changes the original array and returns a reference to the same array.
Syntax
arr.reverse()Where arr is the array that you want to reverse. This method reverses the order of the elements in the array in place, meaning that it changes the original array.
Return value
The reverse() method returns a reference to the same array after it has been reversed.
How to reverse an array using array.reverse in JavaScript?
The Array.prototype.reverse() method is the most straightforward way to reverse an array in JavaScript.
This method reverses the order of the elements in an array in place, meaning that it changes the original array and returns a reference to the same array.
Here’s an example of how to use this method:
let sampleArray = ["Math", "English", "Science"];
sampleArray.reverse();
console.log(sampleArray); Output:
[ 'Science', 'English', 'Math' ]In our example, we have an array called sampleArray with three elements: “Math,” “English,” and “Science.” Then, call the reverse() method on sampleArray, which reverses the order of its elements.
When we log sampleArray to the console, we can see that its elements are now in reverse order: “Science,” “English, and “Math.”
Different ways on how to reverse an array in JavaScript?
Solution 1: Use a loop to swap elements
Another way to reverse an array is by using a loop to swap the elements. This can be done using a temporary variable or by using the XOR swap algorithm.
Here’s an example of how to make an array reverse in JavaScript using a loop and a temporary variable:
function reverseArray(arr) {
let left = 0;
let right = arr.length - 1;
while (left < right) {
let temp = arr[left];
arr[left] = arr[right];
arr[right] = temp;
left++;
right--;
}
return arr;
}
let sampleArray = ["Math", "English", "Science", "Programming"];
reverseArray(sampleArray);
console.log(sampleArray);
In this example, we have a function called reverseArray that takes an array as an argument. Inside the function, we use a while loop to swap the elements of the array.
We start with two pointers, one pointing to the first element (left) and one pointing to the last element (right). We then use a temporary variable (temp) to swap the values of these two elements.
We increment left and decrement right until they meet in the middle, at which point all the elements have been swapped and the array is reversed.
Output:
[ 'Programming', 'Science', 'English', 'Math' ]Solution 2: Use the Array.prototype.reduce() method
The reduce() method can also be used to reverse an array by accumulating the elements of the original array in reverse order into a new array.
Here’s an example of how to use this method:
let sampleArray = ["Math", "English", "Science", "Programming"];
let reversedArray = sampleArray.reduce((acc, curr) => [curr, ...acc], []);
console.log(reversedArray);Output:
[ 'Programming', 'Science', 'English', 'Math' ]Solution 3: Use the spread operator and Array.prototype.reverse()
You can also use the spread operator (…) to create a copy of the original array and then call the reverse() method on the copy.
This way, you can reverse the order of the elements without changing the original array.
Here’s an example of how to do this:
let sampleArray = ["Math", "English", "Science", "Programming", "History"];
let reversedArray = [...sampleArray].reverse();
console.log(reversedArray);
Output:
[ 'History', 'Programming', 'Science', 'English', 'Math' ]Solution 4: Use Array.prototype.map()
You can also use the Array.prototype.map() method to reverse an array in JavaScript.
Here’s an example of how to do this:
let sampleArray = ["Math", "English", "Science", "Programming", "History"];
let reversedArray = sampleArray.map((_, i, arr) => arr[arr.length - 1 - i]);
console.log(reversedArray);
Output:
[ 'History', 'Programming', 'Science', 'English', 'Math' ]Solution 5: Use recursion
You can also reverse an array using recursion.
Here’s an example of how to do this:
function reverseArray(arr) {
if (arr.length === 0) {
return [];
} else {
return [arr.pop()].concat(reverseArray(arr));
}
}
let sampleArray = ["Math", "English", "Science", "Programming", "History"];
let reversedArray = reverseArray(sampleArray);
console.log(reversedArray);
In this example, we have a function called reverseArray that takes an array as an argument and returns a new array with the elements in reverse order.
The function uses recursion to achieve this: if the input array is empty, it returns an empty array; otherwise, it removes the last element from the input array using the pop() method, concatenates it with the result of calling reverseArray on the remaining elements of the input array, and returns the result.
Output:
[ 'History', 'Programming', 'Science', 'English', 'Math' ]Conclusion
In conclusion, this article provides different approaches to reverse an array in JavaScript.
We introduce the built-in Array.prototype.reverse() or array.reverse method, which is the simplest way to reverse an array in JavaScript, modifying the original array in place.
Also, we provide alternative methods to achieve the same result, including using loops, the reduce() method, the spread operator, map(), and recursion.
Each approach is demonstrated with clear examples for better understanding. Whether you prefer simplicity or exploring different techniques, this article equips you with the knowledge to effectively reverse arrays in JavaScript.
We are hoping that this article provides you with enough information that helps you understand the JavaScript reverse array.
You can also check out the following article:
Thank you for reading itsourcecoders 😊.