DEV Community

Cover image for Fizz Buzz Solution JavaScript
Hello Dev World Blog
Hello Dev World Blog

Posted on • Updated on • Originally published at hellodevworld.com

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: Alt Text

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
}
Enter fullscreen mode Exit fullscreen mode

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
    }
}
Enter fullscreen mode Exit fullscreen mode

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
    }
}
Enter fullscreen mode Exit fullscreen mode

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
    }
}
Enter fullscreen mode Exit fullscreen mode

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
    }
}
Enter fullscreen mode Exit fullscreen mode

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)
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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)
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (6)

Collapse
 
brandonmweaver profile image
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);
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
antogarand profile image
Antony Garand

How about a shorter one liner?

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

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.

Collapse
 
hellodevworldblog profile image
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 :)

Thread Thread
 
antogarand profile image
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.

Collapse
 
hellodevworldblog profile image
Hello Dev World Blog • Edited

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 :)

Collapse
 
brandonmweaver profile image
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.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.