Container With Most Water in DSA Javascript - Execution Trace

Concept Flow - Container With Most Water

Start with two pointers

↓

Calculate area between pointers

↓

Compare with max area

↓

Move pointer with smaller height inward

↓

Repeat until pointers meet

↓

Return max area found

We use two pointers at the ends of the array, calculate area, update max, then move the smaller pointer inward until they meet.

Execution Sample

DSA Javascript

const maxArea = (height) => {
  let left = 0, right = height.length - 1, max = 0;
  while (left < right) {
    const area = Math.min(height[left], height[right]) * (right - left);
    max = Math.max(max, area);
    if (height[left] < height[right]) left++;
    else right--;
  }
  return max;
};

Calculates the maximum water container area by moving two pointers inward.

Execution Table

Step	Operation	Left Pointer	Right Pointer	Height[left]	Height[right]	Width	Area	Max Area	Pointer Moved	Visual State
1	Initialize pointers	0	8	1	7	8	0	0	None	[1,8,6,2,5,4,8,3,7]
2	Calculate area	0	8	1	7	8	8	8	Left moves	[1,8,6,2,5,4,8,3,7]
3	Calculate area	1	8	8	7	7	49	49	Right moves	[1,8,6,2,5,4,8,3,7]
4	Calculate area	1	7	8	3	6	18	49	Right moves	[1,8,6,2,5,4,8,3,7]
5	Calculate area	1	6	8	8	5	40	49	Right moves	[1,8,6,2,5,4,8,3,7]
6	Calculate area	1	5	8	4	4	16	49	Right moves	[1,8,6,2,5,4,8,3,7]
7	Calculate area	1	4	8	5	3	15	49	Right moves	[1,8,6,2,5,4,8,3,7]
8	Calculate area	1	3	8	2	2	4	49	Right moves	[1,8,6,2,5,4,8,3,7]
9	Calculate area	1	2	8	6	1	6	49	Right moves	[1,8,6,2,5,4,8,3,7]
10	Pointers meet	1	1	8	8	0	0	49	Pointers meet	[1,8,6,2,5,4,8,3,7]

💡 Pointers meet at index 1, loop ends.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	After Step 7	After Step 8	After Step 9	Final
left	0	1	1	1	1	1	1	1	1	1
right	8	8	7	6	5	4	3	2	1	1
max	0	8	49	49	49	49	49	49	49	49

Key Moments - 3 Insights

Why do we move the pointer with the smaller height?

Because the area is limited by the smaller height, moving the larger height pointer won't increase area. See steps 2 and 3 where left pointer moves when height[left] < height[right].

Why does the loop stop when pointers meet?

When left and right pointers meet, width becomes zero, so no container can be formed. This is shown in step 10 where left == right == 1.

Why do we calculate area as min(height[left], height[right]) * (right - left)?

Because water container height is limited by the shorter line, and width is the distance between pointers. This calculation is consistent in all steps in the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what is the max area after step 3?

A 8

B 49

C 18

D 4

💡 Hint

Check the 'Max Area' column at step 3 in execution_table.

At which step does the left pointer move for the first time?

A Step 9

B Step 3

C Step 2

D Step 10

💡 Hint

Look at the 'Pointer Moved' column in execution_table for the first 'Left moves'.

If height[left] was always greater than height[right], which pointer would move?

A Right pointer moves

B Left pointer moves

C Both pointers move simultaneously

D No pointer moves

💡 Hint

Refer to the condition in the code and pointer movement in execution_table.

Concept Snapshot

Container With Most Water:
- Use two pointers at array ends
- Calculate area = min(height[left], height[right]) * (right - left)
- Update max area if larger
- Move pointer with smaller height inward
- Repeat until pointers meet
- Return max area found

Full Transcript

This visualization shows how to find the container with most water using two pointers. We start with pointers at the array ends, calculate the area between them, and keep track of the maximum area found. We then move the pointer pointing to the smaller height inward to try to find a larger area. This repeats until the pointers meet. The execution table tracks each step, pointer positions, heights, width, area, max area, and which pointer moves. Key moments clarify why we move the smaller pointer and why the loop stops when pointers meet. The visual quiz tests understanding of max area updates and pointer movements.

Practice

1. What does the "Container With Most Water" problem ask you to find given an array of heights?

easy

A. The maximum area formed between two lines representing container walls.

B. The minimum height in the array.

C. The sum of all heights in the array.

D. The difference between the tallest and shortest lines.

Solution

1. Step 1: Understand the problem statement

   The problem asks to find two lines that together with the x-axis form a container that holds the most water.

