Frequency Counter Pattern Using Hash Map in DSA Javascript

Mental Model

Count how many times each item appears using a simple box to keep track.

Analogy: Imagine sorting colored balls into boxes labeled by color and counting how many balls go into each box.

Input array: [a, b, a, c, b]
Hash map (frequency counter):
{
  a: 2,
  b: 2,
  c: 1
}

Dry Run Walkthrough

Input: array: ['a', 'b', 'a', 'c', 'b']

Goal: Count how many times each letter appears in the array

Step 1: Look at first item 'a', add it to hash map with count 1

{ a: 1 }

Why: We start counting the first item

Step 2: Look at second item 'b', add it to hash map with count 1

{ a: 1, b: 1 }

Why: Add new item to count

Step 3: Look at third item 'a', increase count of 'a' to 2

{ a: 2, b: 1 }

Why: Item 'a' seen again, increase count

Step 4: Look at fourth item 'c', add it to hash map with count 1

{ a: 2, b: 1, c: 1 }

Why: New item 'c' added

Step 5: Look at fifth item 'b', increase count of 'b' to 2

{ a: 2, b: 2, c: 1 }

Why: Item 'b' seen again, increase count

Result:

{ a: 2, b: 2, c: 1 }

Annotated Code

DSA Javascript

class FrequencyCounter {
  constructor() {
    this.counts = {};
  }

  countItems(arr) {
    for (const item of arr) {
      if (this.counts.hasOwnProperty(item)) {
        this.counts[item] += 1; // increase count if item exists
      } else {
        this.counts[item] = 1; // start count for new item
      }
    }
    return this.counts;
  }
}

// Driver code
const arr = ['a', 'b', 'a', 'c', 'b'];
const counter = new FrequencyCounter();
const result = counter.countItems(arr);
console.log(result);

if (this.counts.hasOwnProperty(item)) {

check if item already counted

this.counts[item] += 1; // increase count if item exists

increment count for existing item

this.counts[item] = 1; // start count for new item

initialize count for new item

Output

{"a":2,"b":2,"c":1}

Complexity Analysis

Time: O(n) because we look at each item once to count

Space: O(n) because in worst case all items are unique and stored in hash map

vs Alternative: Compared to nested loops counting each item separately (O(n²)), this is much faster using a hash map

Edge Cases

empty array

returns empty object {} with no counts

DSA Javascript

for (const item of arr) {

array with one item

returns object with that item count 1

DSA Javascript

this.counts[item] = 1; // start count for new item

array with all identical items

returns object with one key and count equal to array length

DSA Javascript

this.counts[item] += 1; // increase count if item exists

When to Use This Pattern

When you need to count how many times things appear in a list, use the frequency counter pattern with a hash map to track counts efficiently.

Common Mistakes

Mistake: Trying to count items by nested loops causing slow performance
Fix: Use a hash map to count items in one pass

Mistake: Not initializing count for new items causing undefined errors
Fix: Always set count to 1 when item is first seen

Summary

Counts how many times each item appears using a hash map.

Use it when you need to quickly find frequency of items in a list.

The key is to store counts in a simple box (hash map) and update as you go.

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