Emily Forst

Recursion, Part 6: Traversing Binary Trees

2017-11-01T10:31:54+00:00

Tree Traversal for Binary Trees

We’ll start with this binary tree:

         11
        /  \
       7    15
      / \   / \
     2  8  13  18

Let’s express it in JavasScript as:

const binaryTreeB = {
  value: 11, 
  left: {
    value: 7, 
    left: {
      value: 2, 
      left: null, 
      right: null
    }, 
    right: {
      value: 8, 
      left: null, 
      right: null
    }
  }, 
  right: {
    value: 15,
    left: {
      value: 13, 
      left: null, 
      right: null
    }, 
    right: {
      value: 18, 
      left: null, 
      right: null
    }
  }
};

How could we write a function that traverses this tree, and logs each node to the console? Given what we’ve learned about binary trees, give it a shot with the following function.

function logBinaryTree(tree) {
	
}
logBinaryTree(binaryTreeB)

Give it a try before looking at the following solution.

function logBinaryTree(tree) {
  console.log(tree.value);
  if (!tree.left && !tree.right) return;
  if (tree.left && tree.right) {
    return logBinaryTree(tree.left) || logBinaryTree(tree.right)
  }
}
logBinaryTree(binaryTreeB)

Let’s write a function that logs a node to the console only if it’s an integer.

const binaryTreeC = {
  value: 11, 
  left: {
    value: "a", 
    left: {
      value: "c", 
      left: null, 
      right: null
    }, 
    right: {
      value: 8, 
      left: null, 
      right: null
    }
  }, 
  right: {
    value: false,
    left: {
      value: 13, 
      left: null, 
      right: null
    }, 
    right: {
      value: "b", 
      left: null, 
      right: null
    }
  }
};

Write a function onlyIntegersTree that only logs the integer values of a binary tree.

function onlyIntegersTree(tree) {

}
onlyIntegersTree(binaryTreeC);

Give it a try before looking at the following solution.

function onlyIntegersTree(tree) {
  if (Number.isInteger(tree.value)) console.log(tree.value);
  if (!tree.left && !tree.right) return;
  if (tree.left && tree.right) {
    return onlyIntegersTree(tree.left) || onlyIntegersTree(tree.right)
  }
}
onlyIntegersTree(binaryTreeC);

Recursion, Part 5: Building Binary Trees

2017-10-31T17:35:02+00:00

Binary Search Trees

Let’s revisit one of our trees from the last post.

         11
        /  \
       7    15
      / \   / \
     2  8  13  18

const binaryTreeB = {
  value: 11, 
  left: {
    value: 7, 
    left: {
      value: 2, 
      left: null, 
      right: null
    }, 
    right: {
      value: 8, 
      left: null, 
      right: null
    }
  }, 
  right: {
    value: 15,
    left: {
      value: 13, 
      left: null, 
      right: null
    }, 
    right: {
      value: 18, 
      left: null, 
      right: null
    }
  }
};

Did you notice anything special about it?

         11
        /  \
       7    15
      / \   / \
     2  8  13  18

In this tree, the root node is 11. It’s left child, 7, is smaller, and its right child, 15, is larger.

        11
       /  \
      7    15

Let’s look at 11’s children. If we investigate 7, it follows the same patter, it’s left child, 2, is smaller, and it’s right child, 8, is larger.

         7
        / \
       2   8

This leaves us with 15. Its left child, 13 is smaller, and its right child, 18, is larger.

         15
        /  \
       13   18

This is a specialized form of a binary tree called a Binary Search Tree. All the nodes to its left are smaller than the root node. All the nodes to its right are larger. If we were looking for a specific value, we’d only search a portion of the tree, making our search time much shorter.

Next, let’s build a binary search tree class.

class BinarySearchTree {
  constructor(value) {
    this.value = value;
    this.left = null;
    this.right = null;
  }
}

Binary Search Tree Node Insertion

Let’s write a binary search tree class and give it an insert method. Let’s begin with a class that creates an instance with a value, a left child, and a right child.

