Left Side View of Binary Tree in DSA Javascript - Execution Trace

Concept Flow - Left Side View of Binary Tree

Start at root node

↓

Initialize queue with root

↓

While queue not empty

↓

Get number of nodes at current level

↓

For each node in level

↓

Dequeue node

↓

If first node in level, add to left view

↓

Enqueue left child if exists

↓

Enqueue right child if exists

↓

Repeat for all nodes in level

↓

Repeat for next level

↓

End when queue empty

↓

Return collected left view nodes

We start from the root and explore the tree level by level. At each level, we record the first node we see (the leftmost). We use a queue to keep track of nodes to visit next.

Execution Sample

DSA Javascript

function leftSideView(root) {
  if (!root) return [];
  const queue = [root];
  const leftView = [];
  while (queue.length) {
    const levelSize = queue.length;
    for (let i = 0; i < levelSize; i++) {
      const currentNode = queue.shift();
      if (i === 0) leftView.push(currentNode.val);
      if (currentNode.left) queue.push(currentNode.left);
      if (currentNode.right) queue.push(currentNode.right);
    }
  }
  return leftView;
}

This code finds the left side view of a binary tree by traversing level by level and recording the first node at each level.

Execution Table

Step	Operation	Node Visited	Queue State	Left View	Visual State
1	Initialize queue with root	1	[1]	[]	1
2	Start level 1, levelSize=1	-	[1]	[]	1
3	Dequeue node	1	[]	[]	1
4	First node at level, add to left view	1	[]	[1]	1
5	Enqueue left child	2	[2]	[1]	1 -> 2
6	Enqueue right child	3	[2,3]	[1]	1 -> 2, 3
7	Start level 2, levelSize=2	-	[2,3]	[1]	1 -> 2, 3
8	Dequeue node	2	[3]	[1]	1 -> 2, 3
9	First node at level, add to left view	2	[3]	[1,2]	1 -> 2, 3
10	Enqueue left child	4	[3,4]	[1,2]	1 -> 2 -> 4, 3
11	Enqueue right child	5	[3,4,5]	[1,2]	1 -> 2 -> 4, 3 -> 5
12	Dequeue node	3	[4,5]	[1,2]	1 -> 2 -> 4, 3 -> 5
13	Not first node, no add	3	[4,5]	[1,2]	1 -> 2 -> 4, 3 -> 5
14	Enqueue left child	null	[4,5]	[1,2]	No left child
15	Enqueue right child	6	[4,5,6]	[1,2]	1 -> 2 -> 4, 3 -> 5 -> 6
16	Start level 3, levelSize=3	-	[4,5,6]	[1,2]	1 -> 2 -> 4, 3 -> 5 -> 6
17	Dequeue node	4	[5,6]	[1,2]	1 -> 2 -> 4, 3 -> 5 -> 6
18	First node at level, add to left view	4	[5,6]	[1,2,4]	1 -> 2 -> 4, 3 -> 5 -> 6
19	Enqueue left child	null	[5,6]	[1,2,4]	No left child
20	Enqueue right child	null	[5,6]	[1,2,4]	No right child
21	Dequeue node	5	[6]	[1,2,4]	1 -> 2 -> 4, 3 -> 5 -> 6
22	Not first node, no add	5	[6]	[1,2,4]	1 -> 2 -> 4, 3 -> 5 -> 6
23	Enqueue left child	null	[6]	[1,2,4]	No left child
24	Enqueue right child	null	[6]	[1,2,4]	No right child
25	Dequeue node	6	[]	[1,2,4]	1 -> 2 -> 4, 3 -> 5 -> 6
26	Not first node, no add	6	[]	[1,2,4]	1 -> 2 -> 4, 3 -> 5 -> 6
27	Enqueue left child	null	[]	[1,2,4]	No left child
28	Enqueue right child	null	[]	[1,2,4]	No right child
29	Queue empty, end	-	[]	[1,2,4]	Final left view: 1 -> 2 -> 4

💡 Queue is empty, all nodes visited, left view collected

Variable Tracker

Variable	Start	After Step 5	After Step 11	After Step 15	After Step 18	After Step 25	Final
queue	[1]	[2,3]	[3,4,5]	[4,5,6]	[5,6]	[]	[]
leftView	[]	[1]	[1,2]	[1,2]	[1,2,4]	[1,2,4]	[1,2,4]
currentNode	1	2	3	4	5	6	-

Key Moments - 3 Insights

Why do we add the node to the left view only when it is the first node at its level?

Because the left side view shows the leftmost node visible at each level. The first node dequeued at each level is the leftmost. See execution_table rows 4, 9, and 18 where the first node at each level is added.

Why do we use a queue to traverse the tree level by level?

A queue helps us visit nodes in the order they appear in each level, from left to right. This ensures we process all nodes at one level before moving to the next. See execution_table rows 2, 7, and 16 showing queue states at each level start.

What happens if a node has no left or right child?

We simply do not enqueue anything for that child. The queue size decreases naturally as we finish nodes. See execution_table rows 14, 19, 23, and 27 where no children are enqueued.

Visual Quiz - 3 Questions

Look at the execution_table, what is the leftView array after step 9?

A [1]

B [1,2]

C [1,2,4]

D []

💡 Hint

Check the Left View column at step 9 in the execution_table.

At which step does the queue become empty, ending the traversal?

A Step 25

B Step 27

C Step 29

D Step 18

💡 Hint

Look at the Queue State column and the exit_note in the execution_table.

If the root node had no left child, how would the queue state change after step 5?

A [3]

B [2,3]

C [1]

D []

💡 Hint

See step 5 where left child is enqueued; if missing, only right child remains in queue.

