Array Reversal Techniques in DSA Typescript - Execution Trace

Concept Flow - Array Reversal Techniques

Start with array

↓

Set left = 0, right = length-1

↓

Check if left < right?

No→Done

Yes↓

Swap elements at left and right

↓

Increment left, Decrement right

↩Back to Check

Start with two pointers at array ends, swap elements, move pointers inward until they meet or cross.

Execution Sample

DSA Typescript

function reverseArray(arr: number[]): number[] {
  let left = 0;
  let right = arr.length - 1;
  while (left < right) {
    [arr[left], arr[right]] = [arr[right], arr[left]];
    left++;
    right--;
  }
  return arr;
}

This code reverses an array by swapping elements from the ends moving inward.

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 indices 0 and 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 indices 1 and 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	2	2	[5, 4, 3, 2, 1]	Reversal complete

💡 left (2) is not less than right (2), so loop ends and array is reversed

Variable Tracker

Variable	Start	After Step 3	After Step 6	After Step 7	Final
left	0	0	1	2	2
right	4	4	3	2	2
arr	[1, 2, 3, 4, 5]	[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 when left is not less than right?

Because when left meets or passes right, all elements have been swapped. See execution_table row 8 where condition left < right is false, so reversal is complete.

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 middle index without swapping. See execution_table row 7 where left and right both equal 2.

Why do we swap elements instead of creating a new array?

Swapping in place saves memory and is efficient. The code swaps elements at left and right indices directly, as shown in steps 3 and 6.

Visual Quiz - 3 Questions

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

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

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

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

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

💡 Hint

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

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

A Step 7

B Step 8

C Step 9

D Step 6

💡 Hint

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

If the array length was 6 instead of 5, how many swaps would occur?

A 4 swaps

B 2 swaps

C 3 swaps

D 5 swaps

💡 Hint

For even length arrays, swaps happen until left >= right; see variable_tracker for pointer movement.

Concept Snapshot

Array Reversal Technique:
- Use two pointers: left at 0, right at end
- While left < right:
  Swap elements at left and right
  Move left++ and right--
- Stops when pointers meet or cross
- Reverses array in place efficiently

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 and right at the end of the array. While left is less than right, we swap the elements at these positions, then move left forward and right backward. This continues until the pointers meet or cross, 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 behave. The quiz tests understanding of array states and pointer conditions during reversal.

Practice

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

easy

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

B. It sorts the array in ascending order.

C. It removes duplicate elements from the array.

D. It creates a new array with elements doubled.

Solution

1. Step 1: Understand the reverse() method

   The reverse() method changes the order of elements in the array so the last element becomes first and the first becomes last.

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

   This method modifies the original array itself, not creating a new one.

3. Final Answer:

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

4. Quick Check:

   reverse() reverses array order [OK]

Hint: Remember: reverse() flips the array 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 TypeScript?

easy

A. arr->reverse();

B. reverse(arr);

C. arr = reverse();

D. arr.reverse();

Solution

1. Step 1: Identify the method call on the array

   In TypeScript, reverse() is a method called directly on the array object using dot notation.

2. Step 2: Verify syntax

   arr.reverse(); is correct. reverse(arr); incorrectly treats reverse as a standalone function. arr = reverse(); misuses the method. arr->reverse(); uses invalid syntax.

3. Final Answer:

   arr.reverse(); -> Option D

4. Quick Check:

   Use dot notation: arr.reverse() [OK]

Hint: Use dot notation: array.reverse() [OK]

Common Mistakes:

• Calling reverse() as a standalone function
• Assigning reverse() without calling on array
• Using incorrect symbols like '->'

3. What is the output of the following TypeScript code?

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

medium

A. [4, 3, 2, 1]

B. [1, 2, 3, 4]

C. [1, 4, 3, 2]

D. Error: reverse is not a function

Solution

1. Step 1: Understand the initial array

   The array starts as [1, 2, 3, 4].

2. Step 2: Apply the reverse() method

   Calling arr.reverse() reverses the array in place, changing it to [4, 3, 2, 1].

3. Final Answer:

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

4. Quick Check:

   reverse() flips array order [OK]

Hint: reverse() changes array order from end to start [OK]

Common Mistakes:

• Expecting original order after reverse()
• Confusing reverse() with sorting
• Thinking reverse() returns a new array

4. Identify the error in this TypeScript code that tries to reverse an array:

const numbers = [5, 6, 7];
const reversed = numbers.reverse;
console.log(reversed);

medium

A. reverse is not a valid method on arrays.

B. Missing parentheses to call reverse method.

C. reverse method should be called with an argument.

D. Array cannot be reversed using reverse method.

Solution

1. Step 1: Check how reverse is used

   The code assigns numbers.reverse without parentheses, so it assigns the function itself, not the reversed array.

2. Step 2: Correct usage of reverse()

   To reverse the array, the method must be called with parentheses: numbers.reverse().

3. Final Answer:

   Missing parentheses to call reverse method. -> Option B

4. Quick Check:

   Call reverse() with () to execute [OK]

Hint: Always use () to call methods like reverse() [OK]

Common Mistakes:

• Forgetting parentheses when calling methods
• Thinking reverse needs arguments
• Believing reverse is not a valid method

5. Given the array const data = [10, 20, 30, 40, 50];, which code snippet correctly reverses the array without modifying the original array?

hard

A. const reversed = data.reverse();

B. const reversed = data.sort().reverse();

C. const reversed = [...data].reverse();

D. const reversed = data.map().reverse();

Solution

1. Step 1: Understand the problem requirement

   We want to reverse the array but keep the original array unchanged.

2. Step 2: Analyze each option

   const reversed = data.reverse(); reverses the original array directly, modifying it.
   const reversed = [...data].reverse(); creates a shallow copy using spread [...data] and then reverses the copy, preserving the original.
   const reversed = data.sort().reverse(); sorts the original array first, changing order before reversing, and modifies original.
   const reversed = data.map().reverse(); uses map() incorrectly without a callback, causing error.

3. Final Answer:

   const reversed = [...data].reverse(); -> Option C

4. Quick Check:

   Copy then reverse to keep original safe [OK]

Hint: Copy array first with [...array] before reverse() [OK]

Common Mistakes:

• Using reverse() directly modifies original array
• Sorting before reversing changes order incorrectly
• Using map() without a callback causes error