class BinarySearchTree {
  constructor(value) {
    this.value = value;
    this.left = null;
    this.right = null;
  }
}

Next, let’s give our binary search tree class an insert method.

class BinarySearchTree {
  constructor(value) {
    this.value = value;
    this.left = null;
    this.right = null;
  }
}

BinarySearchTree.prototype.insert = function(value) {
 if (this.value === value) {
   console.log("This node is already in the tree and won't be inserted."); 
 }

 if (this.value > value) {
   if (!this.left) {
     this.left = new BinarySearchTree(value);
   } else {
     this.left.insert(value);
   } 
 } 

if (this.value < value) {
  if (!this.right) {
     this.right = new BinarySearchTree(value);
    } else {
      this.right.insert(value);
    }
  }
}

Binary Search Tree Node Deletion

Now that we have an insert method, let’s also give our class a remove method.

BinarySearchTree.prototype.remove = function(value) {
  if (this.value > value) {
    if(this.left.value === value) {
      if (this.left.left) {
        this.left = this.left.left;
      } else if (this.left.right){
        this.left = this.left.right;
      }
    } else {
      this.left.remove(value);
    }
  }

  if (this.value < value) {
    if(this.right.value === value) {
      if (this.right.right) {
        this.right = this.right.right;
      } else if (this.right.left){
        this.right = this.right.left;
      }
    } else {
      this.right.remove(value);
    }
  }
}

Recursion, Part 4: Introduction to Binary Trees

2017-10-26T09:39:04+00:00

Binary Tree Terminology

Nodes - the values we store

Edges - the lines between nodes

Root - topmost node in the tree

Parent - a node with 0, 1, or 2 children

Child - a node that represents the left or right descendent of a parent

Leaf - a node with no children

Path - the sequence of nodes and edges connecting two nodes

Introduction to Binary Trees

Up until this point, we’ve been working exclusively with arrays. Now, we’ll begin working with our first data structure, trees.

A tree is a data structure that stores data in a hierarchical way. It consists only of nodes, and edges. Nodes represent the values we store. Edges represent how these values are connected. A tree diagram is generally read from top to bottom.

In this tree, the nodes are 2, 1, and 3. The edges are the lines connecting them. In this tree, we have a parent with two children, a left child and a right child.

    2 (parent)
   / \
  /   \
 1     3 (left child, right child)

Binary trees are a subset of trees. Binary trees are very simple. They consist only of nodes, and edges, like all trees. However, in a binary tree, we describe each node as a parent that has 0,1 or 2 children.

In the above small tree, we’d say that 2 is the parent. It has a left child, 1, and a right child, 3. Here, 1 and 3 don’t have any children. When a node has either no left or no right child, we can represent the lack of a child with null. The above tree could also be written like this, where n represents a null value.

      2 (parent)
     / \
    /   \
   1     3 (child, child)
  / \   / \
 n   n n   n

For our purposes, we’ll imagine trees to be objects that store other objects. In this way, the above tree can be written as a series of nested objects.

const binaryTreeA = 
  {value: 2, 
    left: {
      value: 1, 
      left: null, 
      right: null
    }, 
    right: {
      value: 3,
      left: null, 
      right: null
    }
  };

Determining the Size of a Binary Tree

Binary Tree Size Terminology

Depth - The number of edges on the longest path from a node to a leaf node

Height - The number of edges from a node to the tree’s root node

Level - The number of edges from a node to the tree’s root node + 1

         11
        /  \
       7    15
      / \   / \
     2  8  13  18

What is the depth, height, and level of the node whose value is 7 in the above tree?

Recursion, Part 3: Working with Nested Arrays

2017-10-25T18:32:34+00:00

Let’s write a function deepOnlyIntegers that returns an array, removing all non-integers, no matter how deeply the array is nested.

function deepOnlyIntegers([head, ...tail]) {

}
onlyIntegers([1,[[2],"not me"], 3, [["or me", 4]], [true, [[4.9]], 5]])

Traversing the Array

Let’s begin by traversing the array

