Array Reversal Techniques in DSA Javascript - Execution Trace

Concept Flow - Array Reversal Techniques

Start with array

↓

Set two pointers: left=0, right=length-1

↓

Check: left < right?

No→Done

Yes↓

Swap elements at left and right

↓

Move left++ and right--

↩Back to Check

We use two pointers at the ends of the array and swap elements moving inward until they meet.

Execution Sample

DSA Javascript

const arr = [1, 2, 3, 4, 5];
let left = 0;
let right = arr.length - 1;
while (left < right) {
  let temp = arr[left];
  arr[left] = arr[right];
  arr[right] = temp;
  left++;
  right--;
}

This code reverses the array by swapping elements from the ends moving towards the center.

Execution Table

Step	Operation	left	right	Array State	Pointer Changes
1	Initialize pointers	0	4	[1, 2, 3, 4, 5]	left=0, right=4
2	Check left < right	0	4	[1, 2, 3, 4, 5]	Condition True
3	Swap arr[left] and arr[right]	0	4	[5, 2, 3, 4, 1]	Swapped arr[0] and arr[4]
4	Increment left, decrement right	1	3	[5, 2, 3, 4, 1]	left=1, right=3
5	Check left < right	1	3	[5, 2, 3, 4, 1]	Condition True
6	Swap arr[left] and arr[right]	1	3	[5, 4, 3, 2, 1]	Swapped arr[1] and arr[3]
7	Increment left, decrement right	2	2	[5, 4, 3, 2, 1]	left=2, right=2
8	Check left < right	2	2	[5, 4, 3, 2, 1]	Condition False
9	End loop	2	2	[5, 4, 3, 2, 1]	Array reversed

💡 left equals right (2), condition left < right is false, loop ends

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 6	After Step 7	Final
left	0	0	1	1	2	2
right	4	4	3	3	2	2
arr	[1,2,3,4,5]	[5,2,3,4,1]	[5,2,3,4,1]	[5,4,3,2,1]	[5,4,3,2,1]	[5,4,3,2,1]

Key Moments - 3 Insights

Why do we stop the loop when left is not less than right?

Because when left meets or passes right, all elements have been swapped. See execution_table rows 8 and 9 where condition becomes false and loop ends.

Why do we swap elements at left and right pointers?

Swapping arr[left] and arr[right] moves the element from the start to the end and vice versa, reversing the array step by step. See execution_table rows 3 and 6 for swaps.

What happens if the array has an odd number of elements?

The middle element stays in place because left and right pointers meet at the center without swapping. See execution_table row 7 where left and right both become 2.

Visual Quiz - 3 Questions

Look at the execution_table, what is the array state after step 6?

A [1, 2, 3, 4, 5]

B [5, 2, 3, 4, 1]

C [5, 4, 3, 2, 1]

D [1, 4, 3, 2, 5]

💡 Hint

Check the 'Array State' column at step 6 in the execution_table.

At which step does the condition left < right become false?

A Step 8

B Step 7

C Step 9

D Step 6

💡 Hint

Look at the 'Pointer Changes' and 'Operation' columns in execution_table rows 8 and 9.

If the array was [1, 2, 3, 4], what would be the array state after the first swap?

A [1, 2, 3, 4]

B [4, 2, 3, 1]

C [1, 4, 3, 2]

D [4, 3, 2, 1]

💡 Hint

Swapping first and last elements swaps arr[0] and arr[3].

Concept Snapshot

Array Reversal Using Two Pointers:
- Initialize left=0, right=length-1
- While left < right:
  Swap arr[left] and arr[right]
  Increment left, decrement right
- Stops when pointers meet or cross
- Works for arrays of any length

Full Transcript

This visualization shows how to reverse an array by swapping elements from the ends moving inward. We start with two pointers: left at the start (0) and right at the end (length-1). While left is less than right, we swap the elements at these pointers, then move left forward and right backward. This continues until left meets or passes right, meaning the array is fully reversed. The execution table tracks each step, showing pointer positions and array state after swaps. Key moments clarify why the loop stops and how odd-length arrays keep the middle element unchanged.

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