Trie vs Hash Map for Prefix Matching in DSA Javascript - Visual Comparison

Concept Flow - Trie vs Hash Map for Prefix Matching

Start with prefix

↓

Return matched words

No↓

Traverse Trie from root

↓

For each char in prefix

↓

No match found

Yes↓

Move to child node

↓

After prefix end

↓

Collect all words below node

↓

Return matched words

This flow shows how prefix matching works differently in a Hash Map and a Trie: Hash Map checks keys starting with prefix, Trie traverses nodes for each prefix character then collects words.

Execution Sample

DSA Javascript

const words = ['cat', 'car', 'dog'];
const prefix = 'ca';
// Hash Map keys: 'cat', 'car', 'dog'
// Trie nodes: c -> a -> t, r
// Find words starting with 'ca'

This code sets up words and a prefix, then uses both Hash Map and Trie to find words starting with 'ca'.

Execution Table

Step	Operation	Data Structure	State/Pointer Changes	Visual State
1	Build Hash Map keys	Hash Map	Keys added: 'cat', 'car', 'dog'	{"cat":true, "car":true, "dog":true}
2	Build Trie nodes	Trie	Insert 'cat': root->c->a->t (end node) Insert 'car': root->c->a->r (end node) Insert 'dog': root->d->o->g (end node)	root ├─ c │ └─ a │ ├─ t (end) │ └─ r (end) └─ d └─ o └─ g (end)
3	Hash Map prefix check	Hash Map	Check keys starting with 'ca'	Matches found: ['cat', 'car']
4	Trie prefix traversal	Trie	Traverse root->c->a	At node 'a' under 'c'
5	Trie collect words	Trie	Collect words below node 'a': 'cat', 'car'	Collected words: ['cat', 'car']
6	Return results	Both	Return matched words	Output: ['cat', 'car']
7	End	Both	No more operations	Process complete

💡 All words processed and matched words returned for prefix 'ca'

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	Final
Hash Map keys	{}	{"cat":true, "car":true, "dog":true}	{"cat":true, "car":true, "dog":true}	{"cat":true, "car":true, "dog":true}	{"cat":true, "car":true, "dog":true}	{"cat":true, "car":true, "dog":true}	{"cat":true, "car":true, "dog":true}
Trie nodes	root empty	root empty	root with c->a->t, c->a->r, d->o->g	same	pointer at node 'a' under 'c'	words collected: ['cat', 'car']	same
Matched words	[]	[]	[]	['cat', 'car']	['cat', 'car']	['cat', 'car']	['cat', 'car']
Current Trie node	root	root	root	root	node 'a' under 'c'	node 'a' under 'c'	node 'a' under 'c'

Key Moments - 3 Insights

Why does the Trie traversal stop after reaching the node for the last prefix character?

Because the Trie stores words as paths, once we reach the node for the last prefix character (step 4), all words starting with that prefix are below this node. We then collect all words from here (step 5). This is shown in execution_table rows 4 and 5.

How does the Hash Map find words starting with a prefix without a tree structure?

The Hash Map checks all keys to see which start with the prefix (step 3). It does not store characters separately, so it scans keys directly. This is less efficient for large data but simpler to implement.

What is the visual difference between Trie and Hash Map states after building them?

The Trie visually shows nodes connected by characters forming branches (step 2), while the Hash Map is a flat collection of keys (step 1). This difference is clear in the Visual State column of execution_table rows 1 and 2.

Visual Quiz - 3 Questions

Look at the execution_table at step 4, which node does the Trie traversal pointer reach?

A Node 'a' under 'c'

B Node 't' under 'a'

C Root node

D Node 'd' under root

💡 Hint

Check the 'State/Pointer Changes' and 'Visual State' columns at step 4 in execution_table

At which step does the Hash Map find all keys starting with the prefix?

A Step 5

B Step 2

C Step 3

D Step 6

💡 Hint

Look at the 'Operation' column for Hash Map prefix check in execution_table

If the prefix was 'do', what would the Trie pointer be after traversal?

A Node 'g' under 'o'

B Node 'o' under 'd'

C Node 'a' under 'c'

D Root node

💡 Hint

Refer to the Trie structure in execution_table step 2 and the traversal logic in concept_flow

Concept Snapshot

Trie vs Hash Map for Prefix Matching:
- Trie stores words as paths of characters (nodes).
- Hash Map stores full words as keys.
- Trie traversal follows prefix chars node-by-node.
- Hash Map scans keys for prefix matches.
- Trie is efficient for large datasets with shared prefixes.
- Hash Map is simpler but less efficient for prefix queries.

Full Transcript

This visual execution compares how Trie and Hash Map find words starting with a prefix. First, both data structures are built: Hash Map stores full words as keys, Trie builds nodes for each character. For prefix matching, Hash Map checks keys starting with the prefix directly, while Trie traverses nodes for each prefix character. After reaching the last prefix node in Trie, it collects all words below. The execution table shows each step, pointer positions, and the visual state of data structures. Key moments clarify why Trie traversal stops at the prefix end, how Hash Map scans keys, and the visual difference between structures. The quiz tests understanding of pointer positions and steps. The snapshot summarizes the main differences and use cases.

Practice

1. Which data structure is generally more efficient for prefix matching in a large set of strings?

easy

A. Linked List, because it allows sequential access

B. Hash Map, because it stores keys with constant time lookup

C. Array, because it stores elements in order

D. Trie, because it stores prefixes explicitly and allows fast prefix search

Solution

1. Step 1: Understand prefix matching requirement

   Prefix matching means finding all strings that start with a given prefix efficiently.