function deepOnlyIntegers([head, ...tail]) {
  if (!head && !tail.length) return;
  deepOnlyIntegers(tail);
}
deepOnlyIntegers([1,[[2],"not me"], 3, [["or me", 4]], [true, [[4.9]], 5]]);

Then, we know we’re returning a new array so let’s add that.

function deepOnlyIntegers([head, ...tail]) {
  if (!head && !tail.length) return [];
  return deepOnlyIntegers(tail);
}
deepOnlyIntegers([1,[[2],"not me"], 3, [["or me", 4]], [true, [[4.9]], 5]]);

Checking for Arrays with Head

Then our logic forks into two possibilities.

Either the value we’re checking is an array
Or it isn’t.

Let’s add that check.

function deepOnlyIntegers([head, ...tail]) {
  if (!head && !tail.length) return [];
  if (Array.isArray(head)) {
    
  } else  {
    return deepOnlyIntegers(tail); 
  } 
}
deepOnlyIntegers([1,[[2],"not me"], 3, [["or me", 4]], [true, [[4.9]], 5]]);

Let’s first investigate the case where head is not an array. If head is not an array, then our logic forks into two additional possibilities.

head is either an integer and we want to include in our new array
or a non-integer and we want to exclude it

We know how to add values to our array from the last post, so let’s build our array by concatenating head with deepOnlyIntegers(tail)

function deepOnlyIntegers([head, ...tail]) {
  if (!head && !tail.length) return [];
  if (Array.isArray(head)) {
    
  } else {
    if (Number.isInteger(head)) {
      return [head].concat(deepOnlyIntegers(tail));
    } else {
      return deepOnlyIntegers(tail);
    }
  }  
}
deepOnlyIntegers([1,[[2],"not me"], 3, [["or me", 4]], [true, [[4.9]], 5]]);

What happens in our function so far? It finds 1, which is an integer, so it concatenates 1 with the head of the tail, the value [[2],"not me"]. Now we have an array case, which we haven’t accounted for, and it returns undefined. We haven’t told our function to keep checking the array so it simply returns. It concatenates undefined with 1 and returns [1, undefined].

Not exactly what we wanted. Let’s account for the array case.

What would happen if we used our normal way of building arrays?

function deepOnlyIntegers([head, ...tail]) {
  if (!head && !tail.length) return [];
  if (Array.isArray(head)) {
    return [head].concat(deepOnlyIntegers(tail));
  } else {
    if (Number.isInteger(head)) {
      return [head].concat(deepOnlyIntegers(tail));
    } else {
      return deepOnlyIntegers(tail);
    }
  }  
}
deepOnlyIntegers([1,[[2],"not me"], 3, [["or me", 4]], [true, [[4.9]], 5]]);

Well, now we get the entire original array. Getting closer, but not there yet.

Recurring with Head

In the case that head is an array, we recur with head.

function deepOnlyIntegers([head, ...tail]) {
  if (!head && !tail.length) return [];
  if (Array.isArray(head)) {
    return [deepOnlyIntegers(head)].concat(deepOnlyIntegers(tail));
  } else {
    if (Number.isInteger(head)) {
      return [head].concat(deepOnlyIntegers(tail));
    } else {
      return deepOnlyIntegers(tail);
    }
  }  
}
deepOnlyIntegers([1,[[2],"not me"], 3, [["or me", 4]], [true, [[4.9]], 5]]);

And we’re finished!

Next post ►

Recursion, Part 2: Building Arrays

2017-10-24T10:45:44+00:00

You’ll find the companion GitHub repository for Part 2 here. The following post is meant to serve as a foundation for working through the practice problems. You may also want to have a console open to experiment with while reading. Have fun!

Building Arrays

Let’s say we want to write a function, onlyIntegers, that takes in an array and returns a new array with all non-integers removed. As before, we’ll use our small subset of JavaScript. Also as before, we know almost everything we need to in order to find a solution. The rest we’ll fill in step by step.

Breaking Down The Logic

Let’s break down the logic of onlyIntegers, so we understand how it differs from allIntegers

Visit each item in an array
Check if it’s an integer
Return a result (a new array)

Again, we already know how to do a lot!

