{"id":34410,"date":"2024-11-01T09:27:49","date_gmt":"2024-11-01T09:27:49","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=34410"},"modified":"2024-11-01T11:41:22","modified_gmt":"2024-11-01T11:41:22","slug":"javascript-coding-test-course-calculating-the-amount-of-water","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/34410\/","title":{"rendered":"JavaScript Coding Test Course, Calculating the Amount of Water"},"content":{"rendered":"

<\/p>\n

\n
\n

In this lecture, we will address the problem of ‘Calculating the Amount of Water’, which is commonly featured in coding tests, using JavaScript. This problem will provide a great opportunity to learn various algorithm design patterns and utilize arrays effectively.<\/p>\n<\/header>\n

\n

Problem Definition<\/h2>\n

The problem is to calculate the amount of water that can be collected when it rains, given an array of heights of bars. The heights of the bars are provided as each element of the array.<\/p>\n

For example, if the array is [0, 1, 0, 2, 1, 0, 1, 3, 2, 1, 2, 1]<\/code>, the amount of water that can be collected is 6<\/strong>. Visually representing how water is stored between each bar in this example is as follows:<\/p>\n

\"Water
\n<\/section>\n

\n

Approaches to Solve the Problem<\/h2>\n

There are various methods that can be used to solve this problem. The two most commonly used approaches are as follows.<\/p>\n

    \n
  1. \n

    Two Pointers Method<\/h3>\n

    This method progresses by moving two pointers inwards from both ends. Each pointer tracks the height from the left and right, allowing calculation of positions where water can accumulate.<\/p>\n<\/li>\n

  2. \n

    Dynamic Programming<\/h3>\n

    This method involves finding the tallest bar from both left and right at each position, using the shorter of the two to calculate the amount of water. However, this method has the drawback of using a lot of additional memory.<\/p>\n<\/li>\n<\/ol>\n<\/section>\n

    \n

    Solving the Problem with JavaScript<\/h2>\n

    First, let’s implement the code using the two pointers method. We will create an algorithm that starts from both ends of the array and moves towards the center to calculate the amount of water.<\/p>\n

    Code Example<\/h3>\n
    \n\nfunction trap(height) {\n    if (height.length === 0) return 0;\n\n    let left = 0;\n    let right = height.length - 1;\n    let leftMax = 0;\n    let rightMax = 0;\n    let waterTrapped = 0;\n\n    while (left < right) {\n        if (height[left] < height[right]) {\n            if (height[left] >= leftMax) {\n                leftMax = height[left];\n            } else {\n                waterTrapped += leftMax - height[left];\n            }\n            left++;\n        } else {\n            if (height[right] >= rightMax) {\n                rightMax = height[right];\n            } else {\n                waterTrapped += rightMax - height[right];\n            }\n            right--;\n        }\n    }\n\n    return waterTrapped;\n}\n<\/code>\n            <\/pre>\n
    The above function takes the height<\/code> array as input and calculates the amount of water that can be collected after it rains.<\/p>\n<\/section>\n
    \n
    Code Explanation<\/h2>\n
    Let’s take a step-by-step look at the above code:<\/p>\n
      \n
    1. Initialization<\/strong>: left<\/code> is initialized to 0, and right<\/code> is initialized to the last index of the array (length – 1). leftMax<\/code> and rightMax<\/code> store the maximum heights from their respective directions. waterTrapped<\/code> indicates the final amount of water collected.<\/li>\n
    2. Loop Execution<\/strong>: The loop runs until left<\/code> is less than right<\/code>. In each iteration, the heights from the left and right are compared to calculate the amount of water from the lower side.<\/li>\n
    3. Water Calculation<\/strong>: If the height from the left is lower, it compares the maximum height on the left with the current height to calculate the amount of water that can be stored. Similarly, the same operation is performed on the right side.<\/li>\n
    4. Return Result<\/strong>: After all loops are completed, it returns the waterTrapped<\/code> variable to output the final result.<\/li>\n<\/ol>\n<\/section>\n
      \n
      Code Testing<\/h2>\n
      Now, let’s test the algorithm we’ve written. We can verify the performance of the function through several examples like the following:<\/p>\n
      \n\nconsole.log(trap([0, 1, 0, 2, 1, 0, 1, 3, 2, 1, 2, 1])); \/\/ 6\nconsole.log(trap([4, 2, 0, 3, 2, 5])); \/\/ 9\nconsole.log(trap([])); \/\/ 0\nconsole.log(trap([1, 0, 1])); \/\/ 1\n<\/code>\n            <\/pre>\n
      Each output should match the predicted amount of water. The following results will be displayed:<\/p>\n