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

Concept Flow - Right Side View of Binary Tree

Start at root node

↓

Initialize queue with root

↓

While queue not empty

↓

Process all nodes at current level

↓

For each node: enqueue left child if exists

↓

For each node: enqueue right child if exists

↓

Record last node value of this level

↓

Repeat for next level

↓

Return collected right side view values

We start from the root and use a queue to visit nodes level by level. At each level, we record the last node's value, which is visible from the right side.

Execution Sample

DSA Javascript

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

This code collects the rightmost node's value at each level of the binary tree using a breadth-first search.

Execution Table

Step	Operation	Node Visited	Queue State	Right Side View Collected	Visual Tree State
1	Initialize queue with root	1	[1]	[]	1 / \ 2 3 / \ 4 5
2	Process level 1 (size=1)	1	[]	[1]	1 / \ 2 3 / \ 4 5
3	Enqueue children of node 1	1	[2, 3]	[1]	1 / \ 2 3 / \ 4 5
4	Process level 2 (size=2)	2	[3]	[1]	1 / \ 2 3 / \ 4 5
5	Enqueue children of node 2	2	[3, 4]	[1]	1 / \ 2 3 / \ 4 5
6	Process level 2 (continued)	3	[4]	[1, 3]	1 / \ 2 3 / \ 4 5
7	Enqueue children of node 3	3	[4, 5]	[1, 3]	1 / \ 2 3 / \ 4 5
8	Process level 3 (size=2)	4	[5]	[1, 3]	1 / \ 2 3 / \ 4 5
9	Node 4 has no children to enqueue	4	[5]	[1, 3]	1 / \ 2 3 / \ 4 5
10	Process level 3 (continued)	5	[]	[1, 3, 5]	1 / \ 2 3 / \ 4 5
11	Node 5 has no children to enqueue	5	[]	[1, 3, 5]	1 / \ 2 3 / \ 4 5
12	Queue empty, end	-	[]	[1, 3, 5]	1 / \ 2 3 / \ 4 5

💡 Queue is empty, all levels processed, right side view collected

Variable Tracker

Variable	Start	After Step 2	After Step 6	After Step 10	Final
queue	[1]	[]	[4]	[]	[]
result	[]	[1]	[1,3]	[1,3,5]	[1,3,5]
size	-	1	2	2	-
node visited	-	1	3	5	-

Key Moments - 3 Insights

Why do we record the last node's value at each level?

Because the last node visited at each level is the one visible from the right side. See execution_table rows 2, 6, and 10 where the right side view is updated.

Why do we enqueue left child before right child if we want the right side view?

We enqueue left then right to maintain normal level order traversal. The last node processed at each level is the rightmost node, which we record. See execution_table rows 3 and 7.

What happens when the queue becomes empty?

It means all nodes have been processed and the right side view is complete. See execution_table row 12 where the queue is empty and the algorithm ends.

Visual Quiz - 3 Questions

Look at the execution_table at step 6, what is the right side view collected so far?

A [1, 2]

B [1]

C [1, 3]

D []

💡 Hint

Check the 'Right Side View Collected' column at step 6 in the execution_table.

At which step does the queue become empty?

A Step 12

B Step 8

C Step 10

D Step 6

💡 Hint

Look at the 'Queue State' column in the execution_table to find when it is [].

If we changed the tree so node 3 had no right child, what would be the last value added to the right side view?

A 5

B 4

C 3

D 2

💡 Hint

Consider the last node visited at the last level in the modified tree, referencing the visual tree state.

Concept Snapshot

Right Side View of Binary Tree:
- Use level order traversal (BFS) with a queue
- At each level, record the last node's value
- Enqueue left then right children
- Continue until queue is empty
- Result is list of rightmost nodes per level

Full Transcript

The right side view of a binary tree is found by visiting nodes level by level from left to right and recording the last node at each level. We start with the root in a queue. While the queue is not empty, we process all nodes at the current level. For each node, we add its children to the queue, left child first then right child. After processing a level, we record the last node's value seen at that level. We repeat this until all levels are processed and the queue is empty. The collected values form the right side view of the tree.

Practice

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

easy

A. The nodes at the deepest level of the tree

