Fizz Buzz Solution JavaScript

If you have been in a developer interview you have probably gotten the fizz buzz problem at some point. Whether it was creating the solution or debugging their wrong solution it has probably come across your screen at least once. If you haven’t started interviewing yet this is a great problem to know and understand the solution to. So what is the problem?

Disclaimer: there are MANY ways to solve this problem this is how I would answer it in a coding interview and would accept as a proper answer for all level devs

TLDR: The solution is at the bottom ;p

The Problem

Write a program that takes two numbers and prints the numbers. 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”.

Example:

The Breakdown

The answer to any programming interview question is in the ability to break down the problem. To break down problems first break down the different parts of the solution that are important and write it in a way that makes sense to you or closer to the code you know you will need to write. So lets break down exact what we know we need to do. We need to:

• Accept 2 numbers - start and end

• For numbers start to end we need to do something

• If the number is a multiple of 3 log “Fizz” instead of the number

• If the number is a multiple of 5 log “Buzz” instead of the number

• If the number is a multiple of 3 AND 5 log “FizzBuzz” instead of the number

• If not logging “Fizz”, “Buzz”, or “FizzBuzz” log the number

Note that I changed some of the wording to be closer to code such as using “log” instead of “print" and formatting it in a for and if statement style instead of proper sentences.

Start Coding

Now that we have our breakdown lets start coding!

We know that we need to create a function that accepts 2 parameters, a starting number and an ending number.

function fizzBuzz(start, end){
    //For numbers start to end we need to do something
    //If the number is a multiple of 3 log “Fizz” instead of the number
    //If the number is a multiple of 5 log “Buzz” instead of the number
    //If the number is a multiple of 3 AND 5 log “FizzBuzz” instead of the number
    //If not logging “Fizz”, “Buzz”, or “FizzBuzz” log the number
}

Notice how I added the break down as comments so I know what I want to do within my function. also noticed I named my function “FizzBuzz” and this is the name of the problem you can so name it something else but the name should make sense based on what you are creating a solution for.

Next we know that for each number 1-100 (but could also be more or less numbers) we need to print (or log) something.

function fizzBuzz(start, end){
    for(let num=start; num <= end; num++){
      //If the number is a multiple of 3 log “Fizz” instead of the number
      //If the number is a multiple of 5 log “Buzz” instead of the number
      //If the number is a multiple of 3 AND 5 log “FizzBuzz” instead of the number
      //If not logging “Fizz”, “Buzz”, or “FizzBuzz” log the number
    }
}

Now we have our basic for loop that will loop from our start number to end number. A lot of for loops use “let i=” instead of “let num=” but I like readability over less characters and find that naming is very important in practical uses so I use more descriptive names. If this for loop doesn’t make sense to you check this W3Schools JavaScript loops page

Now we know we need to check if current number is a multiple of 3 and if so we need to print (or log) '“Fizz”. For this we are going to use modulus. If you don’t know what that is we are basically going to check if the number we are on divided by 3 has a remainder. If not it is divisible by 3. If you didn’t know that you should probably check out this W3Schools JavaScript arithmetic page.

function fizzBuzz(start, end){
    for(let num=start; num <= end; num++){
        if(num % 3 === 0){
          console.log("Fizz")
        }
        //If the number is a multiple of 5 log “Buzz” instead of the number
        //If the number is a multiple of 3 AND 5 log “FizzBuzz” instead of the number
        //If not logging “Fizz”, “Buzz”, or “FizzBuzz” log the number
    }
}

Now we need to do the same for multiples of 5

function fizzBuzz(start, end){
    for(let num=start; num <= end; num++){
        if(num % 3 === 0){
          console.log("Fizz")
        }
        else if(num % 5 === 0){
          console.log("Buzz")
        }
        //If the number is a multiple of 3 AND 5 log “FizzBuzz” instead of the number
        //If not logging “Fizz”, “Buzz”, or “FizzBuzz” log the number
    }
}

I hope that looked familiar ;p… then we are going to check for multiples of 3 and 5

