Problem Solving With JS: The FizzBuzz Test

An interesting article I came across recently talked about the use of FizzBuzz, a programming test question often employed in interviews. The essential question is something to the tune of:

Write a loop that runs from 1 to 100. For every number that is divisible by 3, log Fizz to the console. For every number that is divisible by 5, log Buzz to the console. For every number that is both divisible by 3 and 5, log FizzBuzz to the console.

There was also an interesting conversation about programmers in interviews being unable to solve the FizzBuzz test on a super interesting place most people have probably heard of: Coding Horror (if you haven’t, I definitely recommend checking it out if you’re into code). So I wanted to take a step through the approach to lay out how I solve the test and why.

I’ll be writing it up in Javascript, but the same approach can be applied to most programming languages. I also want to disclose that this is not the most elegant solution. It’s just my approach to it.

Approaching the Problem

  • We already know that the test is asking us to write a loop that counts from 1 to 100, so that part of it should be simple. A  for loop is what I’m going to go with.
  • There are three things we need to test for here. If something is divisible by 3, if something is divisible by 5 and if something is divisible by both 3 and 5. An if statement that checks for the remainders should do the trick here.
  • Finally, we just need to console.log a number, Fizz, Buzz or FizzBuzz depending upon the results.

Writing the For Loop

If you’ve been familiar with some concepts of programming, you should already know about For Loops and have a basic understanding of what it’s for and how it’s supposed to look. For Loops exist in most programming languages in a very common manifestation. They essentially state that a variable that starts with 0, it should loop for as long as its value is less than a certain number, as it loops it should increment or (decrement, etc. in some cases) every time it loops.

Here’s the for loop I would set up for FizzBuzz:

for (var i = 0; i <=100; i++) {

console.log(i);

}

So, we’ve set up a for loop that says that for each loop through i, check to see if it’s less than or equal to 100. If it is, then add 1 to i’s value and log out the value of i using console.log(). This gets us through the first part of the FizzBuzz test. Let’s head into the next step, which is to test for values that are divisible by 3 or 5.

Checking for Divisible By Using Modulus

Does anyone remember modulus? I remember learning about it in C++, then never using it again as most of my work with JS happens in the DOM, timing things and checking for very simple conditions.

However, modulus is a useful operator. It exists to return the remainder in a division question. It’s incredibly useful when we want to find out if something is divisible by something else, or if it will return a different number. When I was learning about modulus in Baby’s First C++ course, it was being used to make randomization a little more interesting. In this case, we’re going to use modulus to check for remainders of 3 or 5. Here’s what the code looks like now:

for (var i = 0; i <= 100; i++) {

var divByThree = i % 3 === 0;
var divByFive = i % 5 === 0;

console.log(i);

}

That’s not going to do anything different than the previous version in terms of output. But it does add an extra feature to our code. What we’re doing with the divByThree and divByFive variables is we’re checking i (the number we’re looping through) to determine if it’s completely divisible by 3 or 5. Here’s a step-through of one of those statements:

Let’s say we’re looking at divByFive. Here it is:

var divByFive = i % 5 === 0;

So what is it doing? First, we’re creating a variable called divByFive. Then we’re setting it to equal i. The i in this case represents the value that is being fed through the loop. Note that these two variables were declared inside of the for loop where i was already established.

I’m using % on i and then a number, in this case 5, to tell JS to divide whatever number i happens to be by 5 and return the modulus to me. Finally, I check the modulus using === 0 to determine if it’s 0 or not. If it’s not zero then the number in i wasn’t divisible by 5. If it does return 0 then there are no remainders from the division operation and the number in i was divisible by 5. If we had our console.log()s in place, we would then we logging Buzz to the console. So let’s finish that off now, shall we?

Logging Out Fizz, Buzz, FizzBuzz

We need to write an if statement now to determine when to log out a number, Fizz, Buzz or FizzBuzz. The way I do if statements is by determining the most overarching or most strict condition first. This way, I get the most complicated condition out of the way so the else if and else statements don’t have to work as hard. In a FizzBuzz, the most complicated condition to me is checking if a number is both divisible by 3 and by 5. So I’m going to write that first and get it out of the way:

for (var i = 0; i <=100; i++) {
var divByThree = i % 3 === 0;
var divByFive = i % 5 === 0;
if (divByThree && divByFive) {
console.log("FizzBuzz");

} else {
console.log(i);
}

}

In the above code, I’m checking divByThree and divByFive using my new if statement. Remember in the previous section when we wrote those two variable statements and what they would return? After getting through the modulus, we should either have a 0 or any number that isn’t 0 from either one of them. So my if statement starts off by checking to see if i is 0 for both divByThree and divByFive. If it is, then we log out FizzBuzz because we can presume that the number is divisible by both 3 and 5 since there wasn’t a remainder returned for either of the statements.

Next, let’s write out the other two statments to check for divisible by 3 and divisible by 5. After doing this, we’ve also essentially solved the FizzBuzz test:

for (var i = 0; i <=100; i++) {
var divByThree = i % 3 === 0;
var divByFive = i % 5 === 0;

if (divByThree && divByFive) {
console.log("FizzBuzz");
} else if (divByThree) {

console.log("Fizz");
} else if (divByFive) {
console.log("Buzz");

} else {
console.log(i);
}

}

Similar to our first if statement, our else if statements that were just added are checking if i is equal to 0 for our two variables individually. If it discovers either one returns 0 as it loops through 1 – 100, then it returns either Fizz for divisible by 3, or Buzz for divisible by 5. If the number isn’t divisible by 3, 5 or both. Then our else statement takes over and simply logs the number to the console instead. Go ahead and run that and it should evaluate.

Resources

The FizzBuzz Test on C2
Multiple solutions to FizzBuzz including a good explanation of what the test is and why it’s implemented.

Why Can’t Programmers…Program?
Great article that brings to light some problems encountered during programming interviews.

Getting Hired
Information about getting hired as a programmer.


Posted

in

by