Implementing FizzBuzz in Javascript

In this article, we look at FizzBuzz, a very common programming task in software development interviews. Since the solution utilizes a few major concepts, this task has become a go-to for interviewers.

If you are new to the concept, I’d recommend you follow step by step to understand the concept as a whole. However, If you are here to refresh your knowledge, you can jump straight to the solutions.

Table of Contents

• What is FizzBuzz?
• Solution 1 - Code & Explanation
• Solution 2 - Code & Explanation
• Other Related Concepts

What is FizzBuzz?

Firstly, let’s get this out of the way, FizzBuzz is a task where the programmer is asked to print numbers from 1 to 100, but here’s the catch, multiple of three should print “Fizz” and similarly print “Buzz” for multiples of 5 and lastly print “FizzBuzz” for multiples of three and five.

Although the last may seem straightforward, even seasoned programmers tend to get the logic wrong at times.

Solution 1 - Code & Explanation

The first solution is simpler and easier to understand in comparison to the second, and in case you are new to programming, I would suggest you use this method.

Code

for (var i = 1; i < 101; i++) {
    if (i % 15 == 0) console.log("FizzBuzz");
    else if (i % 3 == 0) console.log("Fizz");
    else if (i % 5 == 0) console.log("Buzz");
    else console.log(i);
}

Explanation:

So let’s break down the logic, to make it more consumable.

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

We have a for loop that iterates over a variable i that increments up to 100.

if (i % 15 == 0)
    console.log("FizzBuzz")

Next, we have an if nested within our for loop, we have used the % (The modulus operator returns the remainder of an integer division) hence we use it to check if a number is divisible by 15. And in case the condition is true, it outputs “FizzBuzz”. We use 15 to check if the number is divisible by 3 & 5. Post which we divide it by 3 & 5 accordingly.

Note: We check 15 first as all numbers divisible by 3 & 5 would divide 15 and an if condition breaks once the output is true.

Similarly, we repeat it for 3 and 5 using else if.

else
    console.log(i);

And in case none of the conditions are true we use else to output the integer in this case i. This repeats until the loop ends.

Solution 2 - Code & Explanation

This solution for FizzBuzz is more complex and would require, relatively more programming knowledge than the previous solution. With that out of the way, let’s dive into the code.

Code:

for (let i = 1; i < 101;) console.log((i++ % 3 ? '' : 'fizz') + (i % 5 ? '' : 'buzz') || i)

Explanation

This solution may seem intimidating at first, but it is simple once you understand the logic. So let’s break it down.

or (let i = 1; i < 101;)

Similar to the first method we start the code with a for loop that runs up to 100, however, we don’t increment the variable inside the for loop.

console.log(
    (i++ % 3 ? '' : 'fizz') + (i % 5 ? '' : 'buzz') || i
)

And within our for loop we console.log something, in case you are new to this concept, it is called a ternary operator. The syntax of a ternary operator is this:

condition ? value
if true: value
if false

In our code, we have used 2 ternary operators, for 3 and 5. I’ve broken down the logic below.

In our solution, the condition we are testing is i++%3. Any value that isn’t 0 is not considered falsy, and hence '' is returned, in case the condition outputs 0, 'fizz' is returned. The same logic is repeated for 5. Also, note in this method, we increment the variable i in the condition of the first ternary operator.

Given the above operators are placed inside brackets they are executed first, post with the + plus operator is used to add the value of both the operators, this would help output ‘fizzbuzz’ in case the number is divisible by 15.

In case both the operators return '' the logical || operator is used to return i, in our case, this returns the number.

Code & Expected output

Input - 2('') + ('') || i) // Output - 2

Input - 3('fizz') + ('') || i) // Output - fizz

Input - 5('') + ('buzz') || i) // Output - buzz

Input - 15('fizz' + ('buzz') || i) // Output - fizzbuzz