Array Reversal Techniques in DSA Javascript

Mental Model

Reversing an array means flipping its order so the last element becomes first and the first becomes last.

Analogy: Imagine a line of people facing forward. Reversing the array is like asking them all to turn around and face the opposite direction, so the last person is now at the front.

Original array:
[1] -> [2] -> [3] -> [4] -> [5] -> null

Reversed array:
[5] -> [4] -> [3] -> [2] -> [1] -> null

Dry Run Walkthrough

Input: array: [1, 2, 3, 4, 5]

Goal: Reverse the array so it becomes [5, 4, 3, 2, 1]

Step 1: swap first element (1) with last element (5)

[5] -> [2] -> [3] -> [4] -> [1]

Why: Swapping outer elements moves the last to the front and first to the end

Step 2: swap second element (2) with second last element (4)

[5] -> [4] -> [3] -> [2] -> [1]

Why: Continue swapping pairs moving inward to reverse order

Step 3: middle element (3) stays the same as it is in the center

[5] -> [4] -> [3] -> [2] -> [1]

Why: Middle element does not need to move in odd-length array

Result:

[5] -> [4] -> [3] -> [2] -> [1]

Annotated Code

DSA Javascript

class ArrayReversal {
  static reverseArray(arr) {
    let left = 0;
    let right = arr.length - 1;
    while (left < right) {
      // swap elements at left and right
      const temp = arr[left];
      arr[left] = arr[right];
      arr[right] = temp;
      left++; // move left pointer inward
      right--; // move right pointer inward
    }
    return arr;
  }
}

// Driver code
const inputArray = [1, 2, 3, 4, 5];
const reversed = ArrayReversal.reverseArray(inputArray);
console.log(reversed.join(' -> '));

