feat(book/binary-tree): add right side view exercise and solution

Author: amejiarosario

book/D-interview-questions-solutions.asc

@@ -275,7 +275,7 @@ The stack contains the indexes rather than the temperatures themselves.
 [#queue-q-recent-counter]
 include::content/part02/queue.asc[tag=queue-q-recent-counter]
 
-We are asked to keep track of the request's count only within a given time window. A queue is a perfect application for this. We can add any new request to the	 Queue. Also, we need to check if the oldest element is outside the time window. If so, we remove it from the queue.
+We are asked to keep track of the request's count only within a given time window. A queue is a perfect application for this. We can add any new request to the  Queue. Also, we need to check if the oldest element is outside the time window. If so, we remove it from the queue.
 
 *Algorithm*:
 
@@ -327,7 +327,7 @@ As you can see, we opted for using a set to trade speed for memory.
 
 *Complexity Analysis*:
 
-- Time: `O(1)`. Insert/Remove from Queue is constant time. Check for body collisions is `O(1)` when using a set. If instead of a set, you traversed the snake's queue to find a collision, it would be `O(n)`.  Here`n` is the snake's max length, which is the size of the screen (height x width).
+- Time: `O(1)`. Insert/Remove from Queue is constant time. Check for body collisions is `O(1)` when using a set. If instead of a set, you traversed the snake's queue to find a collision, it would be `O(n)`.  Here`n` is the snake's max length, which is the screen size (height x width).
 - Space: `O(n + m)`. `m` is the number of food items, and `n` is the snake's maximum size (height x width).
 
 
@@ -342,7 +342,7 @@ As you can see, we opted for using a set to trade speed for memory.
 [#binary-tree-q-diameter-of-binary-tree]
 include::content/part03/tree-intro.asc[tag=binary-tree-q-diameter-of-binary-tree]
 
-We are asked to find the longest path on binary tree that might or might not pass through the root node.
+We are asked to find the longest path on a binary tree that might or might not pass through the root node.
 
 We can calculate the height (distance from root to farthest leaf) of a binary tree using this recursive function:
 
@@ -356,14 +356,14 @@ function getHeight(node) {
 }
 ----
 
-That will give use the height from furthest leaf to root. However, the problem says that it might or might not go through the root.
-In that case, we can keep track of the maximun distance (`leftHeight + rightHeight`) seen so far.
+That function will give us the height from the furthest leaf to the root. However, the problem says that it might or might not go through the root.
+In that case, we can keep track of the maximum distance (`leftHeight + rightHeight`) seen so far.
 
 *Algorithm*:
 
 - Initialize diameter to `0`
-- Recursively find the height of the tree from root.
-- Keep track of the maximun diameter length seen so far (left + right).
+- Recursively find the height of the tree from the root.
+- Keep track of the maximum diameter length seen so far (left + right).
 - Return the diameter.
 
 *Implementation*:
@@ -377,38 +377,53 @@ We are using `Math.max` to keep track of the longest diameter seen.
 
 *Complexity Analysis*:
 
-- Time: `O(n)`, where `n` is each one of the nodes on the tree. We visite each one once.
-- Space: `O(n)`. We use `O(1)` variables, but because we are using the `height` recursive function we are using the implicit call stack, thus `O(n)`.
+- Time: `O(n)`, where `n` is each of the tree nodes. We visite each one once.
+- Space: `O(n)`. We use `O(1)` variables, but because we are using the `height` recursive function, we use the implicit call stack, thus `O(n)`.
 
 
 
 
-[#binary-tree-q-diameter-of-binary-tree2]
-include::content/part03/tree-intro.asc[tag=binary-tree-q-diameter-of-binary-tree]
+[#binary-tree-q-binary-tree-right-side-view]
+include::content/part03/tree-intro.asc[tag=binary-tree-q-binary-tree-right-side-view]
+
+The first thing that might come to mind when you have to visit a tree, level by level, is BFS.
+We can visit the tree using a Queue and keep track when a level ends, and the new one starts.
 
-RESTATE REQUIREMENTS AND DESCRIPTIONS
+Since during BFS, we dequeue one node and enqueue their two children (left and right), we might have two levels (current and next one). For this problem, we need to know what the last node on the current level is.
+
+.There are several ways to solve this problem using BFS. Here are some ideas:
+- *1 Queue + Sentinel node*: we can use a special character in the `Queue` like `'*'` or `null` to indicate the level's change. So, we would start something like this `const queue = new Queue([root, '*']);`.
+- *2 Queues*: using a "special" character might be seen as hacky, so you can also opt to keep two queues: one for the current level and another for the next level.
+- *1 Queue + size tracking*: we track the Queue's `size` before the children are enqueued. That way, we know where the current level ends. We are going to implement this one.
 
 *Algorithm*:
 
-- STEP 1
-- STEP 2
-    - STEP 2.1
-    - STEP 2.2
+- Enqueue root
+- While the queue has an element
+    - Check the current size of the queue
+    - Dequeue only `size` times, and for each dequeued node, enqueue their children.
+    - Check if the node is the last one in its level and add it to the answer.
 
 *Implementation*:
 
 [source, javascript]
 ----
-include::interview-questions/diameter-of-binary-tree.js[tag=description]
-include::interview-questions/diameter-of-binary-tree.js[tag=solution]
+include::interview-questions/binary-tree-right-side-view.js[tags=description;solution]
+----
+
+This problem is also possible to be solved using DFS. The trick is to start with the right child and add it to the solution when it is the first one on its level.
+
+[source, javascript]
+----
+include::interview-questions/binary-tree-right-side-view.js[tag=dfs]
 ----
 
-IMPLEMENTATION NOTES
+The complexity of any of the BFS methods or DFS is similar.
 
 *Complexity Analysis*:
 
-- Time: `O(?)`. WHY?
-- Space: `O(?)`. WHY?
+- Time: `O(n)`. We visit every node, once.
+- Space: `O(n)`. For BFS, the worst-case space is given by the maximum *width*. That is when the binary tree is complete so that the last level would have `(n-1)/2` nodes, thus `O(n)`. For the DFS, the space complexity will be given by the tree's maximum *height*. In the worst-case, the binary tree is skewed to the right so that we will have an implicit call stack of size `n`.
 
 
 // [#linkedlist-q-FILENAME]

book/content/part02/array.asc

@@ -293,7 +293,7 @@ maxSubArray([-3, 4,-1, 2, 1, -5]); // 6 (sum [4,-1, 2, 1])
 maxSubArray([-2, 1, -3, 4, -1, 3, 1]); // 7 (sum [4,-1, 3, 1])
 ----
 
-_Seen in interviews at: Amazon, Apple, Google, Microsoft, Facebook_
+// _Seen in interviews at: Amazon, Apple, Google, Microsoft, Facebook_
 // end::array-q-max-subarray[]
 
 [source, javascript]
@@ -320,7 +320,7 @@ maxProfit([5, 10, 5, 10]) // 5 (buying at 5 and selling at 10)
 
 ----
 
-_Seen in interviews at: Amazon, Facebook, Bloomberg_
+// _Seen in interviews at: Amazon, Facebook, Bloomberg_
 // end::array-q-buy-sell-stock[]
 
 [source, javascript]

book/content/part02/linked-list.asc

@@ -301,7 +301,7 @@ mergeTwoLists(2->3->4, 1->2); // 1->2->2->3->4
 mergeTwoLists(2->3->4,null); // 2->3->4
 ----
 
-_Seen in interviews at: Amazon, Adobe, Microsoft, Google_
+// _Seen in interviews at: Amazon, Adobe, Microsoft, Google_
 // end::linkedlist-q-merge-lists[]
 
 [source, javascript]
@@ -329,7 +329,7 @@ hasSameData(hello, hel->lo); // true
 hasSameData(he->ll->o, h->i); // false
 ----
 
-_Seen in interviews at: Facebook_
+// _Seen in interviews at: Facebook_
 // end::linkedlist-q-linkedlist-same-data[]
 
 [source, javascript]

book/content/part02/queue.asc

@@ -103,7 +103,7 @@ counter.request(3100); // 1 (last requests was 100 ms ago, > 10ms, so doesn't co
 counter.request(3105); // 2 (last requests was 5 ms ago, <= 10ms, so it counts)
 ----
 
-_Seen in interviews at: Google, Bloomberg, Yandex_
+// _Seen in interviews at: Google, Bloomberg, Yandex_
 // end::queue-q-recent-counter[]
 
 
@@ -135,7 +135,7 @@ expect(snakeGame.move('L')).toEqual(2); //  2 (ate food2)
 expect(snakeGame.move('U')).toEqual(-1); // -1 (hit wall)
 ----
 
-_Seen in interviews at: Amazon, Bloomberg, Apple_
+// _Seen in interviews at: Amazon, Bloomberg, Apple_
 // end::queue-q-design-snake-game[]
 
 [source, javascript]

book/content/part02/stack.asc

@@ -106,7 +106,7 @@ isParenthesesValid('[{]}'); // false (brakets are not closed in the right order)
 isParenthesesValid('([{)}]'); // false (closing is out of order)
 ----
 
-_Seen in interviews at: Amazon, Bloomberg, Facebook, Citadel_
+// _Seen in interviews at: Amazon, Bloomberg, Facebook, Citadel_
 // end::stack-q-valid-parentheses[]
 
 [source, javascript]
@@ -135,7 +135,7 @@ dailyTemperatures([30, 28, 50, 40, 30]); // [2 (to 50), 1 (to 28), 0, 0, 0]
 dailyTemperatures([73, 69, 72, 76, 73, 100]); // [3, 1, 1, 0, 1, 100]
 ----
 
-_Seen in interviews at: Amazon, Adobe, Cisco_
+// _Seen in interviews at: Amazon, Adobe, Cisco_
 // end::stack-q-daily-temperatures[]
 
 [source, javascript]

book/content/part03/tree-intro.asc

@@ -12,7 +12,7 @@ A tree is a non-linear data structure where a node can have zero or more connect
 .Tree Data Structure: root node and descendants.
 image::image31.jpg[image,width=404,height=240]
 
-As you can see in the picture above, this data structure resembles an inverted tree hence the name. It starts with a *root* node and *branch* off with its descendants, and finally *leaves*.
+As you can see in the picture above, this data structure resembles an inverted tree, hence the name. It starts with a *root* node and *branch* off with its descendants, and finally *leaves*.
 
 ==== Implementing a Tree
 
@@ -54,17 +54,17 @@ image::image31.jpg[image]
 
 ==== Types of Binary Trees
 
-There are different kinds of trees depending on the restrictions. E.g. The trees that have two children or less are called *binary tree*, while trees with at most three children are called *Ternary Tree*. Since binary trees are most common we are going to cover them here and others in another chapter.
+There are different kinds of trees, depending on the restrictions. E.g. The trees with two children or less are called *binary tree*, while trees with at most three children are called *Ternary Tree*. Since binary trees are the most common, we will cover them here and others in another chapter.
 
 ===== Binary Tree
 (((Binary Tree)))
 (((Data Structures, Non-Linear, Binary Tree)))
-The binary restricts the nodes to have at most two children. Trees, in general, can have 3, 4, 23 or more, but not binary trees.
+The binary restricts the nodes to have at most two children. Trees can have 0, 1, 2, 7, or more, but not binary trees.
 
 .Binary tree has at most 2 children while non-binary trees can have more.
 image::image32.png[image,width=321,height=193]
 
-Binary trees are one of the most used kinds of tree, and they are used to build other data structures.
+Binary trees are one of the most used kinds of trees, and they are used to build other data structures.
 
 .Binary Tree Applications
 - <<part03-graph-data-structures#map>>
@@ -90,7 +90,7 @@ image::image33.png[image,width=348,height=189]
 (((Max-Heap)))
 (((Min-Heap)))
 (((Data Structures, Non-Linear, Binary Heap)))
-The heap (max-heap) is a type of binary tree where the parent's value is higher than the value of both children. Opposed to the BST, the left child doesn’t have to be smaller than the right child.
+The heap (max-heap) is a type of binary tree where the parent's value is higher than both children's value. Opposed to the BST, the left child doesn’t have to be smaller than the right child.
 
 .Heap vs BST
 image::image34.png[image,width=325,height=176]
@@ -118,72 +118,86 @@ indexterm:[Runtime, Logarithmic]
 // tag::binary-tree-q-diameter-of-binary-tree[]
 ===== Binary Tree Diameter
 
-*BT-1*) _Find the diameter of a binary tree. The diameter of a tree is defined as the longest possible path from two nodes (it doesn't need to include the root). The lenth of diameter is calculated by couting the number of edges on the path._
+*BT-1*) _Find the diameter of a binary tree. A tree's diameter is the longest possible path from two nodes (it doesn't need to include the root). The length of a diameter is calculated by counting the number of edges on the path._
 
 // end::binary-tree-q-diameter-of-binary-tree[]
 
-_Seen in interviews at: Facebook, Amazon, Google_
-
-Example 1:
-
-[graphviz, tree-diameter-example-1, png]
-....
-graph G {
-    1 -- 2 [color=red]
-    1 -- 3 [color=red]
-
-    2 -- 4
-    2 -- 5 [color=red]
-}
-....
-
-[source, javascript]
-----
-diameterOfBinaryTree(toBinaryTree([1,2,3,4,5])); // 3 (the path 3-1-2-5 or 3-1-2-4)
-----
-
-Example 2:
-
-[graphviz, tree-diameter-example-2, png]
-....
-graph G {
-    1
-    2
-    3
-    4
-    5
-    6
-    "null" [color=white, fontcolor = white]
-    "null." [color=white, fontcolor = white]
-    7
-    8
-    "null.." [color=white, fontcolor = white]
-    "null..." [color=white, fontcolor = white]
-    9
-
-    1 -- 2
-    1 -- 3
-
-    3 -- 4 [color=red]
-    3 -- 5 [color=red]
-
-    4 -- 6 [color=red]
-    4 -- "null." [color=white]
-
-    5 -- "null" [color=white]
-    5 -- 7 [color=red]
-
-    6 -- 8 [color=red]
-    6 -- "null.." [color=white]
-
-    7 -- "null..." [color=white]
-    7 -- 9 [color=red]
-}
-....
+// _Seen in interviews at: Facebook, Amazon, Google_
+
+// Example 1:
+// [graphviz, tree-diameter-example-1, png]
+// ....
+// graph G {
+//     1 -- 2 [color=red]
+//     1 -- 3 [color=red]
+
+//     2 -- 4
+//     2 -- 5 [color=red]
+// }
+// ....
+
+// Example 2:
+// [graphviz, tree-diameter-example-2, png]
+// ....
+// graph G {
+//     1
+//     2
+//     3
+//     4
+//     5
+//     6
+//     "null" [color=white, fontcolor = white]
+//     "null." [color=white, fontcolor = white]
+//     7
+//     8
+//     "null.." [color=white, fontcolor = white]
+//     "null..." [color=white, fontcolor = white]
+//     9
+
+//     1 -- 2
+//     1 -- 3
+
+//     3 -- 4 [color=red]
+//     3 -- 5 [color=red]
+
+//     4 -- 6 [color=red]
+//     4 -- "null." [color=white]
+
+//     5 -- "null" [color=white]
+//     5 -- 7 [color=red]
+
+//     6 -- 8 [color=red]
+//     6 -- "null.." [color=white]
+
+//     7 -- "null..." [color=white]
+//     7 -- 9 [color=red]
+// }
+// ....
+
+Examples:
 
 [source, javascript]
 ----
-diameterOfBinaryTree(toBinaryTree([1,2,3,null,null,4,5,6,null,null,7,8,null,null,9])); // 6 (the path 8-6-4-3-5-7-9)
+/*           1
+            / \
+           2   3
+          / \
+         4   5          */
+diameterOfBinaryTree(toBinaryTree([1,2,3,4,5])); // 3
+// For len 3, the path could be 3-1-2-5 or 3-1-2-4
+
+/*           1
+            / \
+           2   3
+              / \
+             4   5
+            /     \
+           6       7
+          /         \
+         8           9      */
+const array = [1,2,3,null,null,4,5,6,null,null,7,8,null,null,9];
+const tree = BinaryTreeNode.from(array);
+diameterOfBinaryTree(tree); // 6 (path: 8-6-4-3-5-7-9)
 ----
 
 Starter code:
@@ -198,17 +212,37 @@ _Solution: <<binary-tree-q-diameter-of-binary-tree>>_
 
 
 
-// tag::binary-tree-q-FILENAME[]
-===== Recent Counter
 
-*BT-2*) _._
+// tag::binary-tree-q-binary-tree-right-side-view[]
+===== Binary Tree from right side view
 
-Example:
+*BT-2*) _Imagine that you are viewing the tree from the right side. What nodes would you see?_
+
+// end::binary-tree-q-binary-tree-right-side-view[]
+
+// _Seen in interviews at: Facebook, Amazon, ByteDance (TikTok)._
+
+Examples:
 
 [source, javascript]
 ----
