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

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++){}
}

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')     
      }  
    }
  }

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')
      } 
    }
  }

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

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

1
2
fizz
4
buzz
fizz
7
8
fizz
buzz

I hope this method will be helpful!

Comments

[Akhil]

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;
}

[Tadea Simunovic]

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!

[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.

[Akhil]

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;
}

[JP Antunes]

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

[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

[tatsuo fukuchi]

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.

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

[Tadea Simunovic]

Thanks for sharing Si! I will look at it.