Right Side View of Binary Tree in DSA Javascript - Build from Scratch

Right Side View of Binary Tree

📖 Scenario: Imagine you have a tree of family members, and you want to see only the people who are visible when you look at the tree from the right side.

🎯 Goal: You will build a program that shows the right side view of a binary tree. This means you will list the nodes you see when looking at the tree from the right side, level by level.

📋 What You'll Learn

Create a binary tree using nodes with val, left, and right properties

Use a variable to keep track of the current level while traversing the tree

Write a function to find the right side view of the binary tree

Print the array of node values visible from the right side

💡 Why This Matters

🌍 Real World

Right side view of a binary tree helps in visualizing hierarchical data from a specific perspective, useful in UI trees, organizational charts, and decision trees.

💼 Career

Understanding tree traversal and views is important for software engineers working with data structures, algorithms, and system design.

1

Create the Binary Tree

Create a binary tree with a root node called root. The root node should have val 1, a left child with val 2, and a right child with val 3. The left child of the root should have a right child with val 5, and the right child of the root should have a right child with val 4.

DSA Javascript

// Create the binary tree nodes and link them
// Your code here

Hint

Use objects with val, left, and right properties to build the tree.

2

Set Up Level Tracking Variable

Create a variable called rightView and set it to an empty array. This will store the values of nodes visible from the right side.

DSA Javascript

const root = {
  val: 1,
  left: {
    val: 2,
    left: null,
    right: { val: 5, left: null, right: null }
  },
  right: {
    val: 3,
    left: null,
    right: { val: 4, left: null, right: null }
  }
};

// Create an empty array called rightView
// Your code here

Hint

This array will hold the visible node values from the right side.

3

Write the Right Side View Function

Write a function called rightSideView that takes root as input. Use a helper function called dfs inside it that takes a node and level. Traverse the tree depth-first, and if the current level is equal to the length of rightView, add the node.val to rightView. First visit the right child, then the left child. Call dfs(root, 0) inside rightSideView. Finally, return rightView.

DSA Javascript

const root = {
  val: 1,
  left: {
    val: 2,
    left: null,
    right: { val: 5, left: null, right: null }
  },
  right: {
    val: 3,
    left: null,
    right: { val: 4, left: null, right: null }
  }
};

const rightView = [];

// Write the rightSideView function with dfs helper
// Your code here

Hint

Use depth-first search, visit right child first, then left child, and add node values when first visiting a new level.

4

Print the Right Side View

Call rightSideView(root) and print the result using console.log.

DSA Javascript

const root = {
  val: 1,
  left: {
    val: 2,
    left: null,
    right: { val: 5, left: null, right: null }
  },
  right: {
    val: 3,
    left: null,
    right: { val: 4, left: null, right: null }
  }
};

const rightView = [];

function rightSideView(root) {
  function dfs(node, level) {
    if (!node) return;
    if (level === rightView.length) {
      rightView.push(node.val);
    }
    dfs(node.right, level + 1);
    dfs(node.left, level + 1);
  }
  dfs(root, 0);
  return rightView;
}

// Print the right side view of the tree
// Your code here

Hint

Use console.log(rightSideView(root)) to print the visible nodes.

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