+/*
+ 1      <- 1 (only node on level)
+ /   \
+2     3   <- 3 (3 is the rightmost)
+ \
+  4       <- 4 (only node on level) */
+rightSideView(BinaryTreeNode.from([1, 2, 3, null, 4])); // [1, 3, 4]
+
+rightSideView(BinaryTreeNode.from([])); // []
+rightSideView(BinaryTreeNode.from([1, 2, 3, null, 5, null, 4, 6])); // [1, 3, 4, 6]
+----
 
+Starter code:
+
+[source, javascript]
+----
+include::../../interview-questions/binary-tree-right-side-view.js[tags=description;placeholder]
 ----
 
-_Seen in interviews at: X_
-// end::binary-tree-q-FILENAME[]
+_Solution: <<binary-tree-q-binary-tree-right-side-view>>_

book/interview-questions/binary-tree-right-side-view.js

@@ -0,0 +1,59 @@
+const { Queue } = require('../../src/index');
+
+// tag::description[]
+/**
+ * Find the rightmost nodes by level.
+ *
+ * @example
+ *     1      <- 1
+ *   /   \
+ *  2     3   <- 3
+ *   \
+ *    4       <- 4
+ *
+ * @param {BinaryTreeNode} root - The root of the binary tree.
+ * @returns {number[]} - array with the rightmost nodes values.
+ */
+function rightSideView(root) {
+  // end::description[]
+  // tag::placeholder[]
+  // write your code here...
+  // end::placeholder[]
+  // tag::solution[]
+  if (!root) return [];
+  const queue = new Queue([root]);
+  const ans = [];
+
+  while (queue.size) {
+    const { size } = queue;
+    for (let i = 0; i < size; i++) {
+      const node = queue.dequeue();
+      if (i === size - 1) ans.push(node.value);
+      if (node.left) queue.enqueue(node.left);
+      if (node.right) queue.enqueue(node.right);
+    }
+  }
+
+  return ans;
+  // end::solution[]
+  // tag::description[]
+}
+// end::description[]
+
+// tag::dfs[]
+function rightSideViewDfs(root) {
+  const ans = [];
+
+  const dfs = (node, level = 0) => {
+    if (!node) return;
+    if (level === ans.length) ans.push(node.value);
+    dfs(node.right, level + 1); // right side first!
+    dfs(node.left, level + 1);
+  };
+
+  dfs(root);
+  return ans;
+}
+// end::dfs[]
+
+module.exports = { rightSideView, rightSideViewDfs };