2. Step 2: Identify what to maximize

   The area between two lines is width (distance between lines) times the height (minimum of the two lines). We want the maximum such area.

3. Final Answer:

   The maximum area formed between two lines representing container walls. -> Option A

4. Quick Check:

   Max area = max water container [OK]

Hint: Look for two lines maximizing min height * distance [OK]

Common Mistakes:

• Thinking it's about sum of heights
• Confusing max height with max area
• Ignoring the distance between lines

2. Which of the following JavaScript code snippets correctly initializes two pointers for the Container With Most Water problem?

easy

A. let left = 1, right = heights.length;

B. let left = -1, right = heights.length + 1;

C. let left = heights.length, right = 0;

D. let left = 0, right = heights.length - 1;

Solution

1. Step 1: Identify correct pointer initialization

   We start with left pointer at index 0 and right pointer at last index (length - 1).

2. Step 2: Check each option

   let left = 0, right = heights.length - 1; correctly sets left = 0 and right = heights.length - 1. Others use invalid indices.

3. Final Answer:

   let left = 0, right = heights.length - 1; -> Option D

4. Quick Check:

   Start pointers at array ends [OK]

Hint: Start pointers at array ends: 0 and length-1 [OK]

Common Mistakes:

• Using invalid indices outside array bounds
• Starting both pointers at same position
• Confusing length with last index

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

function maxArea(height) {
  let left = 0, right = height.length - 1;
  let max = 0;
  while (left < right) {
    const area = Math.min(height[left], height[right]) * (right - left);
    max = Math.max(max, area);
    if (height[left] < height[right]) {
      left++;
    } else {
      right--;
    }
  }
  return max;
}

console.log(maxArea([1,8,6,2,5,4,8,3,7]));

medium

A. 56

B. 49

C. 64

D. 72

Solution

1. Step 1: Trace the two-pointer approach

   Start with left=0 (height=1), right=8 (height=7), area = min(1,7)*8=8. Max=8.

2. Step 2: Move pointers and update max

   Since height[left]

3. Final Answer:

   49 -> Option B

4. Quick Check:

   Max area for input = 49 [OK]

Hint: Move pointer at smaller height inward to find max area [OK]

Common Mistakes:

• Calculating area incorrectly using max height
• Not updating max area properly
• Moving wrong pointer in the loop

4. Identify the bug in this JavaScript function for Container With Most Water:

function maxArea(height) {
  let left = 0, right = height.length - 1;
  let max = 0;
  while (left < right) {
    const area = Math.min(height[left], height[right]) * (right - left);
    max = Math.max(max, area);
    if (height[left] < height[right]) {
      left++;
    } else {
      right++;
    }
  }
  return max;
}

medium

A. The right pointer should decrement (right--) instead of increment (right++).

B. The area calculation should use max instead of min height.

C. The max variable should be initialized to Infinity.

D. The loop condition should be left < right, not left <= right.

Solution

1. Step 1: Check pointer movement logic

   The right pointer is incorrectly incremented (right++), which moves it out of array bounds.

2. Step 2: Correct pointer movement

   When height[left] >= height[right], right pointer should move left (right--) to find a potentially larger area.

3. Final Answer:

   The right pointer should decrement (right--) instead of increment (right++). -> Option A

4. Quick Check:

   Right pointer moves left to reduce width [OK]

Hint: Right pointer moves left (decrement) to find max area [OK]

Common Mistakes:

• Using right++ instead of right--
• Loop condition allowing left == right
• Incorrect area calculation using max height

5. Given an array of heights, how would you modify the Container With Most Water algorithm to also return the indices of the two lines forming the container with the maximum water?

hard

A. Sort the array and return indices of the tallest two lines.

B. Return the first two indices always, as they form the max container.

C. Track indices when updating max area and return them along with max area.

D. Use a nested loop to check all pairs and return the last pair found.

Solution

1. Step 1: Add variables to track indices

   Initialize variables to store left and right indices when max area updates.

2. Step 2: Update indices when max area changes

   Inside the loop, when a new max area is found, save current left and right indices.

3. Step 3: Return max area and indices

   Return an object or array containing max area and the two indices after loop ends.

4. Final Answer:

   Track indices when updating max area and return them along with max area. -> Option C

5. Quick Check:

   Save indices on max update for output [OK]

Hint: Save indices when max area updates during pointer moves [OK]

Common Mistakes:

• Returning fixed indices without checking area
• Sorting array loses original indices
• Using nested loops increases time complexity