for循环和if语句

Question

I've encountered some misundertanding. There is a for cycle with some if statements:

for (var number = 1; number < 100; number++) {
  if (number % 3 == 0 && number % 5 == 0)
    console.log(number + "fizzbuzz");
  if (number % 5 == 0)
    console.log(number + " buzz");
  if (number % 3 == 0)
    console.log(number + " fizz");
  else console.log(number);
}

The output of this code is 1, 2, 3 fizz, 4, 5 buzz, etc. So it's what expected. But if we delete braces the output will be like this:

15fizzbuzz
30fizzbuzz
45fizzbuzz
60fizzbuzz
75fizzbuzz
90fizzbuzz
100 buzz
100

Also, there is a second implementation of this program(with the right-way if-else statements):

for (var number = 1; number < 100; number++)
  if (number % 3 == 0 && number % 5 == 0)
    console.log(number + "fizzbuzz");
  else if (number % 5 == 0)
    console.log(number + "buzz");
  else if (number % 3 == 0)
    console.log(number + "fizz");
  else console.log(number);

Notice that there are no braces too, but the output is ok. Can you explain, what's the difference?

Answer 1

As a lot of comments pointed out, its the lack of elses ( or blocks ) in your first code that make it going wrong.

//a bit shortified to make it clearer
var a=true,b=true;
if(a && b){ }// will be executed
if(a){ } //will be executed
if(b){} //will be executed

//vs.
if(a&&b){}//will be executed
else if(a){}//else => not executed
else if(b){}//else => not executed

However, it might be better to restructure your code as its quite repetitive:

for (var number = 1; number < 100; number++)
    console.log(number+ (number % 3 == 0?"fizz":"")+ (number % 5 == 0?"buzz":""));

So log the number, if its a multiple of 3 add "fizz" and if its an multiple of 5 add "buzz"...

Answer 2

The syntax of a for loop is for (statementA; statementB; statementC) statementD . Statements can be grouped together with {} , so {statement, statement, ...} can be used where a single statement is expected.

for (var number = 1; number < 100; number++) {
  if (number % 3 == 0 && number % 5 == 0)
    console.log(number + "fizzbuzz");
  if (number % 5 == 0)
    console.log(number + " buzz");

In this case statementA is var number = 1 , statementB is number < 100 , and statementC is number++ and statementD is if (number % 3 == 0 && number % 5 == 0) console.log(number + "fizzbuzz") . The second if is another statement that does not belong to the for loop. If you want for the second if statement to belong to the for loop, you need to use {} to group the statements together.

The syntax of a if statement is if (expression) statement or if (expression) else statement . Using several if else aligned you are able to pass the first statement to the for loop, the second statement is going to belong to the first if that still belongs to the for loop. That is why the last example works without {} .

It is important to note that the code may work, but it is still bad code. It is recommended to use {} to group the statement from below for for , while , and if even if it is a single statement.

You may want to learn the JavaScript syntax before trying to understand JavaScript code. https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps

Answer 3

When you miss a semicolon or brackets, javascript tries to insert it on its own, & at times can produce some weird results like this. (Which is correct by the rules, just humans & machine don't agree on how to process it :D )

When you remove braces of for loop javascript tries to puts braces in code & run it, this is different that how you expect it to behave thus you are confused!

What you wrote & read:

for (var number = 1; number < 100; number++)
  if (number % 3 == 0 && number % 5 == 0)
    console.log(number + "fizzbuzz");
  if (number % 5 == 0)
    console.log(number + " buzz");
  if (number % 3 == 0)
    console.log(number + " fizz");
  else console.log(number);

What javascript did with it & executes:

for (var number = 1; number < 100; number++){ //runs loop here
  if (number % 3 == 0 && number % 5 == 0){
    console.log(number + "fizzbuzz"); //prints for first condition
  }
}

//now number is 100!

if (number % 5 == 0){
  console.log(number + " buzz"); //prints for second condition once cause 100%5==0 is true
}

if (number % 3 == 0){
  console.log(number + " fizz"); 
}
else{
  console.log(number); //prints for this else condition once cause 100%3==0 is false
}

Which is perfectly valid & there is no error or bug here!

This happens because if the is no immediate else after if then javascript terminate that statement there, but if you use else...if then it continues that statement till if find a else or a statement not followed by else

If you want to play with this type of behaviour use Google Closure Compiler to see how code is interpreted by machine.

NOTE: As @carcigenicate suggest in comments, Always use braces!