~~Visit each item in an array~~
~~Check if it’s an integer~~
Return a result (a new array)

Traversing the Array

In the last section, we learned how to traverse arrays. We can write a good amount of our onlyIntegers function knowing only that. First, we’ll define our function and pass it the array [1,2,"not me", 3, "or me", 4, true, 4.9, 5] as an argument.

function onlyIntegers() {

}
onlyIntegers([1,2,"not me", 3, "or me", 4, true, 4.9, 5])

We’ll use head and tail as before.

function onlyIntegers([head, ...tail]) {

}
onlyIntegers([1,2,"not me", 3, "or me", 4, true, 4.9, 5])

We also know that we can traverse the array by recurring with tail.

function onlyIntegers([head, ...tail]) {
  onlyIntegers(tail);
}
onlyIntegers([1,2,"not me", 3, "or me", 4, true, 4.9, 5])

We know we have to find a terminating condition, which again, is that we’ve checked every item in the array and now it’s empty.

function onlyIntegers([head, ...tail]) {
  if (!head && !tail.length) return;
  onlyIntegers(tail);
}
onlyIntegers([1,2,"not me", 3, "or me", 4, true, 4.9, 5])

If we run the function as it stands, we successfully visit each element of the array, and then return. But what value should we return?

Returning an Empty Array

Our problem asks us to return a new array. There are many good reasons why we may be asked this. One is that we don’t mutate the original array. Another is that it may make our code more composable. However, we’re not too concerned with such lofty things at the moment. Let’s be lazy and start by just returning an empty array.

function onlyIntegers([head, ...tail]) {
  if (!head && !tail.length) return [];
  return onlyIntegers(tail);
}
onlyIntegers([1,2,"not me", 3, "or me", 4, true, 4.9, 5])

If we run onlyIntegers now, we get exactly what we expect, an empty array. As it stands, we have a function that will traverse an array and return an empty array every time. Well, we are returning an array, so we’re part way there. However, we want it to include only the integer values of the original array.

Using concat()

We want to be able to add values to the array we’re currently returning empty. For that, we’re going to use concat().

Let’s imagine that our function has checked every value in the array and has now been told to return []. The last value it checked was 5, so let’s concat [5] with an empty array.

[5].concat([]) returns [ 5 ]

Let’s imagine that [ 5 ] was returned to the function that called it. How do we add that function’s head value to our array? It’s head was 4.9. Let’s concat that value as well.

[ 4.9 ].concat([5]) returns [ 4.9, 5 ]

Next, what was the value of head in the previous function call? true Have we returned from every function call we’ve made yet? No. We’ve only returned from our very last two function calls. Let’s concat this function call’s head value when we return as well.

[true].concat([ 4.9, 5 ]) returns [ true, 4.9, 5 ]

In this way, we build a new array, value by value, as we return from every preceding function call. Only when the very first function call returns do we return from onlyIntegers entirely, and with a new array in hand. Let’s try that.

function onlyIntegers([head, ...tail]) {
  if (!head && !tail.length) return [];
  return [head].concat(onlyIntegers(tail));
}
onlyIntegers([1,2,"not me", 3, "or me", 4, true, 4.9, 5])

Great! Now we return an array with values in it. We’ve achieved our goal of successfully adding values to our new array. The only thing is, we add every single value of the original array to our new array. We still have some work to do.

Using Head

Let’s use head as we did before do to some work in the function. What do we want to do? Let’s only add head to the new array if it’s an integer.

function onlyIntegers([head, ...tail]) {
  if (!head && !tail.length) return [];
  if (Number.isInteger(head)) {
    return [head].concat(onlyIntegers(tail));
  } else {
    return onlyIntegers(tail);
  }
}
onlyIntegers([1,2,"not me", 3, "or me", 4, true, 4.9, 5])

Now we’re done! Let’s follow our logic.

If the array is empty, simply return an empty array
If the value is an integer, add head to the new array [head].concat and keep checking the rest of the array onlyIntegers(tail)
If the value is not an integer, just keep checking the rest of the array onlyIntegers(tail)

