complete tree traversal docs

Author: amejiarosario

book/book.adoc

@@ -80,10 +80,11 @@ include::chapters/tree.adoc[]
 // (g)
 include::chapters/tree--binary-search-tree.adoc[]
 
-include::chapters/tree--binary-tree-traversal.adoc[]
+include::chapters/tree--search.adoc[]
 
 include::chapters/tree--self-balancing-rotations.adoc[]
 
+
 :leveloffset: +1
 
 include::chapters/tree--avl.adoc[]

book/chapters/tree--binary-tree-traversal.adoc

@@ -1,10 +1,10 @@
 = Binary Tree Traversal
 
-There are different ways to visit all the nodes or search for a value in a binary tree. Tree traversal implementations are often recursive since it's more elegant and concise. Let's explore them.
+As mentioned before, there are different ways to visit all the nodes or search for a value in a binary tree. On this section we are going to focus on depth-first tree traversal. The implementations are recursive since it's more elegant and concise. Let's explore them.
 
 == In Order Traversal
 
-If you tree happens to be a binary search tree (BST), then could use "in order" traversal to get the values sorted in ascending order.
+If you tree happens to be a binary search tree (BST), then could use "in order" traversal to get the values sorted in ascending order. To accomplish this, you have to visit the nodes in a `left-root-right` order.
 
 If we have the following tree:
 ----
@@ -17,7 +17,7 @@ If we have the following tree:
 3
 ----
 
-In-order traverval will return `[3, 4, 5, 10, 15, 30, 40]`.
+In-order traverval will return `3, 4, 5, 10, 15, 30, 40`.
 
 Check out the implementation:
 