book/interview-questions/binary-tree-right-side-view.spec.js

@@ -0,0 +1,24 @@
+const { rightSideView, rightSideViewDfs } = require('./binary-tree-right-side-view');
+const { BinaryTreeNode } = require('../../src/index');
+
+[rightSideView, rightSideViewDfs].forEach((fn) => {
+  describe(`Binary Tree: ${fn.name}`, () => {
+    it('should work with null', () => {
+      const actual = null;
+      const expected = [];
+      expect(fn(actual)).toEqual(expected);
+    });
+
+    it('should work with small case', () => {
+      const actual = BinaryTreeNode.from([1, 2, 3, null, 4]);
+      const expected = [1, 3, 4];
+      expect(fn(actual)).toEqual(expected);
+    });
+
+    it('should work with other case', () => {
+      const actual = BinaryTreeNode.from([1, 2, 3, null, 5, null, 4, 6]);
+      const expected = [1, 3, 4, 6];
+      expect(fn(actual)).toEqual(expected);
+    });
+  });
+});

book/interview-questions/diameter-of-binary-tree.spec.js

@@ -2,20 +2,13 @@ const { diameterOfBinaryTree } = require('./diameter-of-binary-tree');
 const { BinaryTreeNode } = require('../../src/index');
 
 describe('Binary Tree: Diameter', () => {
-  function toBinaryTree(array, index = 0) {
-    if (index >= array.length) return null;
-    const node = new BinaryTreeNode(array[index]);
-    node.left = toBinaryTree(array, index * 2 + 1);
-    node.right = toBinaryTree(array, index * 2 + 2);
-    return node;
-  }
-
   it('should find the diameter', () => {
-    expect(diameterOfBinaryTree(toBinaryTree([1, 2, 3, 4, 5]))).toEqual(3);
+    const actual = BinaryTreeNode.from([1, 2, 3, 4, 5]);
+    expect(diameterOfBinaryTree(actual)).toEqual(3);
   });
 
   it('should find the diameter when does not pass through the root node', () => {
-    const tree = [1, 2, 3, null, null, 4, 5, 6, null, null, 7, 8, null, null, 9];
-    expect(diameterOfBinaryTree(toBinaryTree(tree))).toEqual(6);
+    const arr = [1, 2, 3, null, null, 4, 5, 6, null, null, 7, 8, null, null, 9];
+    expect(diameterOfBinaryTree(BinaryTreeNode.from(arr))).toEqual(6);
   });
 });