Hello everyone.

I'm new to hashnode and this is my first article. In it, I'll take us(you mostly) through the process of solving a coding exercise I came across while studying the book Eloquent Javascript by Marijn Haverbeke.

Alright then, lest dive in.

What is the FizzBuzz challenge?

Its a coding exercise which, according the aforementioned book, doubles as an interview question.

This exercise requires the engineer/developer to :

• Write a program that uses console.log to print all the numbers from 1 to 100.

• For numbers divisible by 3, print "Fizz" instead of the number.

• For numbers divisible by 5, print "Buzz" instead of the number.

• For numbers divisible by both 3 and 5, print "FizzBuzz" (and still print "Fizz" or "Buzz" for numbers divisible by only of those).

The solution

Firstly, lets handle this exercise one task at a time The first task is to print all the numbers from 1 to 100 into our console.

To do this, we use loops and for this particular exercise, I made use of For Loops. We make use of loops because to solve this exercise, we have to execute a block of code over and over again.

A For Loop requires 3 expressions. The first expression runs before the code block is executed. The second expression defines the condition for the loop to run. The third expression tells to code what to do. An example is given below:

for(first expression, second expression, third expression){
  //Output
}

To learn more about how For loops work, I suggest you check out this resource from w3schools.

Now that we have that out of our way, lets print the numbers 1 to 100. The code is like so:

for(let i =1;i<=100;i++){
  console.log(i);
};

In the code above, we defined a variable "i" in our for loop and the gave it the value of 1. This was the first expression. We then write a condition that will hold true as long as "i" is less than or equal to 100. This dealt with the second expression. For the third expression, we increase "i" by 1 as long as its value is less than or equal to 100.

The output of the code looks like this :

e.t.c.

We've solved the first task.

Now, for the second task, things get a bit interesting. We have to find out numbers from 1 to 100 that are divisible by 3. This means that these numbers will have no remainder when divided by 3. For such operation, we use the remainder operator which is the percentage symbol (%). This operator checks for the remainder when the first number divides the second number. It then returns the remainder. The code is like so:

  for(let i = 1;i<=100;i++){
    if(i%3===0){
        console.log("Fizz");
    } else{
         console.log(i);
    }
}

In the code above, we made use of the if else conditional statement.

This statement is used when checking if a code meets certain conditions. In this case, the if statement checks to see if the remainder of "i" divided by 3 equals zero, and when it does, we output "Fizz" to the console.

To learn more about the if else conditional statement, check out this resource from w3schools

When the remainder of "i" divided by 3 is equal to zero, this shows that value of "i" is divisible by 3. When it doesn't equal to zero(which also means it is not divisible by 3 without having a remainder), we output the value of "i" to our console.

The output of the code looks like this

e.t.c.

I can't post the output of the code from 1-100 because it'll just take up space hence a screenshot.

Having dealt with that, the next task is quite easy. For this task, we're to print "Buzz" to our console if the value of "i" is divisible by 5. The code is like so :

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

In the code above, we write another if statement which checks if the value of "i" is divisible by 5 and output "Buzz" if it is and the value of "i" it its not. The output looks like this :

If you look closely, you find out that some numbers like 30, 45 e.t.c are divisible by both 5 and 3. Why then does it output only Buzz and not Fizz. This is because the second if statement overrides the first. To solve this issue, we move to the final task, which is to output "FizzBuzz" for numbers that are divisbile by both 3 and 5.

The code is like so:

  for (let 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);
    }
}

In the code above, we had to make some modifications. The first if statement checks to see if "i" is divisible by both 3 and 5 and uses the logical and operator (&&) to do so. It then outputs "FizzBuzz" if its divisible ,but if it isn't, the next if statement executes and so on.

The code output looks like this:

e.t.c.

For numbers such as 30,45 which are divisible by both 3 and 5, we see the output of "FizzBuzz", and now you know how to solve the FizzBuzz challenge.

Thank you for reading to this point in this article, I hope this information helped.

Now you can finally ace that interview!