Why Frequency Counter Pattern Using Hash Map in DSA Javascript?

The Big Idea

Discover how a simple object can save you hours of tedious counting!

The Scenario

Imagine you have a big list of words from a book, and you want to know how many times each word appears. Doing this by writing down each word and counting manually would take forever!

The Problem

Counting each word by hand or using repeated loops is slow and easy to mess up. You might miss some words or count some twice. It's hard to keep track when the list is very long.

The Solution

The Frequency Counter Pattern uses a hash map (an object in JavaScript) to count how many times each word appears quickly and without mistakes. It keeps track of counts as you go, so you only need to look at the list once.

Before vs After

✗ Before

const words = ['apple', 'banana', 'apple'];
let countApple = 0;
for (let i = 0; i < words.length; i++) {
  if (words[i] === 'apple') countApple++;
}

✓ After

const words = ['apple', 'banana', 'apple'];
const frequencyCounter = {};
for (const word of words) {
  frequencyCounter[word] = (frequencyCounter[word] || 0) + 1;
}

What It Enables

This pattern lets you quickly find how often things appear in data, making it easy to solve many problems like checking duplicates or comparing lists.

Real Life Example

When you shop online, the website counts how many times you click on each product to show you the most popular items. This counting uses the Frequency Counter Pattern behind the scenes.

Key Takeaways

Manual counting is slow and error-prone for large data.

Frequency Counter Pattern uses a hash map to count items fast and accurately.

This pattern helps solve many real-world problems involving counting and comparison.

Practice

1. What is the main purpose of using a frequency counter pattern with a hash map in JavaScript?

easy

A. To reverse the order of elements in an array

B. To sort the elements in ascending order

C. To remove duplicate items from a list

D. To count how many times each item appears in a collection

Solution

1. Step 1: Understand frequency counter pattern

   The frequency counter pattern uses a hash map to store counts of each item in a collection.

2. Step 2: Identify the purpose

   Counting occurrences helps to quickly check how many times each item appears.

3. Final Answer:

   To count how many times each item appears in a collection -> Option D

4. Quick Check:

   Frequency counter = count items [OK]

Hint: Frequency counter counts items using a hash map [OK]

Common Mistakes:

• Confusing frequency counting with sorting
• Thinking it removes duplicates instead of counting
• Assuming it reverses arrays

2. Which of the following is the correct way to initialize an empty frequency counter object in JavaScript?

easy

A. const freq = [];

B. const freq = {};

C. const freq = null;

D. const freq = 0;

Solution

1. Step 1: Identify correct data structure for frequency counter

   A frequency counter uses an object (hash map) to store keys and counts.

2. Step 2: Choose correct initialization syntax

   In JavaScript, an empty object is created with curly braces {}.

3. Final Answer:

   const freq = {}; -> Option B

4. Quick Check:

   Empty object = {} [OK]

Hint: Use {} to create empty object for frequency counter [OK]

Common Mistakes:

• Using array [] instead of object {}
• Assigning null or 0 which are not objects
• Confusing object with other data types

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

const arr = ['a', 'b', 'a', 'c', 'b', 'a'];
const freq = {};
for (const char of arr) {
  freq[char] = (freq[char] || 0) + 1;
}
console.log(freq);

medium

A. {"a": 3, "b": 2, "c": 1}

B. {"a": 1, "b": 1, "c": 1}

C. {"a": 2, "b": 3, "c": 1}

D. {"a": 3, "b": 3, "c": 1}

Solution

1. Step 1: Loop through array and count characters

   Each character's count is incremented in freq object: 'a' appears 3 times, 'b' 2 times, 'c' 1 time.

2. Step 2: Construct final frequency object

   freq = {"a": 3, "b": 2, "c": 1} after loop ends.

3. Final Answer:

   {"a": 3, "b": 2, "c": 1} -> Option A

4. Quick Check:

   Count 'a' = 3, 'b' = 2, 'c' = 1 [OK]

Hint: Count each char incrementally using freq[char] = (freq[char]||0)+1 [OK]

Common Mistakes:

• Mixing counts of 'a' and 'b'
• Not initializing counts properly
• Using arrays instead of objects for counting

4. Identify the error in the following frequency counter code and select the fix:

const arr = ['x', 'y', 'x', 'z'];
const freq = {};
for (let i = 0; i < arr.length; i++) {
  freq[arr[i]] += 1;
}
console.log(freq);

medium

A. Initialize freq[arr[i]] to 0 before adding 1

B. Change for loop to for...of loop

C. Use freq.push(arr[i]) instead of freq[arr[i]]

D. Declare freq as an array instead of object

Solution

1. Step 1: Understand the error cause

   freq[arr[i]] is undefined initially, so adding 1 causes NaN.

2. Step 2: Fix by initializing count

   Set freq[arr[i]] = 0 if undefined before adding 1.

3. Final Answer:

   Initialize freq[arr[i]] to 0 before adding 1 -> Option A

4. Quick Check:

   Initialize before increment to avoid NaN [OK]

Hint: Always initialize count to 0 before incrementing [OK]

Common Mistakes:

• Trying to push to object as if array
• Ignoring undefined initial values
• Changing loop type unnecessarily

5. Given two arrays, arr1 = [1, 2, 2, 3] and arr2 = [2, 3, 3, 4], which code snippet correctly checks if arr2 contains the same frequency of elements as arr1 using the frequency counter pattern?

hard

A. const freq1 = {};
const freq2 = {};
for (const num of arr1) freq1[num] = (freq1[num] || 0) + 1;
for (const num of arr2) freq2[num] = (freq2[num] || 0) + 1;
for (const key in freq1) {
if (freq1[key] !== freq2[key]) return false;
}
return true;

B. const freq = {};
for (const num of arr1) freq[num] = 1;
for (const num of arr2) freq[num] = 0;
return Object.values(freq).every(v => v === 0);

C. const freq = {};
for (const num of arr1) freq[num] = (freq[num] || 0) + 1;
for (const num of arr2) freq[num] -= 1;
for (const key in freq) {
if (freq[key] !== 0) return false;
}
return true;

D. const freq1 = new Map();
const freq2 = new Map();
arr1.forEach(num => freq1.set(num, (freq1.get(num) || 0) + 1));
arr2.forEach(num => freq2.set(num, (freq2.get(num) || 0) + 1));
return [...freq1.entries()].every(([key, val]) => freq2.get(key) === val);

Solution

1. Step 1: Understand frequency comparison logic

   We must count frequencies in both arrays and compare counts for each element.

2. Step 2: Analyze each code snippet

   const freq = {}; for (const num of arr1) freq[num] = (freq[num] || 0) + 1; for (const num of arr2) freq[num] -= 1; for (const key in freq) { if (freq[key] !== 0) return false; } return true; This uses a single object: increments for arr1, decrements for arr2 (NaN for extras), checks all zero. Handles extras (NaN≠0), shortages (positive≠0), overcounts (negative≠0).

3. Final Answer:

   const freq = {}; increment arr1, decrement arr2, check all zero -> Option C

4. Quick Check:

   Single freq: +arr1, -arr2, all zero? [OK]

Hint: Increment arr1 counts, decrement arr2, check all zero for same frequency [OK]

Common Mistakes:

• Not comparing all keys in both frequency counters
• Overwriting counts instead of incrementing
• Using single frequency object incorrectly