Sliding Window on Arrays in DSA Javascript

Mental Model

We look at a small part of the array at a time and move this part step by step to cover the whole array.

Analogy: Imagine looking through a small window on a long fence. You see only a few fence boards at once, then slide the window to see the next few boards without looking back.

Array: [1] -> [2] -> [3] -> [4] -> [5] -> null
Window size = 3
Window covers: [1] -> [2] -> [3] ↑

Dry Run Walkthrough

Input: array: [1, 2, 3, 4, 5], window size: 3

Goal: Find the sum of each window of size 3 as it slides from start to end

Step 1: Calculate sum of first window [1, 2, 3]

[1] -> [2] -> [3] ↑ -> [4] -> [5] -> null

Why: We need the sum of the first window to start the process

Step 2: Slide window right by 1: remove 1, add 4

[2] -> [3] -> [4] ↑ -> [5] -> null

Why: Moving window forward means removing leftmost and adding next element

Step 3: Slide window right by 1: remove 2, add 5

[3] -> [4] -> [5] ↑ -> null

Why: Continue sliding window to cover all parts of array

Result:

Window sums: 6 (1+2+3), 9 (2+3+4), 12 (3+4+5)

Annotated Code

DSA Javascript

class SlidingWindow {
  static windowSums(arr, k) {
    if (arr.length < k) return [];
    let result = [];
    let windowSum = 0;
    // Calculate sum of first window
    for (let i = 0; i < k; i++) {
      windowSum += arr[i];
    }
    result.push(windowSum);
    // Slide window from start to end
    for (let i = k; i < arr.length; i++) {
      windowSum += arr[i] - arr[i - k];
      result.push(windowSum);
    }
    return result;
  }
}

// Driver code
const arr = [1, 2, 3, 4, 5];
const k = 3;
const sums = SlidingWindow.windowSums(arr, k);
console.log('Window sums:', sums.join(', '));

for (let i = 0; i < k; i++) { windowSum += arr[i]; }

Calculate sum of the first window of size k

for (let i = k; i < arr.length; i++) { windowSum += arr[i] - arr[i - k]; result.push(windowSum); }

Slide window by removing left element and adding new right element, update sums

Output

Window sums: 6, 9, 12

Complexity Analysis

Time: O(n) because we calculate the sum for each window by updating the previous sum in constant time

Space: O(n) because we store the sums of all windows in the result array

vs Alternative: Naive approach sums each window from scratch in O(k) time, leading to O(n*k) total, which is slower than sliding window's O(n)

Edge Cases

window size larger than array length

Returns empty array because no window can fit

DSA Javascript

if (arr.length < k) return [];

window size equals array length

Returns single sum of entire array

DSA Javascript

for (let i = 0; i < k; i++) { windowSum += arr[i]; }

window size is 1

Returns array itself as sums of single elements

DSA Javascript

for (let i = k; i < arr.length; i++) { windowSum += arr[i] - arr[i - k]; }

When to Use This Pattern

When you need to process all subarrays or parts of fixed size efficiently, use sliding window to avoid repeated work.

Common Mistakes

Mistake: Recalculating sum of each window from scratch inside the loop
Fix: Use previous window sum, subtract the element leaving window, add the new element entering window

Mistake: Not handling case when window size is larger than array length
Fix: Add a guard to return empty result if window size is too big

Summary

Calculates values over a moving fixed-size part of an array efficiently.

Use when you need to find sums, averages, or other aggregates over all subarrays of fixed length.

The key is to update the window sum by removing the left element and adding the new right element instead of recalculating.

Practice

1. What is the main purpose of the sliding window technique when working with arrays?

easy

A. To find the maximum element in the entire array

B. To sort the array elements in ascending order

C. To reverse the array elements in place

D. To efficiently process subarrays of fixed size without recomputing everything

Solution

1. Step 1: Understand the sliding window concept

   The sliding window technique moves a fixed-size window over the array to process subarrays efficiently.

2. Step 2: Compare with other options

   Sorting, reversing, or finding max in the entire array are different operations not related to sliding window.

3. Final Answer:

   To efficiently process subarrays of fixed size without recomputing everything -> Option D

4. Quick Check:

   Sliding window = efficient fixed-size subarray processing [OK]

Hint: Sliding window moves fixed-size subarray to save work [OK]

Common Mistakes:

• Confusing sliding window with sorting or reversing
• Thinking it processes the whole array at once
• Assuming it finds max without window size

2. Which of the following is the correct syntax to initialize a sliding window sum for the first k elements in JavaScript?

easy

A. let sum = arr.slice(0, k).reduce((a, b) => a + b, 0);

B. let sum = arr.reduce((a, b) => a + b, 0);

C. let sum = arr.slice(k).reduce((a, b) => a + b, 0);

