## DEV Community is a community of 851,150 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

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

``````

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!

## Discussion (9)

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

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 • 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;
}
``````
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 :-)

Akhil

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

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

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