If/Else and Specificity: Understanding "FizzBuzz"

CAVEAT: This article isn't exactly meant to be taken as coding law. This is simply my understanding and method of coding if/else statements! Find your own method or copy mine-- if you think it applies to your solution, then try it!

This article also assumes you already know how to write for-loops and if/else statements in JavaScript.

• EDIT 1/29/2020 at 4:35 PM: fixed the formatting of the code blocks and made it more readable*

---

In some iteration of the infamous "FizzBuzz" question, you will be asked to:

• Write a JavaScript application that logs all numbers from 1 - 100.
• If a number is divisible by 3 log "Fizz" instead of the number.
• If a number is divisible by 5 log "Buzz" instead of the number.
• If a number is divisible by 3 and 5 log "FizzBuzz" instead of the number.

Look at all those requirements. If you're like me -- someone who isn't exactly fond of math -- you'd either attempt to crunch numbers or walk away (and deal with it later. Maybe.)

But, honestly, the solution is simple and sweet:

Presenting: the modulo (%)

What does it do? It gives you the remainder--and ONLY the remainder.

Since we're only finding numbers divisible by 3, 5, and both 3 and 5, the remainder must equal ZERO (0).

So at first, I wrote the solution like this:

for (i=0; i < 100; i++){
    if((i % 3) === 0){
        console.log("Fizz");
   }
    else if((i % 5) === 0){
        console.log("Buzz");
    }
   else if((i % 3) === 0 && (i % 5) === 0){
        console.log("FizzBuzz");
    }
   else {
        console.log(i);
    }
}

Success! Fizz's and Buzz's were being logged.
But wait-- not FizzBuzz's?

I realized my mistake and forgot:

Code is executed from the top-down.

So I fixed it:

for (i=0; i < 100; i++){
    if((i % 3) === 0 && (i % 5) === 0){
        console.log("FizzBuzz");
    }
    else if((i % 5) === 0){
        console.log("Buzz");
    }
    else if((i % 3) === 0){
        console.log("Fizz");
    }
    else {
        console.log(i);
    }
}

This is where specificity comes in!

We have 3 requirements, with one involving numbers that have been previously mentioned: 3 and 5.

Since printing "FizzBuzz" has more requirements/rules, I moved it to the top to be executed first.

My mistake was that I wrote the code in the order of instruction.

Bonus: We can simplify the solution a bit more by changing the first if/else condition:

• EDIT 1/29/2020 at 4:40 PM: DO NOT DO THIS. THINK OF SCALABILITY.

if((i % 15) === 0){
    console.log("FizzBuzz");
 }

Remember: this still has to execute at the top. We're looking for numbers that divide by 3 and 5.

Why 15? Typically, when dealing with division, one would think of it's opposite for the "reverse" solution: multiplication.

---

That's it!! Hope you all found this useful! Feedback and constructive critique are always welcome in the comments or my DMs. :)

---

Question for the comments:

What was the first programming problem you conquered, what language, and how did it feel when all the information finally clicked?

---

Thanks for reading! If you'd like to keep in touch, please don't hesitate to follow me here and add me on Twitter (@catcarbn) and LinkedIn!

Comments

[Lars Moelleken]

let console_log_content;
for (let i = 0; i < 100; i++) {
    console_log_content = '';

    if (i % 3 === 0) {
        console_log_content += 'Fizz';
    }

    if (i % 5 === 0) {
        console_log_content += 'Buzz';
    }

    // fallback
    if (console_log_content === '') {
        console_log_content = i;
    }

    console.log(console_log_content);
}

[Jan Küster]

Hey Cat, some things I'd like to add to your code. The code is not wrong but there is space for improvement in terms of readability (especially brackets positioning) and failsafety (you should always use === in favor of ==). The cool things is, that a linter can help you with that.

[Cat]

Linted and added the "=". I need to be more careful about that! Thank you!

[Ravavyr]

This solution is great to optimize the code.
However in the real world, next week some non-tech person is gonna come in and go "When it's divisible by 3 i also want you to display "pop" and "pizzaz" if it's divisible by 4"

At that point the final optimization becomes a hindrance, so the second version of the code is better to work with.

This happens in real world situations ALL the time.
A lot of framework devs don't take this into consideration and over-optimize the code unnecessarily leading to headaches for their future selves, or worse, for the poor sucker who has to take over their code in a year to apply new changes.

I suppose the lesson is: Optimize, only as far as you need to to gain the performance expected. Anything more, might come back to haunt you.

[Cat]

Great advice. Definitely need to keep scalability in mind. I added the correction to the article. Thanks so much for sharing!

[Jon Randy 🎖️]

for (i=0; i < 100; i++) console.log([i%3?'':'Fizz',i%5?'':'Buzz'].join('')||i)

😝

[Orim Dominic Adah]

Haha.. Nice..
My first was building a question and answer program in QBASIC.
The program asks you a couple of questions and at the end of its questioning, it displays all your answers.
I was proud of myself for achieving that.. but who uses QBASIC these days.. Haha

FizzBuzz was my first JavaScript algorithm question. I got it right at first try using the logic you used to get it right too.
Cheers!

[Jan Küster]

This is totally correct, yet you should as often as possible compare strict in order to avoid any unintended errors.

[Arit Developer]

Hi Cat, awesome post! Thank you for sharing what you're learning 😄 When I started bootcamp, I was always tripped up with the "FizzBuzz" part too 😅

[nineismine]

Posting from my phone so this is all off the cuff...

Couldnt you also just do the 2 is's (if 3 ... fizz )
(If 5 ... buzz)

The fall through would handle both cases...