FizzBuzz: THE Question in coding

Fizzwha?

If you have spent any time at all looking for coding jobs you have at least heard about FizzBuzz in passing. The coding problem has been used in interviews for years to determine if a candidate knows how to write code. It goes like this:

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”.

It is a simple enough problem with many implementations but we are going to look at a couple ways to approach it.

NOTE: FizzBuzz can be solved in many languages. This article will show examples in Javascript.

Initial Solve

As with most coding problems its best to start with some notes to get an idea of what needs to happen

//We need to iterate through an array of numbers from 1 to 100
//Numbers divisible by 3 will print the word "Fizz"
//Numbers divisible by 5 will print the word "Buzz"
//Numbers divisible by both 3 and 5 will print the word "FizzBuzz"
//Numbers not divisible by either will be printed as they are

Starting with the first line lets use a for loop to get into our iteration.

for (var i=1; i <= 100; i++)

Next we need to code what will happen with our conditions. An if statement will suffice.

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 {
    console.log(i)
  }
}

There are a couple things to note here. My first impulse was to code the conditional for 3, then 5, then for 3 and 5 but it didn’t return any FizzBuzz’s. This was because when it finds a condition with 3 or 5 it automatically returns without checking to see if it was filled by both. We needed to start with our most specific condition in order to make sure it wasn’t filled, then it will proceed to the next, less specific conditional. The else conditional at the end logs any number not divisible by either number.

Another Way

I have poured through different solutions for FizzBuzz and have been blown away with the variety. One of the coolest (and faster) ways to solve is using a ternary operator. Let take a look at the example:

function fBTernary() {
  for (var i = 1; i <= 100; i++) {
    var f = i % 3 == 0, b = i % 5 == 0;
    console.log(f ? b ? “FizzBuzz” : “Fizz” : b ? “Buzz” : i);
  }
}

This is the same flow as the previous solution but we are using a ternary conditional to solve. A ternary basically gives you a result based on whether the condition is true or false. You can see var f and var b are declared then the ternary is used in the console.log to make the distinction. This is where the real magic happens as the chaining of the ternaries returns the desired results. I had never used them quite like this before and it was fun to figure out exactly what was happening in the console.log.

Buzz Off

FizzBuzz may be a bit antiquated and over discussed by now but I think it is a great starting point for new developers to practice thinking programatically. As mentioned before, there are more ways to solve this than I would care to count. Try it for yourself and see if you can put your own spin on this time-honored problem.

Happy Coding!