Tree Traversal Preorder Root Left Right in DSA Javascript - Execution Trace

Concept Flow - Tree Traversal Preorder Root Left Right

Start at Root Node

↓

Visit Node: Process Data

↓

Traverse Left Subtree

↓

Traverse Right Subtree

↓

Done

Preorder traversal visits the root node first, then recursively visits the left subtree, followed by the right subtree.

Execution Sample

DSA Javascript

function preorder(node) {
  if (!node) return;
  console.log(node.val);
  preorder(node.left);
  preorder(node.right);
}

This function prints nodes in preorder: root first, then left subtree, then right subtree.

Execution Table

Step	Operation	Node Visited	Pointer Changes	Tree State (Visual)
1	Start at root	A	Current = A	A ├─ B └─ C
2	Visit node	A	Print A	A ├─ B └─ C
3	Traverse left subtree	B	Current = B	A ├─ B └─ C
4	Visit node	B	Print B	A ├─ B └─ C
5	Traverse left subtree	D	Current = D	A ├─ B │ ├─ D │ └─ E └─ C
6	Visit node	D	Print D	A ├─ B │ ├─ D │ └─ E └─ C
7	Traverse left subtree	null	Current = null	A ├─ B │ ├─ D │ └─ E └─ C
8	Return from null	null	Back to D	A ├─ B │ ├─ D │ └─ E └─ C
9	Traverse right subtree	null	Current = null	A ├─ B │ ├─ D │ └─ E └─ C
10	Return from null	null	Back to B	A ├─ B │ ├─ D │ └─ E └─ C
11	Traverse right subtree	E	Current = E	A ├─ B │ ├─ D │ └─ E └─ C
12	Visit node	E	Print E	A ├─ B │ ├─ D │ └─ E └─ C
13	Traverse left subtree	null	Current = null	A ├─ B │ ├─ D │ └─ E └─ C
14	Return from null	null	Back to E	A ├─ B │ ├─ D │ └─ E └─ C
15	Traverse right subtree	null	Current = null	A ├─ B │ ├─ D │ └─ E └─ C
16	Return from null	null	Back to B	A ├─ B │ ├─ D │ └─ E └─ C
17	Return from B	B	Back to A	A ├─ B │ ├─ D │ └─ E └─ C
18	Traverse right subtree	C	Current = C	A ├─ B │ ├─ D │ └─ E └─ C
19	Visit node	C	Print C	A ├─ B │ ├─ D │ └─ E └─ C
20	Traverse left subtree	null	Current = null	A ├─ B │ ├─ D │ └─ E └─ C
21	Return from null	null	Back to C	A ├─ B │ ├─ D │ └─ E └─ C
22	Traverse right subtree	null	Current = null	A ├─ B │ ├─ D │ └─ E └─ C
23	Return from null	null	Back to C	A ├─ B │ ├─ D │ └─ E └─ C
24	Return from C	C	Back to A	A ├─ B │ ├─ D │ └─ E └─ C
25	Return from A	A	Traversal complete	A ├─ B │ ├─ D │ └─ E └─ C

💡 Traversal ends after visiting all nodes in preorder: root, left subtree, right subtree.

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 5	After Step 11	After Step 18	Final
Current Node	null	A	B	D	E	C	null
Printed Nodes	[]	[A]	[A, B]	[A, B, D]	[A, B, D, E]	[A, B, D, E, C]	[A, B, D, E, C]

Key Moments - 3 Insights

Why do we print the node value before traversing left and right children?

Because preorder traversal visits the root node first, as shown in execution_table rows 2, 4, 6, 12, and 19 where the node is printed before moving to children.

What happens when the current node is null during traversal?

The function returns immediately without printing or traversing further, as seen in rows 7, 9, 13, 15, 20, and 22 where traversal returns from null nodes.

How does the traversal know when to backtrack to a parent node?

When both left and right children are null or fully visited, the traversal returns to the previous call, shown in rows like 8, 10, 14, 16, 21, 23, and 24 where it returns back up the tree.

Visual Quiz - 3 Questions

Look at the execution_table, what node is visited at Step 12?

A C

B D

C E

D B

💡 Hint

Check the 'Node Visited' column at Step 12 in the execution_table.

At which step does the traversal first return from a null node?

A Step 7

B Step 8

C Step 9

D Step 10

💡 Hint

Look for the first 'Return from null' operation in the execution_table.

If the left child of node B was null, how would the printed nodes change after Step 4?

A [A, B, E, C]

B [A, B, E, D, C]

C [A, B, D, E, C]

D [A, B, C]

💡 Hint

Refer to variable_tracker and consider skipping D if B's left child is null.

Concept Snapshot

Preorder Tree Traversal:
- Visit root node first
- Recursively traverse left subtree
- Recursively traverse right subtree
- Prints nodes in Root-Left-Right order
- Stops when all nodes visited

Full Transcript

Preorder traversal visits the root node first, then the left subtree, then the right subtree. The provided JavaScript function prints the value of each node as it visits. The execution table shows each step: starting at the root, printing it, then moving to the left child, printing it, and so on. When a null child is reached, the function returns to the previous node to continue traversal. The variable tracker shows how the current node and printed nodes change over time. Key moments clarify why nodes are printed before children, what happens at null nodes, and how backtracking works. The visual quiz tests understanding of node visits, returns from null, and effects of missing children. The snapshot summarizes preorder traversal as Root-Left-Right visiting order.