feat(book/array): sliding window pattern

Author: amejiarosario

.gitignore

@@ -86,6 +86,7 @@ local.properties
 ######################
 # Windows image file caches
 Thumbs.db
+*Zone.Identifier
 
 # Folder config file
 Desktop.ini

book/content/part02/array.asc

@@ -298,13 +298,13 @@ To sum up, the time complexity of an array is:
 
 ==== Array Patterns for Solving Interview Questions
 
-Many programming problems involves manipulating arrays. Here are some patterns that can help you improve your problem solving skills.
+Many programming problems involve manipulating arrays. Here are some patterns that can help you improve your problem-solving skills.
 
 ===== Two Pointers Pattern
 
-Usually we use one pointer to navigate each element in an array. However, there are times when having two pointers (left/right, low/high) comes handy. Let's do examples.
+Usually, we use one pointer to navigate each element in an array. However, there are times when having two pointers (left/right, low/high) comes in handy. Let's do some examples.
 
-*AR-A*) _Given a sorted array of integers, find two numbers that add up to target t and return their values._
+*AR-A*) _Given a sorted `array` of integers, find two numbers that add up to a `target` and return their values._
 
 .Examples
 [source, javascript]
@@ -316,7 +316,7 @@ twoSum([ -3, -2, -1, 1, 1,  3,  4], -4); // [-3, -1] // (-3 -1 = -4)
 
 **Solutions:**
 
-One naive solution would be use two pointers in a nested loop:
+One naive solution would be to use two pointers in a nested loop:
 
 .Solution 1: Brute force
 [source, javascript]
@@ -331,9 +331,9 @@ function twoSum(arr, target) {
 
 The runtime of this solution would be `O(n^2)`. Because of the nested loops. Can we do better? We are not using the fact that the array is SORTED!
 
-We can use two pointers but this time we will traverse the array only once. One starting from the left side and the other from the right side.
+We can use two pointers: one pointer starting from the left side and the other from the right side.
 
-Depending on if the the sum is bigger or smaller than target, we move right or left pointer. If the sum is equal to target we return the values at the current left or right pointer.
+Depending on whether the sum is bigger or smaller than the target, we move right or left. If the sum is equal to the target, we return the current left and right pointer's values.
 
 .Solution 1: Two Pointers
 [source, javascript]
@@ -352,11 +352,125 @@ function twoSum(arr, target) {
 
 These two pointers have a runtime of `O(n)`.
 
-REMEMBER: This technique only works for sorted arrays. If the array was not sorted, you would have to sort it first or choose another approach.
+WARNING: This technique only works for sorted arrays. If the array was not sorted, you would have to sort it first or choose another approach.
 
 ===== Sliding Windows Pattern
 
-TBD
+The sliding window pattern is similar to the two pointers. The difference is that the distance between the left and right pointer is always the same. Also, the numbers don't need to be sorted. Let's do an example!
+
+*AR-B*) _Find the max sum of an array of integers, only taking `k` items from the right and left side sequentially._
+_*Constraints*: `k` won't exceed the number of elements `n`: `1 <= k <= n`._
+
+.Examples
+[source, javascript]
+----
+maxSum([1,2,3], 3); // 6 // (1 + 2 + 3 = 6)
+maxSum([1,1,1,1,200,1], 3); // 202 // (1 + 200 + 1 = 202)
+maxSum([3, 10, 12, 4, 7, 2, 100, 1], 3); // 104 // (3 + 1 + 100 = 104)
+maxSum([1,200,1], 1); // 6 // (1 + 2 + 3 = 6)
+----
+
+Let's take `[3, 10, 12, 4, 7, 2, 100, 1], k=3` as an example.
+
+There are multiple ways to solve this problem. Before applying the sliding window, let's consider this other algorithm:
+
+*Backtracking algorithm*
+
+- We have two initial choices: going left with `3` or right with `1`.
+- We can take the first element from the left side `3`; from there, we can keep going left with `10` or right `1`.
+- If we go right with `1` on the right side, next, we have two options from the right side `100` or `10`.
+- If we go with `100`, then we compute the sum `3 + 1 + 100 = 104`.
+- Repeat with other combinations and keep track of the max sum.
+
+How many combinations can we form? 2^k, since in the worst-case k is n, then we have a runtime of `2^n`!
+
+// image::max-sum-backtracking.png[max sum with backtracking]
+
+We can also visualize all the options as follows. If you add up the numbers from the top to bottom, you get the result for all combinations:
+
+[graphviz, max-sum-sliding-window-red, png]
+....
+graph G {
+    0 -- 3
+    0 -- 1
+
+    3 -- 10
+    3 -- a1
+
+    10 -- 12
+    10 -- b1
+
+    a1 -- a10
+    a1 -- 100
+
+    1 -- a3
+    1 -- a100
+
+    a3 -- b10
+    a3 -- b100
+
+    a100 -- b3
+    a100 -- 2
+
+    1, a1, b1 [label = 1 color = red]
+    10, a10, b10 [label = 10 color = red]
+    3, a3, b3 [label = 3 color = red]
+    100, a100, b100 [label = 100 color = red]
+
+    12 -- res1 [color = gray]
+    b1 -- res2 [color = gray]
+    a10 -- res3 [color = gray]
+    100 -- res4 [color = gray]
+    b10 -- res5 [color = gray]
+    b100 -- res6 [color = gray]
+    b3 -- res7 [color = gray]
+    2 -- res8 [color = gray]
+
+    res1 [label = "Sum: 25", shape=plaintext, fontcolor=gray]
+    res2 [label = "Sum: 14", shape=plaintext, fontcolor=gray]
+    res3 [label = "Sum: 14", shape=plaintext, fontcolor=gray]
+    res4 [label = "Sum: 104", shape=plaintext, fontcolor=gray]
+    res5 [label = "Sum: 14", shape=plaintext, fontcolor=gray]
+    res6 [label = "Sum: 104", shape=plaintext, fontcolor=gray]
+    res7 [label = "Sum: 104", shape=plaintext, fontcolor=gray]
+    res8 [label = "Sum: 103", shape=plaintext, fontcolor=gray]
+}
+....
+
+
+Notice that many elements on the middle branches (in red color) have the same numbers but in a different order, so the sums oscillate between 104 and 14. That's why this algorithm is not very optimal for this problem.
+
+*Sliding window algorithm*
+
+Another approach is using sliding windows. Since the sum always has `k` elements, we can compute the cumulative sum for k first elements from the left. Then, we slide the "window" to the right and remove one from the left until we cover all the right items. In the end, we would have all the possible combinations without duplicated work.
+
+Check out the following illustration:
+
+image::max-sum-sliding-window.png[sliding window for arrays]
+
+Here's the implementation:
+
+[source, javascript]
+----
+function maxSum(arr, k) {
+  let left = k - 1;
+  let right = arr.length -1;
+  let sum = 0;
+  for (let i = 0; i < k; i++) sum += arr[i];
+  let max = sum;
+
+  for (let i = 0; i < k; i++) {
+    sum += arr[right--] - arr[left--];
+    max = Math.max(max, sum);
+  }
+
+  return max;
+};
+----
+
+The difference between the two pointers pattern and the sliding windows, it's that we move both pointers at the same time to keep the length of the window the same.
+
+The runtime for this code is: `O(k)`. We move the window k times. Since `k <= n`, the final runtime is `O(n)`.
 
 ==== Practice Questions
 (((Interview Questions, Arrays)))