Container With Most Water in DSA Javascript - Practice Problems & Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of Two-Pointer Approach for Container With Most Water

What is the output of the following JavaScript code that finds the maximum water container area?

DSA Javascript

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

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

A 36

B 56

C 48

D 49

💡 Hint

Think about the widest container with the shortest height limiting the water.

The maximum area is 49, formed between the lines at index 1 (height 8) and index 8 (height 7), width 7, so 7 * 7 = 49.

🧠 Conceptual

intermediate

Understanding the Two-Pointer Strategy

Why does the two-pointer approach move the pointer with the smaller height when searching for the maximum container area?

A Because moving the smaller height pointer might find a taller line to increase area.

B Because moving the larger height pointer always decreases the area.

C Because moving any pointer randomly will eventually find the max area.

D Because the smaller height pointer is always at the start of the array.

💡 Hint

Consider what limits the water container height.

The container's height is limited by the shorter line, so moving the smaller height pointer may find a taller line and potentially increase area.

❓ Predict Output

advanced

Output of Modified Container With Most Water Code

What is the output of this modified JavaScript code that tries to find the maximum water container area?

DSA Javascript

function maxArea(height) {
  let maxArea = 0;
  for (let i = 0; i < height.length; i++) {
    for (let j = i + 1; j < height.length; j++) {
      const width = j - i;
      const currentHeight = Math.min(height[i], height[j]);
      const currentArea = width * currentHeight;
      if (currentArea > maxArea) {
        maxArea = currentArea;
      }
    }
  }
  return maxArea;
}

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

A 49

B 64

C 56

D 36

💡 Hint

This is a brute force approach checking all pairs.

The brute force approach checks all pairs and finds the maximum area 49, same as the two-pointer method but less efficient.

🔧 Debug

advanced

Identify the Error in Container With Most Water Code

What error does the following JavaScript code produce when run?

DSA Javascript

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

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

A Throws TypeError due to invalid array access

B Returns 0 because width becomes zero

C Returns 49 correctly

D Infinite loop because left can equal right and pointers don't move properly

💡 Hint

Check the loop condition and pointer movement when left equals right. Does it terminate?

The code returns 49 correctly. The loop condition 'left <= right' allows an extra iteration when left == right (width=0), but since height[left] < height[right] is false, right-- executes, making left > right, and the loop terminates properly. No infinite loop occurs.

🚀 Application

expert

Maximum Water Container with Height Updates

Given an array of heights representing vertical lines, you can update the height of one line once. Which approach efficiently finds the maximum container area after one height update?

A Use two-pointer approach once, then try updating each line and re-run two-pointer for each update

B Use segment trees or binary indexed trees to update heights and query max area efficiently

C Use brute force to check all pairs and all possible single updates, then find max area

D Sort the array and pick the two tallest lines ignoring their positions

💡 Hint

Think about data structures that support fast updates and queries.

Segment trees or binary indexed trees allow efficient updates and queries on ranges, making it possible to find max container area after height updates without recomputing everything.

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