DEV Community

Tadea Simunovic
Tadea Simunovic

Posted on • Updated on

FizzBuzz JavaScript

One of the classic interview question! I will show you how to resolve it in JavaScript.

Challenge
Write a program that console logs the numbers from 1 to n. For multiples of three print "fizz" instead of the number and for the multiples of five print "buzz". For number which is multiples of both three and five console log "fizzbuzz"

If you know how to calculate a multiple of the number in JavaScript will make this challenge much easier to understand. This example use modulo operator (%). With modulo, we can determine a reminder of the number during division.
Essentially we want to do is take a number that we are trying to use the modulo operator with the number that we are using as the multiple and the real question is whether or not the results to that are equal(===) to zero(0).

Example

12 % 3 === 0    //true
11 % 3 === 0   // false

Enter fullscreen mode Exit fullscreen mode

So in practice, you're going to test for each number from 1 to n (the number that we pass in as an argument) if a given number(n) modulo(%) 3 is equal(===) to zero(0) and if a given number(n) modulo(%) 5 is equal(===) to zero(0).

First, we will set up for loop to iterate from 1
to <= n, and each time we will increment by one(1)

function fizzBuzz(n) {
  for (let i = 1; i<= n; i++){}
}
Enter fullscreen mode Exit fullscreen mode

Then we will check if the number is multiple by three and five then we want to console log statements that are required.

function fizzBuzz(n) {
  for (let i = 1; i<= n; i++){
   if (i % 3 === 0 && i % 5 === 0) {
     console.log('fizzbuzz')     
      }  
    }
  }
Enter fullscreen mode Exit fullscreen mode

Next, we will check if we have a multiple of three and print out 'fizz'

function fizzBuzz(n) {
  for (let i = 1; i<= n; i++){
   if (i % 3 === 0 && i % 5 === 0) {
     console.log('fizzbuzz')     
      } else if (i % 3 === 0) {
        console.log('fizz')
      } 
    }
  }
Enter fullscreen mode Exit fullscreen mode

Else, if we have a multiple of five we will print out 'buzz', and if we failed all of this else of statements we will print out a number.

function fizzBuzz(n) {
  for (let i = 1; i<= n; 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)
      }
    }
  }
Enter fullscreen mode Exit fullscreen mode

If you run console.log(fizzBuzz(10)) this will be output:

1
2
fizz
4
buzz
fizz
7
8
fizz
buzz

Enter fullscreen mode Exit fullscreen mode

I hope this method will be helpful!

Discussion (9)

Collapse
akhilpokle profile image
Akhil • Edited on

I think you made a small typo in for loop, for( i = 1;i<=n ; i++).
I was asked this same question and I gave the exact answer. The answer has one disadvantage to it, if the interviewer asks to modify question such that,

if the current number is divisible by 7 print foo
if its divisible by 11 print bazz
if its divisible by 7 and 11 print foobazz
if its divisible by 3 and 7 print fizzfoo
if its divisible by 3 and 5 and 7 print fizzbuzzfoo

the above approach doesn't work well in these conditions since now we have to maintain multiple conditions, instead do this.

let str = "";
for( i = 1;i<=n ; i++){
    if(n%3 == 0) str += "fizz";
    if(n%5 == 0) str += "buzz";
    if(n%7 == 0) str += "foo";
    if(n%11 == 0) str += "bazz";
    else str += n;
}
Collapse
tadea profile image
Tadea Simunovic Author

Hey Akhil,
Thanks for pointing out. I was approaching to this specific challenge with 3 and 5 but great to know this! Thanks for sharing!

Collapse
jpantunes profile image
JP Antunes

Mind you that with that approach every n is evaluated 4 times before a result sting is printed , so it's less efficient than Tadea's solution.

Collapse
akhilpokle profile image
Akhil • Edited on

Nope, it would be the same since here I have modified the question for 4 conditions, ie 3,5,7,11. If we follow the original question ie checking for 3 & 5, then code will be :

let str = "";
for( i = 1;i<=n ; i++){
    if(n%3 == 0) str += "fizz";
    if(n%5 == 0) str += "buzz";
    else str += n;
}
return str;
}
Thread Thread
jpantunes profile image
JP Antunes • Edited on

Interesting. What do you think happens after each if statement?
Or in another way, what is the difference between two or more if's and a chain of if, else if, else?

edit: a picture of my cat doing a code review :-)
visual

Thread Thread
akhilpokle profile image
Akhil

oh yeah, that else part is a really bad bug from my side
it should be

if(str ="") str += n;

what this video : youtube.com/watch?v=QPZ0pIK_wsc

Collapse
ttatsf profile image
tatsuo fukuchi • Edited on

Here another way to make it easier to modify it :

const FIZZBUZZ_RULE = 
      [
        {num:3, text:"Fizz"}
        , {num:5, text:"Buzz"}
        , {num:7, text:"Foo"}
        , {num:11, text:"Bazz"}
      ]

const fizzBuzz = n =>
  FIZZBUZZ_RULE.reduce(
    (acc, e) => 
       ! isDividable(e.num)(n) ? acc
       : ! acc.dividable ? {val:e.text, dividable:true}
       : {...acc, val:acc.val + e.text} 
    , {val:n, dividable:false}
  ).val

const isDividable = m => n => 
  n % m === 0

// Example:
fizzBuzz(3*5*7*11)  //  'FizzBuzzFooBazz'

for(let i = 1; i < 16; i++) console.log( fizzBuzz(i) )
/*
1
2
'Fizz'
4
'Buzz'
'Fizz'
'Foo'
8
'Fizz'
'Buzz'
'Bazz'
'Fizz'
13
'Foo'
'FizzBuzz'
*/

You can add/remove a rule in FIZZBUZZ_RULE.

Collapse
devdrake0 profile image
Si

I wrote a similar post over on CodeTips showing how to complete it using JavaScript and Go, just in case you're interested in seeing the Go implementation as well :)

Collapse
tadea profile image
Tadea Simunovic Author

Thanks for sharing Si! I will look at it.