We generally use head when we want to do some work, like checking if a value is an integer. We generally recur when we want to keep checking the rest of the array.

Next post ►

Recursion, Part 1: Traversing Arrays

2017-10-23T14:44:07+00:00

Now that we’re set up, let’s dive in! For this section, clone this GitHub respository. Try to answer all of the questions in the questions folder yourself. However, if you get stuck, there’s a solutions folder with suggested solutions. There are many ways to answer these questions, and your answer may not match the one in the solutions folder. However, consider reviewing the blog post and using a debugger before jumping to the solution. And most importantly, enjoy!

Traversing Arrays

Let’s say we’re asked to write a function to find out if an array contains only integers. If all its elements are integers, then we return true, otherwise, false. It should work something like this:

allIntegers([1,2,3,4,5]) // returns true because all its elements are integers

allIntegers([1,1,1,1,1]) // returns true because all its elements are integers

allIntegers([1,2.222,3,4,5]) // returns false because it contains a float

allIntegers([1,2,3,"4",5]) // returns false because it contains a string

allIntegers([1,2,[3],4,5]) // returns false because it contains an array

allIntegers([1,[2],3.14,4,5]) // returns false because it contains an array and a float

However, we have a single constraint. We must not use a) any loops (like for or while) or b) any array methods (like forEach()). Where do we start?

Breaking Down The Logic

When we break down the logic of the problem, we realize that we already know how to do most of what we need to.

Visit each item in an array.
Check if it’s an integer (we can use Number.isInteger())
Return a result (return true or return false)

Since we already know how to check if a number is an integer, and how to return a value, all we’re left with is visiting each item in the array.

Visit each item in an array.
~~Check if it’s an integer or not (we can use Number.isInteger())~~
~~Return a result (simply, return)~~

How do we do that?

Using Head and Tail

Well, let’s start by writing the function and passing it the array [1,2,3,4,5].

function allIntegers() {
  
}
allIntegers([1,2,3,4,5])

What do we want to name the array passed to our function? In our case, it would actually be better to have access to head and tail variables rather than a single parameter named something like array (you’ll see why in a moment). We’ll create these variables with the rest operator. Let’s check that this works.

function allIntegers([head, ...tail]) {
  console.log(head);
  console.log(tail);
}
allIntegers([1,2,3,4,5])

We should have 1 and [2,3,4,5] logged to the console. Great! We can now access the first element of the array with head and the array without the first element with tail.

Recurring With Tail

Now that we have a tail variable, we can use it to traverse the array. How? By calling allIntegers within our function and passing it different arguments each time. Specificaly, we pass tail each time. We could also say that we “recur with tail”. When we recur with tail, we get new bindings for head and tail with each function call. That may sound confusing, so let’s experiment with allIntegers.

function allIntegers([head, ...tail]) {
  allIntegers(tail);
}
allIntegers([1,2,3,4,5])

If we look at what head and tail are bound to with each function call , we should get this:

Call	Head	Tail
1	`1`	`[2,3,4,5]`
2	`2`	`[3,4,5]`
3	`3`	`[4,5]`
4	`4`	`[5]`
5	`5`	`[]`

The first time we call allIntegers, tail gives us [2,3,4,5]. However, the next time we call allIntegers, tail gives us [3,4,5]. What’s interesting to remember here is that the length of the array we’re checking gets shorter by one element each time. Eventually, we run out of elements to check and are left with an empty array.

How does this work? All our function does so far is pass the tail of the previous tail each time. Just like the introduction, if we take the tail of [1,2,3,4,5], we get [2,3,4,5]. If we take the tail of [2,3,4,5], we get [3,4,5]. That’s exactly what we’re doing in allIntegers, passing the tail of the previous tail over and over again.

That’s all fine, but have we found out if an array contains only integers? Well, let’s check.

function allIntegers([head, ...tail]) {
  allIntegers(tail);
}
allIntegers([1,2,3,4,5])

Hmm… something doesn’t seem to be working. We’re not quite there yet.

Finding A Terminating Condition

Currently, allIntegers never returns a value. It’s elegant, in that we’re doing a good amount of work with a few lines of code, but we still have some work to do. Let’s step through allIntegers a few more times to see what’s going on.