B. The nodes visible when the tree is viewed from the right side

C. All leaf nodes of the tree

D. The nodes visible when the tree is viewed from the left side

Solution

1. Step 1: Understand the view perspective

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

2. Step 2: Identify visible nodes

   Only the rightmost node at each level is visible from the right side.

3. Final Answer:

   The nodes visible when the tree is viewed from the right side -> Option B

4. Quick Check:

   Right side view = rightmost nodes at each level [OK]

Hint: Right side view shows rightmost nodes at each tree level [OK]

Common Mistakes:

• Confusing right side view with left side view
• Thinking it shows all leaf nodes
• Assuming it shows deepest nodes only

2. Which of the following JavaScript function signatures correctly represents a function to get the right side view of a binary tree?

easy

A. function rightSideView() { }

B. function rightSideView(root, result) { }

C. function rightSideView(root) { }

D. function rightSideView(tree, level) { }

Solution

1. Step 1: Check typical function signature

   The function usually takes the root node as input to start traversal.

2. Step 2: Validate options

   function rightSideView(root) { } correctly takes only the root node, which is standard for this problem.

3. Final Answer:

   function rightSideView(root) { } -> Option C

4. Quick Check:

   Function takes root node only [OK]

Hint: Function usually takes root node as single parameter [OK]

Common Mistakes:

• Adding unnecessary parameters
• Omitting root parameter
• Using unclear parameter names

3. What is the output of the following code snippet for the given binary tree?

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

const root = new TreeNode(1,
  new TreeNode(2, null, new TreeNode(5)),
  new TreeNode(3, null, new TreeNode(4))
);

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

console.log(rightSideView(root));

medium

A. [1, 3, 4]

B. [1, 2, 5]

C. [1, 3, 5]

D. [1, 2, 4]

Solution

1. Step 1: Traverse level by level and identify rightmost nodes

   Level 1: Node 1 (only node), Level 2: Nodes 2 and 3 (rightmost is 3), Level 3: Nodes 5 and 4 (rightmost is 4).

2. Step 2: Collect rightmost nodes in order

   Result array is [1, 3, 4].

3. Final Answer:

   [1, 3, 4] -> Option A

4. Quick Check:

   Rightmost nodes per level = [1, 3, 4] [OK]

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

Common Mistakes:

• Choosing leftmost nodes instead of rightmost
• Mixing node values from different levels
• Forgetting to check all nodes at a level

4. Identify the bug in the following code that attempts to find the right side view of a binary tree:

function rightSideView(root) {
  const result = [];
  const queue = [root];
  while (queue.length) {
    const size = queue.length;
    for (let i = 0; i < size; 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. It pushes the leftmost node instead of the rightmost node at each level

B. It does not check if root is null

C. It uses shift() which is inefficient

D. It pushes both left and right children in wrong order

Solution

1. Step 1: Analyze the condition for pushing node values

   The code pushes node.val when i === 0, which is the first node at each level (leftmost).

2. Step 2: Understand right side view requirement

   Right side view requires the rightmost node at each level, which is when i === size - 1.

3. Final Answer:

   It pushes the leftmost node instead of the rightmost node at each level -> Option A

4. Quick Check:

   Right side view needs last node per level, not first [OK]

Hint: Push node when i equals size-1 for right side view [OK]

Common Mistakes:

• Using i === 0 instead of i === size - 1
• Ignoring null root check
• Confusing order of child insertion

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

    1
   /
  2
 / 
3

What is the right side view output for this tree?

hard

A. [3]

B. [1]

C. [1, 3]

D. [1, 2, 3]

Solution

1. Step 1: Visualize the tree and right side view

   Since all nodes are on the left, the right side view shows these nodes as they are the only visible ones.

2. Step 2: List nodes level-wise

   Level 1: 1, Level 2: 2, Level 3: 3. All are visible from right side as no right nodes block view.

3. Final Answer:

   [1, 2, 3] -> Option D

4. Quick Check:

   Right side view includes all nodes when only left children exist [OK]

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

Common Mistakes:

• Assuming right side view is empty if no right children
• Skipping left children in right side view
• Confusing right side view with right subtree nodes only