Concept Snapshot

Left Side View of Binary Tree:
- Traverse tree level by level using a queue
- At each level, record the first node visited
- Enqueue left child first, then right child
- Continue until all levels processed
- Result is list of leftmost nodes per level

Full Transcript

To find the left side view of a binary tree, we start at the root and use a queue to visit nodes level by level. At each level, we note the first node we visit because it is the leftmost visible node from that side. We add this node to our left view list. We then enqueue the left child and right child of each node to process the next level. We repeat this until the queue is empty, meaning all nodes have been visited. The final list shows the nodes visible from the left side of the tree.

Practice

1. What does the "Left Side View" of a binary tree represent?

easy

A. All leaf nodes of the tree

B. Nodes visible when the tree is viewed from the right side

C. Nodes visible when the tree is viewed from the left side

D. Nodes at the deepest level of the tree

Solution

1. Step 1: Understand the view perspective

   The left side view shows nodes visible when looking at the tree from the left side.

2. Step 2: Identify visible nodes

   Only the first node at each level from the left is visible in this view.

3. Final Answer:

   Nodes visible when the tree is viewed from the left side -> Option C

4. Quick Check:

   Left side view = nodes visible from left [OK]

Hint: Think of standing on the left side and seeing nodes [OK]

Common Mistakes:

• Confusing left side view with right side view
• Including all leaf nodes instead of first nodes per level
• Thinking it shows deepest nodes only

2. Which JavaScript data structure is best suited to help implement the left side view of a binary tree using level order traversal?

easy

A. Queue

B. Stack

C. Set

D. Map

Solution

1. Step 1: Identify traversal method

   Level order traversal visits nodes level by level, left to right.

2. Step 2: Choose data structure for level order

   A queue is used to process nodes in FIFO order, perfect for level order traversal.

3. Final Answer:

   Queue -> Option A

4. Quick Check:

   Level order traversal uses queue [OK]

Hint: Use queue for breadth-first level traversal [OK]

Common Mistakes:

• Using stack which is LIFO, not suitable for level order
• Choosing set or map which don't maintain order
• Confusing queue with stack

3. What is the output of the following code that prints the left side view of the binary tree?

class Node {
  constructor(val) {
    this.val = val;
    this.left = null;
    this.right = null;
  }
}

function leftSideView(root) {
  if (!root) return [];
  const result = [];
  const queue = [root];
  while (queue.length) {
    const levelSize = queue.length;
    for (let i = 0; i < levelSize; i++) {
      const node = queue.shift();
      if (i === 0) result.push(node.val);
      if (node.left) queue.push(node.left);
      if (node.right) queue.push(node.right);
    }
  }
  return result;
}

const root = new Node(1);
root.left = new Node(2);
root.right = new Node(3);
root.left.left = new Node(4);
root.left.right = new Node(5);
root.right.right = new Node(6);

console.log(leftSideView(root));

medium

A. [1, 2, 5]

B. [1, 2, 4]

C. [1, 3, 6]

D. [1, 4, 6]

Solution

1. Step 1: Traverse level by level and pick first node

   Level 1: node 1 (first node), Level 2: node 2, Level 3: node 4

2. Step 2: Collect these nodes in result array

   Result array becomes [1, 2, 4]

3. Final Answer:

   [1, 2, 4] -> Option B

4. Quick Check:

   Left side nodes per level = [1, 2, 4] [OK]

Hint: Pick first node at each level during BFS [OK]

Common Mistakes:

• Picking right child instead of left
• Including all nodes instead of first per level
• Confusing order of nodes

4. The following code attempts to print the left side view of a binary tree but produces incorrect output. What is the main bug?

function leftSideView(root) {
  if (!root) return [];
  const result = [];
  const queue = [root];
  while (queue.length) {
    const levelSize = queue.length;
    for (let i = 0; i <= levelSize; i++) {
      const node = queue.shift();
      if (i === 0) result.push(node.val);
      if (node.left) queue.push(node.left);
      if (node.right) queue.push(node.right);
    }
  }
  return result;
}

medium

A. The for loop condition should be i < levelSize, not i <= levelSize

B. The queue should be a stack for correct traversal

C. The check for i === 0 should be i === levelSize - 1

D. The function should return result.length instead of result

Solution

1. Step 1: Analyze the for loop condition

   The loop runs from i = 0 to i <= levelSize, which means one extra iteration causing shift() on empty queue.

2. Step 2: Correct the loop condition

   It should be i < levelSize to process exactly levelSize nodes per level.

3. Final Answer:

   The for loop condition should be i < levelSize, not i <= levelSize -> Option A

4. Quick Check:

   Loop must run exactly levelSize times [OK]

Hint: Use < not <= for loop over fixed size [OK]

Common Mistakes:

• Using <= causes extra iteration and errors
• Confusing queue with stack for BFS
• Wrong index check for first node

5. Given a binary tree where some nodes only have right children, how would the left side view output look for this tree?

    1
     \
      2
       \
        3
         \
          4

hard

A. []

B. [1]

C. [4]

D. [1, 2, 3, 4]

Solution

1. Step 1: Understand left side view with only right children

   Each level has only one node, which is the right child, but also the first node at that level.

2. Step 2: Collect nodes visible from left side

   Since no left children, the right child nodes are visible from left side as they are the only nodes per level.

3. Final Answer:

   [1, 2, 3, 4] -> Option D

4. Quick Check:

   Single node per level = all nodes visible [OK]

Hint: If no left child, right child is visible from left [OK]

Common Mistakes:

• Assuming left side view is empty without left children
• Ignoring right children as visible nodes
• Thinking only left children count