@@ -29,42 +29,6 @@ include::{codedir}/data-structures/trees/binary-search-tree.js[tag=inOrderTraver
 
 This function goes recursively to the leftmost element and then yield that node, then we go to the right child (if any) and repeat the process. This will get us the values ordered.
 
-Note the asterisk (`*`) in front of the function means that this functino is a generator that yield values.
-
-.JavaScript Generators
-****
-
-JavaScript generators were added as part of ES6, they allow process possibly expensive operations one by one. You can convert any function into a generator by adding the asterisk in front and `yield`ing a value.
-
-Then you can use `next()` to get the value and also `done` to know if it's the last value. Here are some examples:
-
-[source, javascript]
-----
-function* dummyIdMaker() {
-  yield 0;
-  yield 1;
-  yield 2;
-}
-
-const generator = dummyIdMaker()
-
-// getting values
-console.log(generator.next()); // ↪️ {value: 0, done: false}
-console.log(generator.next()); // ↪️ {value: 1, done: false}
-console.log(generator.next()); // ↪️ {value: 2, done: false}
-console.log(generator.next()); // ↪️ {value: undefined, done: true}
-
-// iterating with for..of loops
-for(const n of dummyIdMaker()) {
-  console.log(n);
-}
-
-// converting generator to an array
-console.log(Array.from(dummyIdMaker())); // [0, 1, 2]
-----
-
-****
-
 == Pre Order Traversal
 
 Pre-order traveral visits nodes in this order `root-left-right` recursively.
@@ -77,7 +41,7 @@ Pre-order traveral visits nodes in this order `root-left-right` recursively.
 .Pre-order traversal implementation
 [source, javascript]
 ----
-include::{codedir}/data-structures/trees/binary-search-tree.js[tag=inOrderTraversal, indent=0]
+include::{codedir}/data-structures/trees/binary-search-tree.js[tag=preOrderTraversal, indent=0]
 ----
 
 If we have the following tree:
@@ -91,7 +55,7 @@ If we have the following tree:
 3
 ----
 
-Pre-order traverval will return `[10, 5, 4, 3, 30, 15, 40]`.
+Pre-order traverval will return `10, 5, 4, 3, 30, 15, 40`.
 
 == Post-order Traversal
 
@@ -119,4 +83,4 @@ If we have the following tree:
 3
 ----
 
-Post-order traverval will return `[3, 4, 5, 15, 40, 30, 10]`.
+Post-order traverval will return `3, 4, 5, 15, 40, 30, 10`.

book/chapters/tree--search.adoc

@@ -0,0 +1,105 @@
+= Tree Search & Traversal
+
+So far we covered, how to insert/delete/search values in a binary search tree (BST).
+However, not all binary trees are BST, so there are other ways to look for values or visit all nodes in a certain order.
+
+If we have the following tree:
+----
+         10
+       /    \
+      5      30
+    /       /  \
+   4       15   40
+ /
+3
+----
+
+Depending on what traversal methods we used we will have a different visiting order.
+
+.Tree traversal methods
+- Breadth-first traversal (a.k.a level order traversal): `10, 5, 30, 4, 15, 40, 3`
+- Depth-first traversal
+** In-order (left-root-right): `3, 4, 5, 10, 15, 30, 40`
+** Pre-order (root-left-right): `10, 5, 4, 3, 30, 15, 40`
+** Post-order (left-right-root): `3, 4, 5, 15, 40, 30, 10`
+
+Why do we care? Well, there are certain problems that you solve more optimally using one or another traversal method. For instance to get the size of a subtree, finding maximums/minimums, and so on.
+
+Let's cover Breadth-first search (BFS) and Depth-first search (DFS).
+
+== Breadth-First Search
+
+Breadth-first search goeas wide (breadth) before going deep. Hence, the name. In other words, it goes level by level. It visits all the inmediate nodes or children and then move on to the children's children.
+Let's how can we implement it!
+
+.Breath-First Search (BFS) Implementation
+[source, javascript]
+----
+include::{codedir}/data-structures/trees/binary-search-tree.js[tag=bfs,indent=0]
+----
+
+As you see, the BFS uses a <<Queue>> data structure. We enqueue all the children of the current node and then dequeue them as we visit them.
+
+Note the asterisk (`*`) in front of the function means that this function is a generator that yield values.
+
+.JavaScript Generators
+****
+
+JavaScript generators were added as part of ES6, they allow process possibly expensive operations one by one. You can convert any function into a generator by adding the asterisk in front and `yield`ing a value.
+
+Then you can use `next()` to get the value and also `done` to know if it's the last value. Here are some examples:
+
+[source, javascript]
+----
+function* dummyIdMaker() {
+  yield 0;
+  yield 1;
+  yield 2;
+}
+
+const generator = dummyIdMaker()
+
+// getting values
+console.log(generator.next()); // ↪️ {value: 0, done: false}
+console.log(generator.next()); // ↪️ {value: 1, done: false}
+console.log(generator.next()); // ↪️ {value: 2, done: false}
+console.log(generator.next()); // ↪️ {value: undefined, done: true}
+
+// iterating generator values with for..of loops
+for(const n of dummyIdMaker()) {
+  console.log(n);
+}
+
+// converting a generator to an array
+console.log(Array.from(dummyIdMaker())); // [0, 1, 2]
+----
+
+****
+
+== Depth-First Search
+
+Depth-First search goes deep before going wide. It means, that starting for the root it goes as deep as it can until it found a leaf node (node without children), then it visits all the remaing nodes that were in the path.
+
+.Depth-First Search (DFS) Implementation with a Stack
+[source, javascript]
+----
+include::{codedir}/data-structures/trees/binary-search-tree.js[tag=dfs,indent=0]
+----
+
+This is a iterative implementation of a DFS using an <<Stack>>.
+It's almost identical to the BFS but instead of using a <<Queue>> we usa a Stack.
+We can also implement it as recursive functions are we are going to see in the <<Binary Tree Traversal>> section.
+
+
+:leveloffset: +1
+
+include::tree--binary-tree-traversal.adoc[]
+
+:leveloffset: -1
+
+
+
+
+
+
+

notes.md

@@ -1,7 +1,8 @@
 # Roadmap
+- [x] Writeup on balancing trees
+- [ ] `BinaryTree` implementation on its own. So far, we only have BST.
 - [ ] TreeSet should be able to store objects. Does it need a comparator? on BST in case node's values are not just numbers but also objects.
 - [ ] Refactor LinkedList.remove(). It's doing to much maybe it can be refactor in terms of removeByPosition and indexOf
-- [ ] Writeup on balancing trees
 - [ ] More algorithm and datastructres! Greedy, Divide and Conquer etc.
 - [ ] Algorithms visualizations like https://bost.ocks.org/mike/algorithms/
 

src/data-structures/trees/binary-search-tree.js

@@ -164,9 +164,10 @@ class BinarySearchTree {
   }
   // end::combine[]
 
+  // tag::bfs[]
   /**
    * Breath-first search for a tree (always starting from the root element).
-   *
+   * @yields {BinaryTreeNode}
    */
   * bfs() {
     const queue = new Queue();
@@ -181,11 +182,13 @@ class BinarySearchTree {
       if (node.right) { queue.add(node.right); }
     }
   }
+  // end::bfs[]
 
+  // tag::dfs[]
   /**
    * Depth-first search for a tree (always starting from the root element)
-   *
    * @see preOrderTraversal Similar results to the pre-order transversal.
+   * @yields {BinaryTreeNode}
    */
   * dfs() {
     const stack = new Stack();
@@ -200,14 +203,14 @@ class BinarySearchTree {
       if (node.left) { stack.add(node.left); }
     }
   }
+  // end::dfs[]
 
   // tag::inOrderTraversal[]
   /**
    * In-order traversal on a tree: left-root-right.
-   *
    * If the tree is a BST, then the values will be sorted in ascendent order
-   *
    * @param {BinaryTreeNode} node first node to start the traversal
+   * @yields {BinaryTreeNode}
    */
   * inOrderTraversal(node = this.root) {
     if (node && node.left) { yield* this.inOrderTraversal(node.left); }
@@ -220,9 +223,8 @@ class BinarySearchTree {
   /**
    * Pre-order traversal on a tree: root-left-right.
    * Similar results to DFS
-   *
    * @param {BinaryTreeNode} node first node to start the traversal
-   * @see dfs similar results to the breath first search
+   * @yields {BinaryTreeNode}
    */
   * preOrderTraversal(node = this.root) {
     yield node;
@@ -234,8 +236,8 @@ class BinarySearchTree {
   // tag::postOrderTraversal[]
   /**
    * Post-order traversal on a tree: left-right-root.
-   *
    * @param {BinaryTreeNode} node first node to start the traversal
+   * @yields {BinaryTreeNode}
    */
   * postOrderTraversal(node = this.root) {
     if (node.left) { yield* this.postOrderTraversal(node.left); }