Left Side View of Binary Tree in DSA Javascript

Mental Model

We want to see the nodes visible when looking at the tree from the left side, which means the first node at each level.

Analogy: Imagine standing on the left side of a tall building with many floors. You only see the first window on each floor from your side, even if there are more windows behind it.

      1
     / \
    2   3
   / \   \
  4   5   6

Left side view: 1 -> 2 -> 4 -> null

Dry Run Walkthrough

Input: Binary tree: 1 with left child 2 and right child 3; 2 has children 4 and 5; 3 has right child 6

Goal: Find the leftmost node at each level to form the left side view

Step 1: Start at root node 1, add it to the view as first level's leftmost

Level 0: [1]
Left side view so far: 1

Why: Root is always visible from the left side

Step 2: Move to level 1, nodes are 2 and 3; add 2 as leftmost node

Level 1: [2, 3]
Left side view so far: 1 -> 2

Why: At level 1, node 2 is the first visible from left

Step 3: Move to level 2, nodes are 4, 5, and 6; add 4 as leftmost node

Level 2: [4, 5, 6]
Left side view so far: 1 -> 2 -> 4

Why: At level 2, node 4 is the first visible from left

Result:

1 -> 2 -> 4 -> null

Annotated Code

DSA Javascript

class TreeNode {
  constructor(val = 0, left = null, right = null) {
    this.val = val;
    this.left = left;
    this.right = right;
  }
}

function leftSideView(root) {
  if (!root) return [];
  const result = [];
  const queue = [root];

  while (queue.length > 0) {
    const levelSize = queue.length;
    for (let i = 0; i < levelSize; i++) {
      const node = queue.shift();
      if (i === 0) result.push(node.val); // first node at this level
      if (node.left) queue.push(node.left); // add left child
      if (node.right) queue.push(node.right); // add right child
    }
  }
  return result;
}

// Driver code
const root = new TreeNode(1,
  new TreeNode(2, new TreeNode(4), new TreeNode(5)),
  new TreeNode(3, null, new TreeNode(6))
);
const view = leftSideView(root);
console.log(view.join(' -> ') + ' -> null');

if (!root) return [];

handle empty tree edge case

const queue = [root];

initialize queue for level order traversal

const levelSize = queue.length;

determine number of nodes at current level

for (let i = 0; i < levelSize; i++) {

iterate over all nodes at current level

const node = queue.shift();

remove node from front of queue to process

if (i === 0) result.push(node.val);

add first node of level to left side view

if (node.left) queue.push(node.left);

enqueue left child for next level

if (node.right) queue.push(node.right);

enqueue right child for next level

Output

1 -> 2 -> 4 -> null

Complexity Analysis

Time: O(n) because we visit each node exactly once during the level order traversal

Space: O(n) because in the worst case the queue can hold all nodes at the last level

vs Alternative: Compared to a recursive DFS approach, this BFS approach naturally processes nodes level by level, making it straightforward to pick the first node at each level without extra bookkeeping

Edge Cases

Empty tree (root is null)

Returns an empty list since there are no nodes to view

DSA Javascript

if (!root) return [];

Tree with only one node

Returns a list with just that one node value

DSA Javascript

const queue = [root];

Tree where some nodes have only right children

Still correctly picks the first node at each level, even if left child is missing

DSA Javascript

if (node.left) queue.push(node.left);

When to Use This Pattern

When you need to find the visible nodes from the left side of a tree, use level order traversal and pick the first node at each level to get the left side view.

Common Mistakes

Mistake: Adding all nodes at each level instead of only the first node
Fix: Only add the node value when processing the first node at each level (i === 0)

Mistake: Using preorder DFS without tracking levels properly
Fix: Use BFS or track levels carefully in DFS to ensure only the leftmost node per level is added

Summary

Finds the first visible node at each level when looking at a binary tree from the left side.

Use it when you want to see the leftmost nodes of each level in a tree.

The key insight is to do a level order traversal and pick the first node at each level.

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