D. let sum = arr.splice(0, k).reduce((a, b) => a + b, 0);

Solution

1. Step 1: Understand how to get first k elements

   Using arr.slice(0, k) extracts the first k elements without modifying the array.

2. Step 2: Sum the elements correctly

   Using reduce((a, b) => a + b, 0) sums all elements in the sliced array.

3. Final Answer:

   let sum = arr.slice(0, k).reduce((a, b) => a + b, 0); -> Option A

4. Quick Check:

   slice(0,k) + reduce sum = correct initialization [OK]

Hint: Use slice(0,k) to get first window, then reduce to sum [OK]

Common Mistakes:

• Using reduce on whole array instead of first k elements
• Using splice which modifies the original array
• Slicing from k to end instead of 0 to k

3. What will be the output of the following code?

const arr = [1, 3, 2, 6, -1, 4, 1, 8, 2];
const k = 5;
let maxSum = 0;
let windowSum = 0;

// Initialize first window sum
for(let i = 0; i < k; i++) {
  windowSum += arr[i];
}
maxSum = windowSum;

// Slide the window
for(let i = k; i < arr.length; i++) {
  windowSum += arr[i] - arr[i - k];
  if(windowSum > maxSum) maxSum = windowSum;
}
console.log(maxSum);

medium

A. 18

B. 17

C. 16

D. 19

Solution

1. Step 1: Calculate initial window sum for first 5 elements

   Sum of [1,3,2,6,-1] = 1+3+2+6-1 = 11

2. Step 2: Slide window and update sums

   Next windows and sums:
   Remove 1, add 4: 11 - 1 + 4 = 14
   Remove 3, add 1: 14 - 3 + 1 = 12
   Remove 2, add 8: 12 - 2 + 8 = 18 (maxSum updated to 18)
   Remove 6, add 2: 18 - 6 + 2 = 14

3. Step 3: Find maxSum

   Max sum found is 18

4. Final Answer:

   18 -> Option A

5. Quick Check:

   Max sliding window sum = 18 [OK]

Hint: Update sum by subtracting left, adding right element [OK]

Common Mistakes:

• Not updating maxSum correctly
• Adding instead of subtracting old element
• Wrong initial sum calculation

4. Identify the bug in the following sliding window code that finds the maximum sum of subarrays of size k:

function maxSlidingWindowSum(arr, k) {
  let maxSum = 0;
  let windowSum = 0;
  for(let i = 0; i <= k; i++) {
    windowSum += arr[i];
  }
  maxSum = windowSum;
  for(let i = k; i < arr.length; i++) {
    windowSum += arr[i] - arr[i - k];
    if(windowSum > maxSum) maxSum = windowSum;
  }
  return maxSum;
}

medium

A. The subtraction in the second loop is incorrect

B. The first loop should run while i < k, not i <= k

C. maxSum should be initialized to Number.MIN_VALUE

D. The function does not handle empty arrays

Solution

1. Step 1: Check the first loop range

   The first loop runs from i = 0 to i <= k, which means it accesses arr[k], an out-of-bound index for window size k.

2. Step 2: Correct the loop condition

   The loop should run while i < k to sum exactly k elements starting from index 0.

3. Final Answer:

   The first loop should run while i < k, not i <= k -> Option B

4. Quick Check:

   Loop range for first window = i < k [OK]

Hint: Loop for first window sums exactly k elements: i < k [OK]

Common Mistakes:

• Using <= k causes out-of-bounds error
• Ignoring array length checks
• Incorrect initialization of maxSum

5. Given an array of integers and a number k, how would you find the length of the longest subarray with sum less than or equal to k using the sliding window technique?

hard

A. Calculate prefix sums and find max subarray sum using Kadane's algorithm

B. Sort the array and use binary search to find subarrays with sum ≤ k

C. Expand the window by moving right pointer and shrink from left when sum exceeds k, track max length

D. Use nested loops to check all subarrays and pick the longest with sum ≤ k

Solution

1. Step 1: Use two pointers to create a sliding window

   Start with both pointers at the beginning, expand right pointer to add elements to sum.

2. Step 2: Shrink window from left when sum exceeds k

   If sum > k, move left pointer forward to reduce sum until sum ≤ k again, tracking max window length.

3. Step 3: Track the maximum length of valid windows

   Keep updating max length whenever sum ≤ k during expansion and shrinking.

4. Final Answer:

   Expand the window by moving right pointer and shrink from left when sum exceeds k, track max length -> Option C

5. Quick Check:

   Sliding window with two pointers and sum check = Expand the window by moving right pointer and shrink from left when sum exceeds k, track max length [OK]

Hint: Move right to expand, left to shrink when sum > k [OK]

Common Mistakes:

• Using sorting or binary search which doesn't apply here
• Using nested loops causing O(n²) time
• Confusing Kadane's algorithm with sum limit problem