2. Using a for loop
Another way to reverse an array is by using a for loop. This approach involves iterating through the array from both ends and swapping the elements until the middle of the array is reached.
For example:
JavaScript
function reverseArray(arr) {
let left = 0;
let right = arr.length - 1;
while (left < right) {
// Swap elements
let temp = arr[left];
arr[left] = arr[right];
arr[right] = temp;
// Move pointers towards the middle
left++;
right--;
}
return arr;
}
let numbers = [1, 2, 3, 4, 5];
console.log(reverseArray(numbers));
You can also try this code with Online Javascript Compiler
Output
[5, 4, 3, 2, 1]
In this example, we define a function called `reverseArray` that takes an array `arr` as input. We initialize two pointers, `left` and `right`, pointing to the start and end of the array, respectively.
We use a while loop to iterate until `left` is less than `right`. Inside the loop, we swap the elements at positions `left` and `right` using a temporary variable `temp`. After swapping, we increment `left` and decrement `right` to move the pointers towards the middle of the array.
Finally, we return the reversed array.
Note: Using a for loop to reverse an array provides more control over the reversal process and allows for additional logic or modifications if needed.
3. Using unshift() method
The unshift() method is used to add one or more elements to the beginning of an array. We can utilize this method to reverse an array by iterating through the original array and adding each element to the beginning of a new array.
For example:
JavaScript
function reverseArray(arr) {
let reversedArr = [];
for (let i = 0; i < arr.length; i++) {
reversedArr.unshift(arr[i]);
}
return reversedArr;
}
let numbers = [1, 2, 3, 4, 5];
console.log(reverseArray(numbers));
You can also try this code with Online Javascript Compiler
Output
[5, 4, 3, 2, 1]
In this example, we define a function called `reverseArray` that takes an array `arr` as input. We create a new empty array called `reversedArr` to store the reversed elements.
We use a for loop to iterate through each element of the original array `arr`. For each element, we use the `unshift()` method to add it to the beginning of `reversedArr`.
After the loop finishes, `reversedArr` will contain the elements of `arr` in reverse order. Finally, we return `reversedArr`.
Note: The unshift() method to reverse an array creates a new array with the reversed elements, preserving the original array. However, it may not be the most efficient approach for large arrays since the unshift() operation has a time complexity of O(n) for each element.
4. Using reduce() method
The reduce() method is a powerful array method that applies a reducer function to each element of an array and accumulates the result into a single value. We can use the reduce() method to reverse an array by iterating through the array from right to left and building a new array.
For example:
JavaScript
function reverseArray(arr) {
return arr.reduce((acc, curr) => {
acc.unshift(curr);
return acc;
}, []);
}
let numbers = [1, 2, 3, 4, 5];
console.log(reverseArray(numbers));
You can also try this code with Online Javascript Compiler
Output
[5, 4, 3, 2, 1]
In this example, we define a function called `reverseArray` that takes an array `arr` as input. Inside the function, we use the `reduce()` method on `arr`.
The reduce() method takes a reducer function as its first argument and an initial value for the accumulator as its second argument. In this case, the initial value is an empty array `[]`.
The reducer function takes two parameters: `acc` (accumulator) and `curr` (current element). For each element in `arr`, the reducer function adds the current element to the beginning of the accumulator array using the `unshift()` method.
After the reduce() method finishes iterating through all the elements, the accumulator array will contain the elements of `arr` in reverse order. Finally, we return the reversed array.
Note: The reduce() method to reverse an array is a concise and functional approach. It creates a new array with the reversed elements, leaving the original array unchanged.
5. Using map() function to reverse an array
The map() function is another array method that creates a new array by calling a provided function on every element in the original array. We can use the map() function in combination with the array index to reverse an array.
For example:
JavaScript
function reverseArray(arr) {
return arr.map((_, index) => arr[arr.length - 1 - index]);
}
let numbers = [1, 2, 3, 4, 5];
console.log(reverseArray(numbers));
You can also try this code with Online Javascript Compiler
Output
[5, 4, 3, 2, 1]
In this example, we define a function called `reverseArray` that takes an array `arr` as input. Inside the function, we use the `map()` function on `arr`.
The map() function takes a callback function as its argument. The callback function receives three parameters: the current element, the index of the current element, and the array being traversed. In this case, we only need the index parameter, so we use an underscore `_` as a placeholder for the unused current element parameter.
For each element in `arr`, the callback function calculates the index of the corresponding element in the reversed array using the formula `arr.length - 1 - index`. This formula maps the elements from the original array to their reversed positions.
The map() function returns a new array with the elements mapped according to the callback function. In this case, it returns the reversed array.
The map() function to reverse an array creates a new array with the reversed elements, preserving the original array. It provides a concise and readable way to reverse an array.
6. Using Lodash _.reverse() method to reverse an array:
Lodash is a popular JavaScript utility library that provides a wide range of helpful functions, including array manipulation. Lodash offers a convenient method called `_.reverse()` that reverses the order of elements in an array. Here's an example of how to use it:
JavaScript
const _ = require('lodash');
let numbers = [1, 2, 3, 4, 5];
let reversedNumbers = _.reverse(numbers);
console.log(reversedNumbers);
You can also try this code with Online Javascript Compiler
Output
[5, 4, 3, 2, 1]
In this example, we first import the Lodash library using `const _ = require('lodash')`. This assumes you have Lodash installed in your project. If you're using Lodash in a browser environment, you would typically include it via a script tag.
We have an array called `numbers` containing the elements 1, 2, 3, 4, and 5. To reverse the array using Lodash, we simply call the `_.reverse()` method and pass the `numbers` array as an argument. The `_.reverse()` method returns a new array with the elements reversed.
We store the reversed array in a variable called `reversedNumbers` and then log it to the console. The output will be `[5, 4, 3, 2, 1]`, which is the reversed version of the original array.
Note: Lodash's `_.reverse()` method is a pretty simple and efficient way to reverse an array. It creates a new array with the reversed elements, leaving the original array unchanged.
7. Using recursion
Recursion is a programming technique where a function calls itself to solve a problem by breaking it down into smaller subproblems. We can use recursion to reverse an array by swapping elements from the start and end of the array until the middle is reached.
For example:
JavaScript
function reverseArray(arr, start, end) {
if (start >= end) {
return;
}
// Swap elements
let temp = arr[start];
arr[start] = arr[end];
arr[end] = temp;
// Recursive call with updated pointers
reverseArray(arr, start + 1, end - 1);
}
let numbers = [1, 2, 3, 4, 5];
reverseArray(numbers, 0, numbers.length - 1);
console.log(numbers);
You can also try this code with Online Javascript Compiler
Output
[5, 4, 3, 2, 1]
In this example, we define a recursive function called `reverseArray` that takes three parameters: the array `arr`, the starting index `start`, and the ending index `end`.
The base case of the recursion is when `start` is greater than or equal to `end`. This means we have processed all the elements, and the array is reversed, so we return from the function.
If the base case is not met, we swap the elements at indices `start` and `end` using a temporary variable `temp`.
After swapping, we make a recursive call to `reverseArray` with updated pointers. We increment `start` and decrement `end` to move the pointers towards the middle of the array.
The recursive calls continue until the base case is reached, at which point the array is fully reversed.
In the example usage, we call `reverseArray(numbers, 0, numbers.length - 1)`, passing the `numbers` array, the starting index `0`, and the ending index `numbers.length - 1`. After the function finishes executing, the `numbers` array is reversed in place.
Note: Taking help of recursion to reverse an array provides a elegant and concise solution. However, it modifies the original array and may not be the most efficient approach for large arrays due to the overhead of recursive function calls.
Frequently Asked Questions
Can I reverse an array without modifying the original array?
Yes, you can use methods like map() or reduce() to create a new array with the reversed elements, leaving the original array unchanged.
Is there a built-in method in JavaScript to reverse an array?
Yes, JavaScript provides the reverse() method, which reverses the order of elements in an array directly.
What is the time complexity of reversing an array?
The time complexity of reversing an array is generally O(n), where n is the number of elements in the array, as we need to traverse and swap each element.
Conclusion
In this article, we explained different methods to reverse an array in JavaScript. We learned how to use the built-in reverse() method, loops, unshift(), reduce(), map(), Lodash's _.reverse(), and recursion to achieve array reversal. Each approach has its own advantages and disadvantages, like modifying the original array or creating a new reversed array.
You can also check out our other blogs on Code360.
85+ registered