MVC software architectural pattern

For the past couple of weeks I’ve been working with Backbone.js and Angular. Backbone and Angular are front-end frameworks that loosely follow the Model-view-controller software architectural pattern. The model-view-controller pattern separates the front-end framework into three different areas.

Model: The model stores data that is retrieved from the controller and displayed on the View.
View: The view generates an output to the user based on changes in the model.
Controller: The controller is manipulated by the user and sends information to the model.

Callbacks in Node.js

JavaScript is single threaded. As you may know, JavaScript uses callbacks to avoid long-running processes that block other events.

var x;
a();
b();

function a() {
  setTimeout(function() {
    x = 5;
  }, 5000);
}

function b() {
  x = x + ' foo';
  console.log(x);
}

// What would be printed to the console?

Undefined foo

By adding a callback in function a, we are able to print ‘5 foo’.

var x;
a(b);

console.log(x);

function a(callback) {
  setTimeout(function() {
    x = 5;
    callback();
  }, 5000);
};

function b() {
  x = x + ' foo';
  console.log(x);
};

// This prints out '5 foo' after 5 seconds.

It is very easy to nest together functions when relying on events to be executed in order. In computer programming, this is known as the pyramid of doom.

An easy way to avoid the pyramid of doom is to use promises. A promise allows a function to return a future value of an asynchronous function. I will blog a follow up post going more into details on promises.

FizzBuzz without If/Else Conditional Statements

FizzBuzz Visualized

Over the past couple weeks, I’ve been improving my software craftsmanship by working on toy problems. While looking for toy problems to do, I ran across a modified version of FizzBuzz. The modified version added some twists to the original FizzBuzz problem. If you’re not familiar with FizzBuzz, it is a simple toy problem that is fairly known in the Computer Science industry.

"Write a program that prints the numbers from 1 to 100. But for multiples of three print “Fizz” instead of the number and for the multiples of five print “Buzz”. For numbers which are multiples of both three and five print “FizzBuzz”."

The modified version made you solve the above problem without using conditional (if/else) statements. The next step is to write another algorithm to perform FizzBuzz 1000 times. When you reach an iteration number which is a multiple of 9, remove one letter from the end of Fizz. Do the same for Buzz every 11th iteration, and for FizzBuzz every multiple of both. On which iteration will your code break?

First let’s solve FizzBuzz normally. The problem has four conditionals we have to watch out for.

1) If the number is only divisible by 3 then print Fizz. 
2) If the number is only divisible by 5 then print Buzz.
3) If the number is both divisible by 3 and 5 then print FizzBuzz.
4) Otherwise if not divisible by 3 or 5 then print the number

We can easily take the above pseudocode and turn it into code.

for (var i = 1; i <= 100; i++) {
  if (i % 3 === 0 && i % 5 === 0) {  
    console.log("FizzBuzz"); 
  } else if (i % 3 === 0 ) {
    console.log("Fizz");
  } else if (i % 5 === 0 ) {
    console.log("Buzz");
  } else { // If not divisible by 3 or 5 then print number
    console.log(i);
  }
}

Doing the FizzBuzz algorithm without if/else conditional statements can be tricky if you’re stuck in a boolean mindset. An acquaintance of mine once told me that “If you’re stuck on a problem, hash (table) it out!”. We can easily use a hash table to solve this problem. We just have to figure out a hash function to use to correctly store Fizz, Buzz, and FizzBuzz in the correct buckets.

Looking at our code, (i % 3 === 0 && i % 5 === 0) can be rewritten as (i % 15 === 0). With this, we can use (i % 15) as our hash function and refactor out the four conditionals using (i % 15) as the base. The remainder from (i % 15) will act as the key in our hash table.

1) If the number is only divisible by 3 then print Fizz. [3, 6, 9, 12 and 15] are divisible by 3 up to 15.
2) If the number is only divisible by 5 then print Buzz. [5, 10, and 15] are divisible by 5 up to 15.
3) If the number is both divisible by 3 and 5 then print FizzBuzz. [15]
4) Otherwise if not divisible by 3 or 5 then print the number. [1, 2, 4, 7, 8, 11, 13, and 14]

Using the knowledge above, we can now implement the hash table and use a for loop as a counter.

function fizzBuzz() {
  fizzbuzz_hashtable = {3:'Fizz', 5:'Buzz', 6:'Fizz', 9:'Fizz', 10:'Buzz', 12:'Fizz', 0:'FizzBuzz'};
  
  for (var i = 1; i <= 100; i++) {
    console.log(fizzbuzz_hashtable[(i % 15)] || i); 
  }
}

Now that we solved the FizzBuzz without if/else conditionals, let’s solve the last part of the problem.

Imagine if we have to run the FizzBuzz algorithm 1000 times.

1) For every 9th iteration, we have to remove one letter from the end of Fizz.
2) For the 11th iteration, we have to remove the letter Buzz.
3) Then we have to remove one letter from FizzBuzz every multiple of both.

At which iteration will the algorithm stop?

You can answer this question without having to write the algorithm out. The most frequent action is removing one letter from the end of Fizz. We have to do subtract a letter every ninth iteration. There are only four letters in Fizz. It will throw an error if we try to subtract another letter once we remove all four letters from Fizz. Knowing this, the algorithm will throw an error on it’s 45th time, or 9 (Iterations) * 5 (No 5th letter to remove). Pseudocoding it out below makes it even more clear.

Iterations 1-8 "Fizz" "Buzz" "FizzBuzz"
Iterations 9-17 "Fiz" "Buz" "FizzBuzz" // First multiple of 9.
Iterations 18-26 "Fi" "Bu" "FizzBuzz" // Second multiple of 9
Iterations 27-35 "F" "B" "FizzBuzz" // Third multiple of 9.
Iterations 36-44 "" "" "FizzBuzz" // Fourth multiple of 9.
Iteration 45 length of cannot be less than zero