Call	Head	Tail
1	`1`	`[2,3,4,5]`
2	`2`	`[3,4,5]`
3	`3`	`[4,5]`
4	`4`	`[5]`
5	`5`	`[]`
6	`undefined`	`[]`
7	`undefined`	`[]`
8	`undefined`	`[]`
9	`undefined`	`[]`
10	`undefined`	`[]`
11	`undefined`	`[]`
12	`undefined`	`[]`

It looks like our function keeps calling itself… forever. Well, that’s not what we wanted.

Breaking Down The Logic, Part 2

Well, we got this far by writing a single function call in allIntegers. This can’t be too hard. Let’s think. When do we want our function to stop?

It’s found a non-integer. In this case, return false;
It’s checked every element and they’re all integers. In this case, return true;

Are there any other cases we haven’t considered? No. Either our function returns true or false. As it stands now, after allIntegers checks each value in the array, it seems to continue running passing head === undefined and tail === [] as arguments. When is head === undefined and tail === []? When we’ve already checked every value in the array. In other words, when [1,2,3,4,5] is now empty. If we haven’t found a non-integer yet, then all the values in the array are integers. That must be when we stop!

function allIntegers([head, ...tail]) {
  if (!head && !tail.length) return true;
  return allIntegers(tail);
}
allIntegers([1,2,3,4,5])

Using Head

Let’s run allIntegers now, passing in [1,2,3,4,5]. And it returns… true. It does exactly what we wanted! It checks every element of the array, and when it runs out of elements to check, it returns true.

Let’s call allIntegers with a false case just to make sure. And allIntegers([1,2,3,"nope", 5]) … also returns true. How did that happen? Currently, we don’t check to see if each value is an integer. We just traverse the array, and when we run out of elements, we return true. We’re almost there. Each value of the array can be accessed with head, so let’s use head to check for non-integers.

function allIntegers([head, ...tail]) {
  if (!head && !tail.length) return true;
  if (!Number.isInteger(head)) {
    return false;
  } else {
    return allIntegers(tail);
  }
}
allIntegers([1,2,3,"nope", 5])

Have we checked everything? Yes. In our code now, we’ve accounted for all cases.

There are no non-integers: if (!head && !tail.length) return true;
There is a non-integer if (!Number.isInteger(head)) return false;
Maybe there’s a non-integer in the rest of the array. Let’s keep checking return allIntegers(tail);

Next, we’ll build arrays recursively.

Next post ►

Recursion: Introduction

2017-10-23T09:24:08+00:00

Welcome to the wonderful world of recursion! This is a series of blog posts on thinking recursively. The code samples are in JavaScript. To get the most out of them, you’ll need to understand just the basics (functions, arrays, conditionals). There are many great JavaScript primers online (Eloquent JavaScript is a favorite). We’ll use a small subset of the language, so if you’re coming from another language, it shouldn’t take long to get up to speed. Let’s get started!

Requirements

Tools:

Installation of NPM and Node 6.0.0 or higher

Text editor of your choice

Shell to run your code, like Terminal on OSX

GitHub account to get the exercises

Optional:

Debugger of your choice (I like Chrome DevTools)

Paper and pencil. You may enjoy drawing diagrams of some of the concepts we cover.

Head & Tail

Thinking about arrays as having a head and a tail is useful for thinking recursively. The idea is simple, but powerful.

head is the first element of the array.
tail is the array without the first element.

Examples

If the array is [1,2,3,4,5]:

head === 1

tail ===[2,3,4,5]

If the array is [["this", "is", "the", "head"], "and", "this", "is", "the", "tail"]:

head === ["this", "is", "the", "head"]

tail === ["and", "this", "is", "the", "tail"].

Head is always the first element of the array, even if the array is nested. Tail is always the array without the first element, equally regardless of nesting.

Questions

What is the head of [[["a"]], "b", "c"]?

What is the tail of [4, [1, 0, 2, 5]]?

Write a function head that returns the head of an array.

Write a function tail that returns its tail.