How to Solve ‘FizzBuzz’ in JavaScript
A simple, readable solution
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”.
I will post my own code snippets/solution towards the end, but for now, I want you to try and tackle these steps on your own as I explain.
Where to even start?
Let’s forget about languages for a second. What is required of us to solve this problem?
To begin with, we simply need to print the numbers 1 to 100. Don’t worry about the next part of the problem. Just get the numbers 1 through 100 printed(in JavaScript you can just console.log your code).
Hint: In order to log every number 1 to 100, you will need a loop, console logging each number.
After you have gotten the numbers 1 to 100 logged to your console, you are ready for the next step.
Next, we are asked to print “Fizz” for multiples of 3. What does this even mean? “A multiple of 3” is a number that is divisible by 3 with no remainder left over.
So we need to check whether or not each number is divisible by 3. If the number is divisible by 3, you need to log “Fizz” instead of the actual number. You are already looping through 1–100, now we need to check for conditionals. Let’s use an if statement! One of the simplest ways to check for conditions in JavaScript.
If the number is divisible by 3, print “Fizz”, else continue logging all other numbers. Once you have this implemented, let’s move on.
Next, we are asked to print “Buzz” for multiples of 5. If you were able to complete the previous step, this step should be a breeze.
If the number is divisible by 5, print “Buzz”, else continue logging all other numbers.
Finally, we are asked to print “FizzBuzz” for all numbers that are multiples of both 3 and 5. You’ve made it this far, how can you check if a number is divisible by multiple numbers?
Yes, an if statement, combined with the logical and operator.
If the number is divisible by both 3 and 5, print “FizzBuzz”, else continue logging all other numbers.
By this point, you have solved the coding challenge. You are printing “Fizz” for all multiples of 3, you are printing “Buzz” for all multiples of 5, and lastly, you are printing “FizzBuzz” for all multiples of both 3 and 5.
Well done! Now let’s look at my own personal solution to this problem.
Remember: My code is written in JavaScript. Is it the most optimized solution? No. However, it’s readable and easy to understand. Other developers are going to be coming behind you weeks, months, maybe years down the line. Make your code readable!
Logging 1 through 100 to your console
Here we are using JavaScript’s for loop, looping through the numbers 1 to 100, console logging each number. Notice, we are assigning a value to (i), and for each iteration of the loop as long as (i) is less than or equal to 100, we add 1 to (i). The conditions inside of the for loop curly braces {} run for every iteration of the loop, this is how we are able to log our numbers and words.
Print “Fizz” instead of the actual number for multiples of 3
Getting closer! Inside of my if statement, I’m checking to see if (i) is divisible by 3 evenly. If so, I am logging “Fizz” to the console. If not, then (i) is logged to the console
I am performing the division using the remainder(%) operator. The remainder operator allows me to divide two numbers, checking to see if the remainder is equal to 0. If (i) divided by 3 = 0 (meaning the number is divisible by 3) we are console logging “Fizz” instead of the actual number, just like our problem statement is asking of us.
Print ”Buzz” for multiples of 5, instead of the actual number
By now you should be catching on. If (i) is divisible by 3, log “Fizz”. If (i) is divisible by 5, log “Buzz”. Else, log all other numbers
Print “FizzBuzz” for multiples of both 3 and 5
Now, you will notice a slight difference in my syntax from the previous images. Notice that now our very first conditional we are checking to see if the number (i) is divisible by both 3 and 5 evenly. If so, print “FizzBuzz”, else continue checking other conditionals.
And that’s it! Play around with your code, if you think you can optimize it, make a better solution, etc. Go for it! Share it! This solution is readable, and it does exactly what is needed.
In Closing
I write articles tech-related, non-tech-related, and a few things in between. I'm currently on this journey of life, just as you are. Let’s go make the most of it!
