javascript FizzBuzz / if else statements

Question

Here is the code:

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

and this is the output:

1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz
16
17
Fizz
19
Buzz

The code is ok and works well but I don't understand why does it only print FizzBuzz when logical operator && is in if statement and not in else if?

Because once a condition is true, it doesn't fall through to the next condition. Use multiple ifs if you want that — Andrew Li, Sep 25 '16 at 14:25

Yangshun Tay · Answer 1 · 2016-09-25T15:01:24.717

Once one of the conditions in the if (...) / else if (...) is true (from top to bottom), the rest of the conditions are not evaluated and the program goes into the next loop (next i) value.

If you swap the order:

var i = 0;
for (i = 1; i <= 20; i++) {
    if (i % 5 === 0) {
        // This evaluates to true for a number that is multiple of 5 and 3, and it prints "Buzz", and goes into the next loop.
        console.log("Buzz");
    } else if (i % 5 === 0 && i % 3 === 0) {
        console.log("FizzBuzz");
    } else if (i % 3 === 0) {
        console.log("Fizz");
    } else {
        console.log(i);
    }
}

If you are looking for a shorter version of FizzBuzz, here's an interesting answer by Paul Irish (added more brackets for clarity):

for (var i = 1; i <= 100; i++) {
    var f = i % 3 == 0, b = i % 5 == 0;
    console.log(f ? (b ? "FizzBuzz" : "Fizz") : (b ? "Buzz" : i));
}

Source: https://gist.github.com/jaysonrowe/1592432#gistcomment-790724

Development Studio · Answer 2 · 2020-05-20T15:36:43.157

This is correct way with else if statement:

for(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);
  }
}

Another solution with switch statement:

for(i = 1; i <= 100; i++){
 switch (true) {
  case (i % 3 === 0 && i % 5 === 0) :
    console.log('FizzBuzz');
    break;
  case (i % 3 == 0) :
    console.log('Fizz');
    break;
  case (i % 5 == 0) :
    console.log('Buzz');
    break;
  default:
    console.log(i);
    break;
  } 
}

javascript FizzBuzz / if else statements

2 Answers2