2. Step 2: Compare Trie and Hash Map for prefix search

   Trie stores prefixes explicitly, allowing quick traversal to all words with that prefix. Hash Map does not store prefixes, so it requires checking all keys or additional structures.

3. Final Answer:

   Trie, because it stores prefixes explicitly and allows fast prefix search -> Option D

4. Quick Check:

   Prefix search = Trie [OK]

Hint: Trie stores prefixes explicitly, ideal for prefix search [OK]

Common Mistakes:

• Thinking hash map can do prefix search directly
• Confusing prefix matching with exact key lookup
• Assuming arrays or linked lists are efficient for prefix search

2. Which of the following is the correct way to check if a prefix exists in a Trie node in JavaScript?

easy

A. if (prefix in trieNode) { ... }

B. if (trieNode.hasOwnProperty(prefix)) { ... }

C. if (trieNode[prefix]) { ... }

D. if (trieNode.contains(prefix)) { ... }

Solution

1. Step 1: Understand how to check keys in JavaScript objects

   The 'in' operator checks if a property exists in an object or its prototype chain.

2. Step 2: Compare options for checking prefix in Trie node

   if (prefix in trieNode) { ... } uses 'prefix in trieNode', which correctly checks if the prefix key exists. if (trieNode.hasOwnProperty(prefix)) { ... } uses hasOwnProperty which is valid but less common for prefix check. if (trieNode[prefix]) { ... } checks truthiness which can fail if value is falsy. if (trieNode.contains(prefix)) { ... } uses a non-existent method.

3. Final Answer:

   if (prefix in trieNode) { ... } -> Option A

4. Quick Check:

   Use 'in' operator to check keys [OK]

Hint: Use 'in' operator to check keys in objects [OK]

Common Mistakes:

• Using non-existent 'contains' method
• Checking property truthiness instead of existence
• Confusing hasOwnProperty with 'in' operator

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

const trie = {};
function insert(word) {
  let node = trie;
  for (const char of word) {
    if (!(char in node)) node[char] = {};
    node = node[char];
  }
  node.isEnd = true;
}

insert('cat');
insert('car');
insert('dog');

console.log('c' in trie, 'a' in trie['c'], 't' in trie['c']['a'], trie['c']['a']['t'].isEnd);

medium

A. true true true true

B. true true false undefined

C. true false false undefined

D. false false false undefined

Solution

1. Step 1: Trace insertions of words into the trie

   Inserting 'cat' creates nodes c -> a -> t with isEnd true at 't'. Inserting 'car' adds r under c -> a. Inserting 'dog' adds d -> o -> g separately.

2. Step 2: Check existence of keys and isEnd property

   'c' exists in trie, 'a' exists under 'c', 't' exists under 'a', and 't' node has isEnd true from 'cat' insertion.

3. Final Answer:

   true true true true -> Option A

4. Quick Check:

   All keys and isEnd exist as expected [OK]

Hint: Trace each insertion step-by-step [OK]

Common Mistakes:

• Assuming 't' node missing after insertions
• Confusing isEnd property placement
• Not updating node reference inside loop

4. The following code attempts to check if a prefix exists in a Trie but does not work correctly. What is the bug?

function startsWith(trie, prefix) {
  let node = trie;
  for (const char of prefix) {
    if (!node[char]) return false;
    node = node[char];
  }
  return true;
}

medium

A. It incorrectly returns false if a node exists but is falsy

B. It does not check if the prefix is a complete word

C. It should use 'char in node' instead of '!node[char]'

D. It does not handle empty prefix input

Solution

1. Step 1: Analyze the condition '!node[char]'

   This condition fails if node[char] exists but is falsy (like an empty object or false), causing incorrect false return.

2. Step 2: Suggest correct key existence check

   Using 'char in node' correctly checks if the key exists regardless of value truthiness.

3. Final Answer:

   It should use 'char in node' instead of '!node[char]' -> Option C

4. Quick Check:

   Use 'in' operator to check keys, not truthiness [OK]

Hint: Check key existence with 'in', not truthiness [OK]

Common Mistakes:

• Using falsy check instead of key existence
• Confusing prefix existence with complete word check
• Ignoring empty prefix edge case

5. You want to implement a prefix search that returns all words starting with a given prefix from a large dictionary. Which approach is best and why?

// Approach 1: Use a Hash Map storing all words as keys
// Approach 2: Use a Trie storing words character by character
// Approach 3: Use an array and filter words by prefix
// Approach 4: Use a sorted array and binary search for prefix

hard

A. Approach 4, because binary search on sorted array quickly finds prefix range

B. Approach 2, because Trie allows efficient prefix traversal and retrieval

C. Approach 3, because filtering arrays is simple and fast for large data

D. Approach 1, because Hash Map has constant time lookup for prefixes

Solution

1. Step 1: Evaluate each approach for prefix search

   Hash Map (Approach 1) cannot do prefix search efficiently as keys are exact. Array filter (Approach 3) is slow for large data. Sorted array with binary search (Approach 4) helps but retrieving all matches requires scanning range.

2. Step 2: Understand Trie advantages

   Trie (Approach 2) stores prefixes explicitly, allowing fast traversal to all words sharing the prefix, making it best for prefix search in large datasets.

3. Final Answer:

   Approach 2, because Trie allows efficient prefix traversal and retrieval -> Option B

4. Quick Check:

   Prefix search efficiency = Trie [OK]

Hint: Trie stores prefixes explicitly, best for prefix search [OK]

Common Mistakes:

• Assuming hash map supports prefix search
• Ignoring performance cost of filtering large arrays
• Overestimating binary search for prefix retrieval