Top View of Binary Tree in DSA Javascript - Practice Problems & Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of Top View for a Simple Binary Tree

What is the output of the top view traversal for the given binary tree?

DSA Javascript

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

function topView(root) {
  if (!root) return [];
  const map = new Map();
  const queue = [{ node: root, hd: 0 }];
  let minHd = 0, maxHd = 0;

  while (queue.length) {
    const { node, hd } = queue.shift();
    if (!map.has(hd)) {
      map.set(hd, node.data);
    }
    if (node.left) queue.push({ node: node.left, hd: hd - 1 });
    if (node.right) queue.push({ node: node.right, hd: hd + 1 });
    minHd = Math.min(minHd, hd);
    maxHd = Math.max(maxHd, hd);
  }

  const result = [];
  for (let i = minHd; i <= maxHd; i++) {
    result.push(map.get(i));
  }
  return result;
}

// Tree structure:
//       1
//      / \
//     2   3
//      \   \
//       4   5

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

console.log(topView(root));

A [1, 2, 3]

B [2, 1, 4, 5]

C [2, 1, 3, 5]

D [1, 2, 3, 4, 5]

💡 Hint

Think about horizontal distances and which nodes appear first at each horizontal distance.

The top view shows nodes visible when the tree is viewed from above. We track horizontal distances (hd) from the root (hd=0). For each hd, the first node encountered in level order is included.

Here, nodes 2, 1, 3, and 5 appear at horizontal distances -1, 0, 1, and 2 respectively. Node 4 is hidden behind node 1 from the top view.

🧠 Conceptual

intermediate

Horizontal Distance Concept in Top View

In the top view of a binary tree, what does the horizontal distance (hd) represent?

A The distance of a node from the root along the horizontal axis, where left child decreases hd by 1 and right child increases hd by 1

B The depth of a node in the tree

C The vertical level of a node from the root

D The number of nodes in the subtree rooted at that node

💡 Hint

Think about how we move left or right from the root and how that affects horizontal position.

Horizontal distance (hd) is used to track the horizontal position of nodes relative to the root. Moving left decreases hd by 1, moving right increases hd by 1.

🔧 Debug

advanced

Identify the Bug in Top View Implementation

What error will occur when running the following code snippet for top view traversal?

DSA Javascript

function topView(root) {
  if (!root) return [];
  const map = new Map();
  const queue = [{ node: root, hd: 0 }];

  while (queue.length) {
    const { node, hd } = queue.shift();
    if (!map.has(hd)) {
      map.set(hd, node.data);
    }
    if (node.left) queue.push({ node: node.left, hd: hd - 1 });
    if (node.right) queue.push({ node: node.right, hd: hd + 1 });
  }

  const result = [];
  for (let i = Math.min(...map.keys()); i <= Math.max(...map.keys()); i++) {
    result.push(map.get(i));
  }
  return result;
}

A SyntaxError due to incorrect destructuring in the while loop

B The output will be reversed because horizontal distances are swapped for left and right children

C TypeError because map.keys() is not iterable

D Runtime error because queue.push is called with undefined nodes

💡 Hint

Check how horizontal distances are assigned to left and right children.

The code assigns hd + 1 to the left child and hd - 1 to the right child, which is opposite of the correct convention. This causes the top view to be mirrored horizontally.

🚀 Application

advanced

Number of Nodes in Top View

Given a binary tree with 7 nodes arranged as a perfect binary tree of height 2, how many nodes will appear in its top view?

A 3

B 4

C 7

D 5

💡 Hint

Visualize the horizontal distances of nodes in a perfect binary tree.

A perfect binary tree of height 2 has nodes at horizontal distances -2, -1, 0, 1, 2. The top view includes one node per horizontal distance, so 5 nodes appear.

❓ Predict Output

expert

Output of Top View for Complex Tree with Overlapping Nodes

What is the output of the top view traversal for the following binary tree?

DSA Javascript

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

function topView(root) {
  if (!root) return [];
  const map = new Map();
  const queue = [{ node: root, hd: 0 }];
  let minHd = 0, maxHd = 0;

  while (queue.length) {
    const { node, hd } = queue.shift();
    if (!map.has(hd)) {
      map.set(hd, node.data);
    }
    if (node.left) queue.push({ node: node.left, hd: hd - 1 });
    if (node.right) queue.push({ node: node.right, hd: hd + 1 });
    minHd = Math.min(minHd, hd);
    maxHd = Math.max(maxHd, hd);
  }

  const result = [];
  for (let i = minHd; i <= maxHd; i++) {
    result.push(map.get(i));
  }
  return result;
}

// Tree structure:
//         10
//        /  \
//       20   30
//      /  \    \
//     40  60    50
//       
// Node 60 is below node 30 horizontally

const root = new Node(10);
root.left = new Node(20);
root.right = new Node(30);
root.left.left = new Node(40);
root.left.right = new Node(60);
root.right.right = new Node(50);

console.log(topView(root));

A [40, 20, 10, 30, 50]

B [40, 20, 10, 60, 50]

C [20, 10, 30, 50]

D [40, 20, 10, 30]

💡 Hint

Remember only the first node at each horizontal distance is visible from the top.

Nodes at horizontal distances: 40(-2), 20(-1), 10(0), 30(1), 50(2). Node 60 is at hd 0 but below 10, so it is hidden.