Frequency Counter Pattern Using Hash Map in DSA Javascript - Execution Trace

Concept Flow - Frequency Counter Pattern Using Hash Map

Start with empty hash map

↓

For each element in input

↓

Check if element in hash map?

No→Add element with count 1

↓

Increment count

↓

Move to next element

↓

End

↓

Hash map with frequencies ready

We start with an empty hash map, then for each element in the input, we check if it exists in the map. If not, add it with count 1; if yes, increment its count. Repeat until all elements are processed.

Execution Sample

DSA Javascript

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

This code counts how many times each character appears in the array using a hash map.

Execution Table

Step	Operation	Current Element	Hash Map State	Action	Visual State
1	Start	-	{}	Initialize empty hash map	{}
2	Process element	'a'	{}	Add 'a' with count 1	{'a': 1}
3	Process element	'b'	{'a': 1}	Add 'b' with count 1	{'a': 1, 'b': 1}
4	Process element	'a'	{'a': 1, 'b': 1}	Increment 'a' count to 2	{'a': 2, 'b': 1}
5	Process element	'c'	{'a': 2, 'b': 1}	Add 'c' with count 1	{'a': 2, 'b': 1, 'c': 1}
6	Process element	'b'	{'a': 2, 'b': 1, 'c': 1}	Increment 'b' count to 2	{'a': 2, 'b': 2, 'c': 1}
7	Process element	'a'	{'a': 2, 'b': 2, 'c': 1}	Increment 'a' count to 3	{'a': 3, 'b': 2, 'c': 1}
8	End	-	{'a': 3, 'b': 2, 'c': 1}	All elements processed	{'a': 3, 'b': 2, 'c': 1}

💡 All elements in the array have been processed, frequency counts are complete.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	After Step 7	Final
freq	{}	{'a':1}	{'a':1, 'b':1}	{'a':2, 'b':1}	{'a':2, 'b':1, 'c':1}	{'a':2, 'b':2, 'c':1}	{'a':3, 'b':2, 'c':1}	{'a':3, 'b':2, 'c':1}
current element	-	'a'	'b'	'a'	'c'	'b'	'a'	-

Key Moments - 3 Insights

Why do we check if the element exists in the hash map before incrementing?

Because if the element is not yet in the hash map, we must add it with count 1. If we try to increment without checking, it would cause an error or incorrect count. See steps 2 and 3 in the execution_table where new elements are added.

What happens if the input array is empty?

The loop does not run, so the hash map remains empty as shown in step 1 and step 8. The final frequency map is empty.

Why do we use (freq[char] || 0) + 1 to update counts?

This expression means: if freq[char] exists, use its value; if not, use 0. Then add 1. This avoids errors and correctly initializes counts. See steps 2 and 4 for examples.

Visual Quiz - 3 Questions

Look at the execution_table at step 5, what is the hash map state after processing element 'c'?

A {'a': 3, 'b': 2, 'c': 1}

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

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

D {'a': 1, 'b': 1, 'c': 1}

💡 Hint

Check the 'Visual State' column in execution_table row for step 5.

At which step does the count of 'a' become 3?

A Step 7

B Step 4

C Step 6

D Step 3

💡 Hint

Look at the 'Action' and 'Hash Map State' columns for when 'a' count increases.

If the input array was ['a', 'a', 'a'], how would the final hash map look?

A {'a': 1}

B {'a': 3}

C {}

D {'a': 2}

💡 Hint

Refer to variable_tracker and execution_table to see how counts accumulate.

Concept Snapshot

Frequency Counter Pattern Using Hash Map:
- Initialize empty hash map {}
- For each element in input:
  - If element not in map, add with count 1
  - Else increment existing count
- Result: hash map with element frequencies
- Useful for counting occurrences efficiently

Full Transcript

The Frequency Counter Pattern uses a hash map to count how many times each element appears in a list. We start with an empty map. For each element, we check if it is already in the map. If not, we add it with count 1. If yes, we increase its count by 1. This continues until all elements are processed. The final map shows the frequency of each element. This pattern helps solve problems where counting occurrences is needed, like checking if two arrays have the same frequency of elements or finding duplicates.

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