function fizzBuzz(start, end){
    for(let num=start; num <= end; num++){
        if(num % 3 === 0){
          console.log("Fizz")
        }
        else if(num % 5 === 0){
          console.log("Buzz")
        }
        else if(num % 5 === 0 && num % 3 === 0){
          console.log("FizzBuzz")
        }
        //If not logging “Fizz”, “Buzz”, or “FizzBuzz” log the number
    }
}

That should also look familiar. If the && doesn’t look familiar that is just evaluating that the first argument (num % 5) and the second argument (num % 3) are both true. If didn’t know that before this post please check out this W3Schools page on JavaScript comparisons

Last but not least if none of those are true we are going to log the number we are on.

function fizzBuzz(start, end){
    for(let num=start; num <= end; num++){
        if(num % 3 === 0){
          console.log("Fizz")
        }
        else if(num % 5 === 0){
          console.log("Buzz")
        }
        else if(num % 5 === 0 && num % 3 === 0){
          console.log("FizzBuzz")
        } else {
          console.log(num)
        }
    }
}

Now we run it… (if you don’t know how the fastest way is to right click in your browser, click inspect, at the top of the window that pops out click console, copy your code and paste it in that window. then run a test ex: fizzBuzz(3, 15) )

wait for it….

BUT RACHAEL ITS NOT WORKING!

by now you should see when it is supposed to log “FizzBuzz” its logging “Fizz”. Take a second. Look at the code and see if you can see why.

I hope you found it but if not that’s okay too! its because we are checking if it is divisible by 5 and 3 after we are checking for one or the other first. The loop will stop at the first statement that evaluates to true and log that. In this case if it is divisible by 3 AND 5 it is also divisible by just 3 as well so it stops at the first if and console logs “Fizz”. So how do we fix it?

Final Solution

All we have to do is move the divisible by 3 and 5 check to the top and you have your final answer! Congrats!

function fizzBuzz(start, end){
    for(let num=start; num <= end; num++){
        if(num % 5 === 0 && num % 3 === 0){
          console.log("FizzBuzz")
        }   
        else if(num % 3 === 0){
          console.log("Fizz")
        }
        else if(num % 5 === 0){
          console.log("Buzz")
        }
        else {
          console.log(num)
        }
    }
}

I hoped this helped! Now go kick ass on your interview!

Comments

[Brandon Weaver]

Nice solution! if (num % 5 === 0 && num % 3 === 0) can be simplified as if (num % 15 === 0)
Here's a one-liner using ternary operation.

function fizzBuzz(start, end) {
    for (let i = start; i <= end; i++) i % 15 === 0 ? console.log("FizzBuzz") : i % 5 === 0 ? console.log("Buzz") : i % 3 === 0 ? console.log("Fizz") : console.log(i);
}

[Antony Garand]

How about a shorter one liner?

Still using the ternary operators, but using a bit of magic as well.

answer re: 1, 2, Fizz, 4, Buzz

Nov 3 '15

15

JavaScript, 62 bytes

for(i=0;++i<101;console.log(i%5?f||i:f+'Buzz'))f=i%3?'':'Fizz'

I think I this is the shortest Javascript solution now.

Open Full Answer

[Hello Dev World Blog]

Ya there are definitely shorter solutions I've seen a couple of one liners most aren't very readable and confuse a lot of devs lol I generally lean more towards readability and this was more to teach newer devs how to break down problems to find their solutions but this is definitely a good solution as well :)

[Antony Garand]

Agreed, which is why I initially posted this comment!

While it is possible to make the code very short, your solution is a lot more legible and maintainable than these one liners.

[Hello Dev World Blog]

I generally lean more towards readability and when its broken out in different lines i find it to be more readable and this was more to teach newer devs how to break down problems to find their solutions but this is definitely a good solution as well :)

[Brandon Weaver]

Agreed. Your solution is much better, not only for teaching newcomers, but in a real-world environment as well. I wanted to point out that modulus 5 and 3 is the same as modulus 15, and add something different while I was at it.