Prefix Search Using Trie in DSA Javascript - Execution Trace

Concept Flow - Prefix Search Using Trie

Start at root node

↓

For each character in prefix

↓

Check if character exists in current node's children

↓

Move to child node

↓

After last character

↓

Collect all words below current node

↓

Return list of words with prefix

Start from the root, follow each prefix character down the trie nodes. If all prefix chars exist, collect all words below that node.

Execution Sample

DSA Javascript

class TrieNode {
  constructor() {
    this.children = {};
    this.endOfWord = false;
  }
}

class Trie {
  constructor() {
    this.root = new TrieNode();
  }

  insert(word) {
    let node = this.root;
    for (const char of word) {
      if (!node.children[char]) {
        node.children[char] = new TrieNode();
      }
      node = node.children[char];
    }
    node.endOfWord = true;
  }

  startsWith(prefix) {
    let node = this.root;
    for (const char of prefix) {
      if (!node.children[char]) {
        return [];
      }
      node = node.children[char];
    }
    return this.collectAllWords(node, prefix);
  }

  collectAllWords(node, prefix) {
    let words = [];
    if (node.endOfWord) words.push(prefix);
    for (const char in node.children) {
      words = words.concat(this.collectAllWords(node.children[char], prefix + char));
    }
    return words;
  }
}

const trie = new Trie();
trie.insert("cat");
trie.insert("car");
trie.insert("cart");
trie.insert("dog");
const result = trie.startsWith("car");
console.log(result);

This code inserts words into a trie and searches for words starting with 'car'.

Execution Table

Step	Operation	Nodes in Trie	Pointer Changes	Visual State
1	Insert 'cat'	root -> c -> a -> t (endOfWord=true)	node moves from root to c, then a, then t	root └─ c └─ a └─ t*
2	Insert 'car'	root -> c -> a -> t (endOfWord=true), r (endOfWord=true)	node moves from root to c, then a, then adds r	root └─ c └─ a ├─ t* └─ r*
3	Insert 'cart'	root -> c -> a -> t (endOfWord=true), r -> t (endOfWord=true)	node moves from root to c, then a, then r, then adds t	root └─ c └─ a ├─ t* └─ r └─ t*
4	Insert 'dog'	root -> c -> a -> t (endOfWord=true), r -> t (endOfWord=true), d -> o -> g (endOfWord=true)	node moves from root to d, then o, then g	root ├─ c │ └─ a │ ├─ t* │ └─ r │ └─ t* └─ d └─ o └─ g*
5	Search prefix 'car'	Same as above	node moves root -> c -> a -> r	At node 'r' (endOfWord=true), collect words
6	Collect words under 'r'	Same as above	collect 'car' (endOfWord true), then 'cart' (from child t)	Words found: ['car', 'cart']
7	Return result	Same as above	No pointer moves	Output: ['car', 'cart']
8	End	No changes	No pointer moves	Search complete

💡 Search ends after collecting all words under prefix node 'r'

Variable Tracker

Variable	Start	After Insert 'cat'	After Insert 'car'	After Insert 'cart'	After Insert 'dog'	After Search 'car'	Final
node	root	points to 't' node of 'cat'	points to 'r' node of 'car'	points to 't' node of 'cart'	points to 'g' node of 'dog'	points to 'r' node of prefix 'car'	points to 'r' node of prefix 'car'
trie.root.children	{}	{c: TrieNode}	{c: TrieNode}	{c: TrieNode}	{c: TrieNode, d: TrieNode}	{c: TrieNode, d: TrieNode}	{c: TrieNode, d: TrieNode}
collectedWords	[]	[]	[]	[]	[]	['car', 'cart']	['car', 'cart']

Key Moments - 3 Insights

Why do we stop searching if a character in the prefix is not found in children?

Because as shown in execution_table step 5, if any prefix character is missing, the search returns empty immediately since no words can have that prefix.

How do we collect all words after reaching the prefix node?

As in step 6, we recursively visit all child nodes from the prefix node, adding words when endOfWord is true, collecting all matching words.

Why do we mark endOfWord at the last character node during insertion?

Marking endOfWord (steps 1-4) tells us which nodes represent complete words, so during collection we know which prefixes form valid words.

Visual Quiz - 3 Questions

Look at the execution_table at step 5, which node does the pointer 'node' point to after searching prefix 'car'?

A Root node

B Node 't' under 'a'

C Node 'r' under 'a'

D Node 'o' under 'd'

💡 Hint

Check execution_table row 5 under 'Pointer Changes' and 'Visual State'

At which step does the trie first contain the word 'dog'?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look at execution_table rows and see when 'd -> o -> g' nodes appear

If we search prefix 'ca' instead of 'car', how would the collected words change?

A It would return ['cat', 'car', 'cart']

B It would return ['car', 'cart'] only

C It would return ['cat'] only

D It would return []

💡 Hint

Refer to how collection works from prefix node in execution_table step 6

Concept Snapshot

Prefix Search Using Trie:
- Start at root node
- Follow each prefix character down children
- If any char missing, return empty list
- After last prefix char, collect all words below
- Use endOfWord flag to identify complete words
- Returns all words starting with given prefix

Full Transcript

This visualization shows how prefix search works in a trie. We start at the root and follow each character of the prefix down the trie nodes. If any character is missing, we stop and return no words. If all prefix characters are found, we collect all words below that node by recursively visiting children nodes and checking the endOfWord flag. The example inserts words 'cat', 'car', 'cart', and 'dog' into the trie, then searches for words starting with 'car', returning ['car', 'cart']. The execution table tracks each insertion and the search steps, showing how nodes and pointers change. The variable tracker shows how the current node pointer moves and how collected words build up. Key moments clarify why we stop early if prefix chars are missing, how collection works, and why endOfWord is important. The quiz tests understanding of pointer positions, insertion steps, and collection results. This method efficiently finds all words sharing a prefix in a set of strings.