CODEWITHSUNDEEP
javascriptfor-loop
Chris
Chris

Reputation: 13

Why does console.log outside "for" loop print out an "extra" number?

I'm working on some simple Javascript codes and there is something I'm not sure I understand. When I input this code,

for (var x = 0; x < 5; x++)
{
    console.log(x);
}

naturally, it prints out 0 to 4. But if I add

for (var x = 0; x < 5; x++)
{
    console.log(x);
}
console.log(x);

then it will print out 0 to 5. Why does it print out 5?

Upvotes: 0

Views: 2806

Answers (4)

Adam_O
Adam_O

Reputation: 341

Some additional considerations. This explains why 'x' is still in scope for the last console.log(x). Scope might not behave this way in other languages.

See the MDN for the "initialization parameters" of a for-loop:

An expression (including assignment expressions) or variable declaration. Typically used to initialize a counter variable. This expression may optionally declare new variables with the var keyword. These variables are not local to the loop, i.e. they are in the same scope the for loop is in. The result of this expression is discarded.

From MDN:

Important: JavaScript does not have block scope. Variables introduced with a block are scoped to the containing function or script, and the effects of setting them persist beyond the block itself. In other words, block statements do not introduce a scope. Although "standalone" blocks are valid syntax, you do not want to use standalone blocks in JavaScript, because they don't do what you think they do, if you think they do anything like such blocks in C or Java.

(This is pulled from answers by insertusernamehere and user2718994 from this question)

Upvotes: 0

Tymek
Tymek

Reputation: 3113

I understand For as short version of While.

for(<start>, <condition>, <change>) {
    <loop>
}
<end>

Is equal to:

<start>
while(<condition>){
    <loop>
    <change>
}
<end>

You can see, that <change> is after <loop> but somehow before next <condition> check.

  • check condition
  • make changes
  • check condition
  • make changes
  • check condition, fails, exit loop

And you can see, that changes where applied.

If you don't want this to happend

Use do-while loop. But in some cases you have to check condition in the first place. Ex.:

<start>
if(<condition>){
    do {
        <loop>
        <change>
    } while(<condition>);
}
<end>

There are other methods, but it's just syntax, not algorythm change.

Upvotes: 1

Liquidchrome
Liquidchrome

Reputation: 904

It had to check and see if x was greater than 5, or else the loop would never end.

If x is equal to 4, it runs the loop and increments x by 1 again, making x return 5. When it checks to see if x is less than 5, it evaluates to false and ends the loop.

For this reason, when the loop ends, x is equal to 5.

Upvotes: 3

cFreed
cFreed

Reputation: 4474

That's totally normal!

The last iteration was not the 5th one (which printed "4", as expected), but the 6th one, where it found that x value ("5") exceeded the defined limit.

Since for statement is not a closure, var x stills exists at the loop end, so it prints its value.

Upvotes: 1

Related Questions