DEV Community

loading...

JavaScript FizzBuzz solution in details

hexangel616 profile image Emilie Gervais ・2 min read

The first time I solved FizzBuzz, my code result was:

for (let i = 1; i <= 100; 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);
    }
}

While looking for pull requests to make for Hacktoberfest, I stumbled upon

GitHub logo s-bridges / Hacktoberfest_Fizzbuzz

Hacktoberfest FizzBuzz Challenge

Hacktoberfest_Fizzbuzz

Hacktoberfest FizzBuzz Challenge

This challenge is meant to help developers solve the FizzBuzz challenge in their respective programming language, as well as teach new GitHub users how to make their first Pull Request in honor of Hacktoberfest's 2019 campaign.

Problem

Write a short program that prints each number from 1 to 100 on a new line For each multiple of 3, print "Rat" instead of the number For each multiple of 5, print "Ghost" instead of the number For numbers which are multiples of both 3 and 5, print "Spider" instead of the number.

Write a solution (or reduce an existing one) so it has as few characters as possible.

How to Create a Pull Request in GitHub

  • Click on the fork in the top right corner of this repo.
  • Clone fork to your machine. git clone https://github.com/${username}/Hacktoberfest_Fizzbuzz
  • Create a branch titled your programming language. git checkout -b python

~ the Hacktoberfest_Fizzbuzz repo (😢 it has now been marked as 'invalid' for hacktoberfest). On the moment though, I got excited and aimed to refactor my previous solution to the smallest possible one I could find using JavaScript.

Note: The repo author asked to print 'Spider' instead of 'FizzBuzz', 'Ghost' instead of 'Buzz' and 'Rat' instead of 'Fizz'.

My result:

console.log([...Array(100)].map((_,i)=>{i++;return(i%15?'':'Spider')||(i%5?'':'Ghost')||(i%3?'':'Rat')||i;}).join('\n'));

SET UP
--> console.log(): to directly log the result.
--> [...Array(100)]: to create a temporary array of 100 to produce the much wanted indexes.
--> .map((n,i)=>{}: to return an array filled with new content after the current values have iterated through the method's callback function.

CALLBACK
--> i++: to initiate i to be 1 (in this case, we don't want to start from 0).
--> return: to stop the function from running once its done iterating and return the new array.
--> (i%15?'':'Spider'): check if i is divisible by 15 (if divisible by 15, it is also divisible by both 3 and 5); if there's a remainder, print nothing; if there isn't, print 'Spider'.
--> ||: OR
--> (i%5?'':'Ghost'): check if i is divisible by 5; if there's a remainder, print nothing; if there isn't, print 'Ghost'.
--> ||: OR
--> (i%3?'':'Rat'): check if i is divisible by 3; if there's a remainder, print nothing; if there isn't, print 'Rat'.
--> ||: OR
--> i: if it isn't divisible by any of the previous options, print the fucking number.

FINISHING
--> .join('\n'): to return a string of all the concatenated elements of the new array using a new line as separator; thus, jumping a line between each elements to console.log a nice SpiderGhostRatNumber list! =)

PS. In JavaScript, an integer converts to a boolean such that 0 is false and all non-zero values (even negative ones) are true.

Melting Statue Of Liberty GIF

What's your FizzBuzz solution?

Discussion

pic
Editor guide
Collapse
tejaswipandava profile image
tejaswipandava

I still like the first solution you have provided only change I would do is remove the math reminder operation out of the if loop like below (this improves performance by 3x)

function fizzBuzz(n) {
    let x = 0;
    let y = 0;
for (let i = 1; i <= 100; i++) {
        var result = "";
        x = i%3;
        y = i%5;
        if (x === 0 && y === 0) result += "fizzbuzz";  
        else if (x === 0) result += "fizz";        
        else if (y === 0) result += "buzz";
        console.log(result || i);
    }
}

fizzBuzz(15);

even though the one-liner is fancy it's very complicated to understand and its really slow.

Collapse
hexangel616 profile image
Emilie Gervais Author

Yes, great work 🙂