Day 0: Solving the FizzBuzz problem with JavaScript

Brendon D'Souza — Thu, 17 Feb 2022 20:39:44 +0000

I'm currently part of the #100devs program and our commander-in-chief, Leon Noel happened to mention the FizzBuzz challenge one time during office hours and I wanted to try it out. I thought, why not code it in javascript since thats the next language we will be diving into and I happen to know a little about loops and conditional statements from before.

So, for those of y'all not familiar with the FizzBuzz coding challenge it goes something like this:

The FizzBuzz problem is a classic test given in coding interviews. The task is simple:
Print integers 1 to N, but print “Fizz” if an integer is divisible by 3, “Buzz” if an integer is divisible by 5, and “FizzBuzz” if an integer is divisible by both 3 and 5.

Now that we all know what the challenge entails, let's get around to solving it.

The first step is to decide which language you want to code it with. Like I previously mentioned, I'm doing it using JavaScript. You can do it with pretty much any programming language, the logic remains the same.

Next, we set a definite scope for the problem. Currently the problem says to print integers from 1 to N, however to avoid using functions, I'm going to go from 1 to 100. Now that we have our scope, let's get to writing some code!

Structuring our code

Variable declaration

We start by defining our variable. I have used the variable name i with the let variable type so the value of i can be modified down the line.

let i=1;

What's the logic?

Now we speak about the logic to solve such a problem. We know we need to print 100 lines, each consisting of either Fizz, Buzz, FizzBuzz or a number. In order to do the same task multiple times we need to use a loop. I have used the while loop.

while(i<=100){
}

A loop operates as follows:

The while statement creates a loop that executes a block of statements inside it as long the test condition defined in the () remains true. The test condition is evaluated before the loop is entered into.

In my while statement, the loop will be executed as long as i is less than or equal to 100. The reason I used <= is because I have to run the code 100 times. Using only < will cause it to run 99 times as we are starting from i=1 and not 0.

Visualize a flowchart

We now need to define the statements inside the loop according to what we want to do.
We basically have to do 1 of 4 different tasks for each line:

If the number is divisible by 3 and 5, print "FizzBuzz".
If the number is divisible by 3, print "Fizz".
If the number is divisible by 5, print "Buzz".
If the number is not a divisible by 3 or 5, then just print the number.

In addition, we have to increment i by 1 every time it gets printed.

Note: To check if a number is divisible by another number we use the % operator. % is the remainder operator and gives us the remainder when one number is divided by another. A number that is divisible by another has a remainder of 0, which is what we then test for using a comparison operator.

Convert your flowchart into conditional statements

To make the computer understand the flowchart we spoke about above, we need to convert it into conditional statements. Conditional statements determine whether pieces of code can run or not.

I will be using the if, else if and else statements.

The if statement

To set the first condition from above, my syntax will be:

if (i%5===0 && i%3===0){
    console.log("FizzBuzz");
    i++;
  }

If I had to convert the above line of code into simple English, I am basically telling the computer:

If i divided by 5 has a remainder of 0 and i divided by 3 has a remainder of 0, print "FizzBuzz" in the console. Once this statement is executed, increment the value of i by 1.
Remember, both conditions need to be true and hence the && (logical and) operator is used.

If the if condition above returns true, then JavaScript skips any remaining conditionals and returns to the while loop condition.

The else if statement
We then write else if statements for the next two conditions. We are basically saying, if the first if condition is not true, then test this condition to see if this condition is true.
If true, then execute the statement block, else, move on to the next if statement and do the same.

  else if(i%3===0){
    console.log("Fizz");
    i++;
  }
  else if(i%5===0){
    console.log("Buzz");
    i++;
  }

The else statement
For the last condition, we are basically saying if you have reached thus far, that means the number isn't divisible by 3 or 5, so just print the number as is and then increment it by 1.

else{
    console.log(i);
    i++;

!important: We have to keep in mind to increment the value of i every time it runs through the loop. If we do not increment i, its value will always be 1 and the loop will run forever printing only the number 1.

Understanding how this all works

When the code runs the first time, i=1 enters the while loop since i is less than 100 and gets tested by the first if statement.
Since i=1 is not divisible by 5 or 3, it is not allowed to enter and moves to the following else if statement.
Again, i=1 is not divisible by 3 so it is forced to move to the next else if statement only to get rejected once again since it is not divisible by 5.
Finally, i=1 gets to the else statement which will run without any conditional testing and print the value of i which is currently 1. The value of i is then incremented by 1 courtesy of the i++ incremental operator. The reassigned value of i is now 2.

The whole process described above now repeats with i=2.

This process continues to run a total of 100 times, each time the value of i increasing by 1. After the while loop is executed 100 times, the value of i is now 101. This time the while loop will not execute as 101<=100 returns false. This causes the while loop to stop executing.

And that is it! Your while loop will run 100 times, all while printing what you have asked it to. The result looks something like this:

(PS: You can click this link for the entire solution from 1 to 100. I don't know how to embed a codepen here with the console showing, so if you do please teach me!)

I had fun coding this challenge and I rather enjoyed writing about it. This is the first time I've ever written something technical and it was rather fun to put down my learnings on paper! Thanks for reading!