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

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of Bottom View for a Simple Binary Tree

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

DSA Javascript

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

function bottomView(root) {
  if (!root) return [];
  let map = new Map();
  let queue = [{ node: root, hd: 0 }];
  while (queue.length) {
    let { node, hd } = queue.shift();
    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 });
  }
  return Array.from(map.entries())
    .sort((a, b) => a[0] - b[0])
    .map(entry => entry[1]);
}

// 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(bottomView(root));

A [2, 4, 1, 5]

B [2, 4, 3, 5]

C [2, 1, 3, 5]

D [4, 2, 3, 5]

💡 Hint

Remember bottom view shows the last node at each horizontal distance from left to right.

The bottom view is the set of nodes visible when the tree is viewed from the bottom.

Horizontal distances (hd) are assigned starting from root at 0, left child hd-1, right child hd+1.

Nodes at the same hd are overwritten as we traverse level-wise, so the last node at each hd is kept.

For this tree, bottom view nodes are at hd -1:2, 0:4, 1:3, 2:5.

❓ Predict Output

intermediate

Bottom View Output for a Tree with Multiple Levels

What is the bottom view output for the following binary tree?

DSA Javascript

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

function bottomView(root) {
  if (!root) return [];
  let map = new Map();
  let queue = [{ node: root, hd: 0 }];
  while (queue.length) {
    let { node, hd } = queue.shift();
    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 });
  }
  return Array.from(map.entries())
    .sort((a, b) => a[0] - b[0])
    .map(entry => entry[1]);
}

// Tree structure:
//         20
//        /  \
//      8     22
//     / \      \
//    5   3      25
//       / \     
//      10  14

const root = new Node(20);
root.left = new Node(8);
root.right = new Node(22);
root.left.left = new Node(5);
root.left.right = new Node(3);
root.right.right = new Node(25);
root.left.right.left = new Node(10);
root.left.right.right = new Node(14);

console.log(bottomView(root));

A [5, 8, 3, 14, 25]

B [5, 8, 10, 14, 25]

C [5, 10, 14, 22, 25]

D [5, 10, 3, 14, 25]

💡 Hint

Track horizontal distances and keep the last node at each distance.

Horizontal distances (hd) are assigned from root (0), left child hd-1, right child hd+1.

Bottom view keeps the last node encountered at each hd during level order traversal.

Nodes at hd -2:5, -1:10, 0:3, 1:14, 2:25.

🔧 Debug

advanced

Identify the Error in Bottom View Implementation

What error will this code produce when trying to compute the bottom view of a binary tree?

DSA Javascript

function bottomView(root) {
  if (!root) return [];
  let map = new Map();
  let queue = [{ node: root, hd: 0 }];
  while (queue.length) {
    let { node, hd } = queue.pop();
    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 });
  }
  return Array.from(map.entries())
    .sort((a, b) => a[0] - b[0])
    .map(entry => entry[1]);
}

A Infinite loop because queue never empties

B SyntaxError due to incorrect destructuring

C The output will be reversed bottom view nodes

D TypeError because node is undefined

💡 Hint

Check how queue is processed: shift vs pop affects order.

The code uses queue.pop() which removes from the end, making it a stack (DFS) instead of queue (BFS).

This changes the order nodes are processed, so bottom view nodes are overwritten differently.

The output will be bottom view nodes but in reversed order compared to correct BFS approach.

🧠 Conceptual

advanced

Understanding Horizontal Distance in Bottom View

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

A The distance of the node from the root along the horizontal axis, with left as negative and right as positive

B The vertical level of the node in the tree

C The depth of the node from the root

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

💡 Hint

Think about how left and right children affect horizontal position.

Horizontal distance (hd) is assigned starting from root as 0.

Left child decreases hd by 1, right child increases hd by 1.

This helps identify nodes aligned vertically when viewed from top or bottom.

🚀 Application

expert

Bottom View Output for Complex Tree with Overlapping Nodes

Given the binary tree below, what is the bottom view output?

DSA Javascript

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

function bottomView(root) {
  if (!root) return [];
  let map = new Map();
  let queue = [{ node: root, hd: 0 }];
  while (queue.length) {
    let { node, hd } = queue.shift();
    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 });
  }
  return Array.from(map.entries())
    .sort((a, b) => a[0] - b[0])
    .map(entry => entry[1]);
}

// Tree structure:
//           1
//         /   \
//        2     3
//       / \   / \
//      4   5 6   7
//           \     \
//            8     9

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.left = new Node(6);
root.right.right = new Node(7);
root.left.right.right = new Node(8);
root.right.right.right = new Node(9);

console.log(bottomView(root));

A [4, 2, 6, 8, 7, 9]

B [4, 2, 5, 6, 7, 9]

C [4, 2, 6, 8, 9]

D [4, 2, 6, 8, 7]

💡 Hint

Track horizontal distances carefully and note which nodes overwrite others at the same hd.

Assign horizontal distances (hd) starting from root=0.

Nodes and their hd: 4(-2), 2(-1), 6(0), 8(1), 7(1), 9(2).

At hd=1, node 8 is visited after 7, so 8 overwrites 7.

Bottom view nodes from left to right: 4, 2, 6, 8, 9.