How to Reverse an Array in JavaScript

Reversing an array is a fundamental operation in programming, widely used in various algorithms and applications. JavaScript provides built-in methods to reverse an array, but it's also essential to understand manual approaches for better control and learning. In this article, we will explore both built-in and manual ways to reverse an array in JavaScript with code examples and outputs.

01. Using the `reverse()` Method

JavaScript's reverse() method is the easiest way to reverse an array. It modifies the array in place and returns the reversed array.

// Code Example:
let arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr); // Output: [5, 4, 3, 2, 1]

Output:

Explanation: The reverse() method rearranges the elements in the array from the last to the first index.

02. Manual Approach: Swapping Elements In-Place

This method swaps elements from the start and end of the array, working towards the center. It's efficient in terms of memory usage.

// Code Example:
function reverseArrayInPlace(arr) {
  let start = 0;
  let end = arr.length - 1;

  while (start < end) {
    // Swap elements
    let temp = arr[start];
    arr[start] = arr[end];
    arr[end] = temp;

    // Move pointers
    start++;
    end--;
  }

  return arr;
}

// Example Usage:
let arr = [1, 2, 3, 4, 5];
reverseArrayInPlace(arr);
console.log(arr); // Output: [5, 4, 3, 2, 1]

Output:

Explanation: The start pointer begins at the first index, and the end pointer starts at the last index. Elements are swapped iteratively until the pointers meet.

03. Using a Temporary Array

This approach involves creating a new array and iterating through the original array in reverse order to copy elements.

// Code Example:
function reverseArray(arr) {
  let reversed = [];
  for (let i = arr.length - 1; i >= 0; i--) {
    reversed.push(arr[i]);
  }
  return reversed;
}

// Example Usage:
let arr = [1, 2, 3, 4, 5];
let reversedArr = reverseArray(arr);
console.log(reversedArr); // Output: [5, 4, 3, 2, 1]

Output:

Explanation: This method is straightforward but uses additional memory for the temporary array.

04. Recursive Method

Reversing an array can also be achieved using recursion. The idea is to swap the first and last elements and recursively reverse the remaining subarray.

// Code Example:
function reverseArrayRecursive(arr, start, end) {
  if (start >= end) return arr;

  // Swap elements
  let temp = arr[start];
  arr[start] = arr[end];
  arr[end] = temp;

  // Recursive call
  return reverseArrayRecursive(arr, start + 1, end - 1);
}

// Example Usage:
let arr = [1, 2, 3, 4, 5];
reverseArrayRecursive(arr, 0, arr.length - 1);
console.log(arr); // Output: [5, 4, 3, 2, 1]

Output:

Explanation: This method involves a base case to terminate the recursion and recursive calls to reverse the remaining part of the array.

05. Using Higher-Order Functions

You can reverse an array using functional programming techniques like reduce() by iterating through the array in reverse order.

// Code Example:
function reverseUsingReduce(arr) {
  return arr.reduce((reversed, item) => [item, ...reversed], []);
}

// Example Usage:
let arr = [1, 2, 3, 4, 5];
let reversedArr = reverseUsingReduce(arr);
console.log(reversedArr); // Output: [5, 4, 3, 2, 1]

Output:

Explanation: The reduce() method accumulates elements in reverse order by prepending them to the result array.

06. Comparing the Methods

Method	Time Complexity	Space Complexity
Using `reverse()`	O(n)	O(1)
Swapping In-Place	O(n)	O(1)
Using a Temporary Array	O(n)	O(n)
Recursive Method	O(n)	O(n)
Using `reduce()`	O(n)	O(n)

Conclusion

Reversing an array is a fundamental task that can be performed using multiple techniques. While the built-in reverse() method is the simplest and most efficient for most use cases, manual approaches like swapping in-place or recursion provide deeper insights into array manipulation. Understanding these methods equips you with problem-solving skills essential for complex scenarios.