while (left < right) {

loop until pointers meet or cross to cover all pairs

const temp = arr[left]; arr[left] = arr[right]; arr[right] = temp;

swap elements at left and right positions

left++; right--;

move pointers inward to next pair

Output

5 -> 4 -> 3 -> 2 -> 1

Complexity Analysis

Time: O(n) because each element is visited at most once during swapping

Space: O(1) because reversal is done in place without extra storage

vs Alternative: Using a new array to store reversed elements costs O(n) extra space, while in-place swapping uses constant space

Edge Cases

empty array []

returns empty array immediately without errors

DSA Javascript

while (left < right) {

single element array [7]

returns the same array as reversal does not change single element

DSA Javascript

while (left < right) {

array with duplicates [2, 2, 3, 3]

duplicates are swapped normally, final order reversed

DSA Javascript

const temp = arr[left];

When to Use This Pattern

When you need to reverse the order of elements in a list or array efficiently, use the two-pointer swapping technique to reverse in place.

Common Mistakes

Mistake: Swapping elements without moving pointers inward causes infinite loop
Fix: Increment left and decrement right pointers after each swap

Mistake: Using extra array unnecessarily increases space usage
Fix: Use in-place swapping with two pointers to save space

Summary

Reverses the order of elements in an array by swapping pairs from the ends moving inward.

Use when you want to reverse an array efficiently without extra space.

The key insight is to swap outer pairs and move inward until pointers meet.

Practice

1. What does the reverse() method do to an array in JavaScript?

easy

A. It removes duplicate elements from the array.

B. It sorts the array in ascending order.

C. It reverses the order of elements in the original array.

D. It creates a new array with elements doubled.

Solution

1. Step 1: Understand the reverse() method

   The reverse() method changes the original array by reversing the order of its elements.

2. Step 2: Confirm the effect on the original array

   It does not create a new array or sort; it simply reverses the existing array in place.

3. Final Answer:

   It reverses the order of elements in the original array. -> Option C

4. Quick Check:

   reverse() = reverses array order [OK]

Hint: reverse() flips array order in place [OK]

Common Mistakes:

• Thinking reverse() sorts the array
• Assuming reverse() creates a new array
• Confusing reverse() with removing duplicates

2. Which of the following is the correct syntax to reverse an array named arr in JavaScript?

easy

A. arr.reverse();

B. reverse(arr);

C. arr = reverse();

D. arr.reverse(arr);

Solution

1. Step 1: Identify the method call syntax

   The reverse() method is called on the array object itself, so the syntax is arr.reverse();.

2. Step 2: Check other options for errors

   Options A, B, and C are incorrect because reverse is not a standalone function and does not take arguments.

3. Final Answer:

   arr.reverse(); -> Option A

4. Quick Check:

   Method called on array object = arr.reverse() [OK]

Hint: Use arrayName.reverse() to reverse in place [OK]

Common Mistakes:

• Calling reverse as a standalone function
• Passing the array as an argument to reverse
• Assigning reverse() without calling on array

3. What will be the output of the following code?

const arr = [1, 2, 3, 4];
const reversed = arr.reverse();
console.log(reversed);

medium

A. undefined

B. [1, 2, 3, 4]

C. [1, 4, 3, 2]

D. [4, 3, 2, 1]

Solution

1. Step 1: Understand reverse() return value

   The reverse() method reverses the original array and returns the same reversed array.

2. Step 2: Trace the code output

   After calling arr.reverse(), arr becomes [4, 3, 2, 1], and reversed holds this reversed array. Logging reversed prints [4, 3, 2, 1].

3. Final Answer:

   [4, 3, 2, 1] -> Option D

4. Quick Check:

   reverse() returns reversed array [OK]

Hint: reverse() returns the reversed array itself [OK]

Common Mistakes:

• Expecting original array unchanged
• Thinking reverse() returns undefined
• Confusing reverse() with sorting

4. Find the error in the following code that tries to reverse an array nums:

function reverseArray(nums) {
  for(let i = 0; i < nums.length / 2; i++) {
    let temp = nums[i];
    nums[i] = nums[nums.length - i];
    nums[nums.length - i] = temp;
  }
  return nums;
}

medium

A. The index nums.length - i is out of bounds; should be nums.length - i - 1.

B. The temp variable is not needed for swapping.

C. The loop should run while i < nums.length / 2, not <=.

D. The function should return a new array, not modify nums.

Solution

1. Step 1: Check index calculations for swapping

   The code uses nums.length - i as the index for the element to swap, but array indices go from 0 to nums.length - 1, so it should be nums.length - i - 1.

2. Step 2: Confirm loop condition and swapping logic

   The loop condition i < nums.length / 2 is acceptable, and temp is needed for swapping. Modifying the original array is allowed here.

3. Final Answer:

   The index nums.length - i is out of bounds; should be nums.length - i - 1. -> Option A

4. Quick Check:

   Array indices start at 0, so subtract 1 [OK]

Hint: Array last index = length - 1, not length [OK]

Common Mistakes:

• Using nums.length - i instead of nums.length - i - 1
• Removing temp variable causing swap errors
• Incorrect loop boundary causing extra swaps

5. Given an array arr, which code snippet correctly reverses the array without modifying the original array?

hard

A. const reversed = arr.reverse();

B. const reversed = arr.slice().reverse();

C. const reversed = [...arr].sort().reverse();

D. const reversed = arr.reverse().map(x => x);

Solution

1. Step 1: Understand how to avoid modifying original array

   Using arr.slice() creates a shallow copy of the array. Calling reverse() on this copy reverses it without changing the original.

2. Step 2: Analyze other options

   const reversed = arr.reverse(); reverses the original array. const reversed = [...arr].sort().reverse(); sorts before reversing, changing order. const reversed = arr.reverse().map(x => x); reverses the original array because reverse() is called on arr before mapping.

3. Final Answer:

   const reversed = arr.slice().reverse(); -> Option B

4. Quick Check:

   Copy then reverse to keep original safe [OK]

Hint: Use slice() to copy before reverse() [OK]

Common Mistakes:

• Using reverse() directly modifies original array
• Sorting before reversing changes order
• Thinking reverse().map(x => x) preserves original array