Top 3 Patterns to Master JavaScript Problem-Solving

Introduction

As a JavaScript developer, effective problem-solving techniques are crucial for overcoming challenges and writing efficient code. In this article, we'll explore a range of tailored problem-solving techniques for JavaScript.
Whether you're a beginner or an experienced developer, these techniques are not only valuable for your day-to-day coding but also highly beneficial for interviews and technical assessments. Let's dive in and discover the strategies that will elevate your JavaScript problem-solving game.

1. Frequency counter

The frequency counter technique is a powerful approach to solving problems that involve analysing the frequency of elements in an array. One common scenario is when we need to determine how many times each element appears in the given array. To illustrate this technique, let's consider some problems and their solutions.

Problem 1: Checking Frequency of Elements
Write a function checkFrequency to check frequency of each element in an array;

Solution:

const checkFrequency = (nums) => {
  const frequencyMap = {};
  nums.forEach((num) => {
    frequencyMap[num] = frequencyMap[num] + 1 || 1;
  });
  return frequencyMap;
}

const result = checkFrequency([1, 2, 2, 1, 3, 4, 3, 4, 1]);
console.log(result); // {1: 3, 2: 2, 3: 2, 4: 2}

Problem 2: Matching Squares
Write a function called squared which accepts two arrays. The function should return true if every value in the array have it's corresponding value squared in the second array. The frequency of the numbers should be same.

Solution:

const squared = (array1, array2) => {
  if(array1.length !== array2.length) return false;

  const array1Frequency = {};
  const array2Frequency = {};

  array2.forEach((num) => {
    array2Frequency[num] = array2Frequency[num] + 1 || 1;
  });

  array1.forEach((num) => {
    array1Frequency[num] = array1Frequency[num] + 1 || 1;
  });

  return array1.every((num) => {
    return array2Frequency[num*num] === array1Frequency[num];
  });
};

const result = squared([2, 3, 4, 2], [9, 16, 4]);
console.log(result); // false

2. Mulitple pointers

The multiple pointers technique is a valuable approach for solving problems that involve searching, comparing, or traversing elements in an array. By utilizing two or more pointers that move in different directions or at different speeds, we can narrow down the search space and find solutions with improved time complexity.
Let's examine a specific problem and its solution to understand how this technique can be applied in JavaScript.

Problem 1: Finding Pair with Zero Sum
Write a function sumZero to find the pair of numbers in a given array whose sum is zero.

Solution:

const sumZero = (nums) => {
  let left = 0, right = nums.length - 1;

  while(left < right) {
    const sum = nums[left] + nums[right];
    if(sum === 0) {
      return [nums[left], nums[right]];
    } else if(sum > 0) {
      right--;
    } else {
      left++;
    }
  } 
}

const result = sumZero([-3, -2, -1, 0, 1, 2, 3, 10]);
console.log(result); // [-3, 3]

Problem 2: Counting Unique Numbers
Write a function to return the number of unique numbers present in a sorted array of numbers.

Solution:

const uniqueNumbers = (nums) => {
  if(!nums.length) return 0;

  let left = 0, right = 1;
  let count = 1;

  while(right < nums.length) {
    if(nums[left] === nums[right]) {
      right++;
    } else if(nums[left] !== nums[right]) {
      count++;
      left = right;
      right++;
    }
  }

  return count;
};

const result = uniqueNumbers([1, 2, 2, 3, 3, 3, 4, 4, 5]);
console.log(result); // 5

3. Sliding Window

The sliding window technique is a powerful strategy used for solving problems that involve finding a subset or subarray within a larger array.
By maintaining a dynamic window and sliding it across the array, we can efficiently compute sums, averages, or other metrics for subarrays of fixed lengths.

Problem 1: Finding Largest Sum of Consecutive Numbers
Write a function which accepts an array of integers and a number n. The function should calculate the largest sum of n consecutive numbers.

Solution:

const getLargestSum = (arr, num) => {
  if(arr.length < num) return null;

  let largestSum = arr.slice(0, num).reduce((a, b) => a+b);
  let lastWindowSum = largestSum;

  for(let i = 0; i < arr.length - num+1; i++) {
    lastWindowSum = lastWindowSum - arr[i] + arr[i+num];

    if(largestSum < lastWindowSum) {
      largestSum = lastWindowSum;
    }
  }
  return largestSum;
};


const result = getLargestSum([1, 2, 1, 0, 0, 3, 2], 3);
console.log(result); // 5

Conclusion

In this article, we covered three powerful strategies: the frequency counter, multiple pointers, and sliding window techniques. These techniques provide valuable tools to tackle a wide range of problems efficiently and effectively.

By mastering these problem-solving techniques in JavaScript, you'll be equipped with versatile approaches to address complex programming challenges. As you encounter different problems, these techniques will serve as valuable tools to analyze, break down, and devise efficient solutions.

Please note that the solutions provided in this article represent one approach to implementing the techniques. If you have alternative or more effective methods for solving any of the problems discussed, I encourage you to share them in the comment section below.

Additional Resources

1. Udemy Course
2. Multiple Pointers Problems
3. Sliding Window Problems