Why is this javascript for loop running only once?

Question

function f1() {
   for (i = 0; i <= 5; i++)
      console.log(i);
}
function foo() {
   for (i = 0; i < 5; i++)
      f1();
}
foo();

Hi, I'm trying to understand why the result of executing foo is:

And not:

It's a slide I am reading about JS and its talking about when you don't use var then it is defined on the global object and provides this example without any further details why we get the result.

I thought it will simply loop and run the f1 function each time until its less than 5.

Please help me understand.

Thanks

i is global and shared between your functions. Use var to make both instances local. — Frédéric Hamidi
– Frédéric Hamidi, Commented May 28, 2014 at 11:31
Thanks for all your responses. I already tested with var and got the result I was expecting. I wanted to understand why it was doing that. — Kam
– Kam, Commented May 28, 2014 at 11:39
Correct me if I am wrong. So basically, because the script encounters the i in f1, it runs this and doesn't bother running the i in foo??? — Kam
– Kam, Commented May 28, 2014 at 11:41
@Kam: I've added a short description of what's happening to my answer. — Cerbrus
– Cerbrus, Commented May 28, 2014 at 11:46
The fact is that, as written, i is a shared global variable, so foo starts, sets is to 0 then calls f1 which loop on it up to 5, when control returns to foo it founds that i is 5 and so it ends the loop. — Matteo Tassinari
– Matteo Tassinari, Commented May 28, 2014 at 11:46

Cerbrus · Accepted Answer · 2014-05-28 12:18:55Z

17

The problem is in your iterators (i):

for (i = 0; i <= 5; i++)

i is global, and both your for loops test against it, making them only run once, and aborting when i == 5.

So, what happens is this:

When you call foo(), foo tells the js interpreter to create a variable in the global scope called i, and set it to 0. Then foo calls f1.
There, the for loop sets i, which already exists, to 0, and runs it's loop like it should, incrementing i up to 5.
Then, it's time for the second iteration of the loop in foo, so it checks if i < 5, but it's not (i==6 (5 from f1, +1 from foo)), so it will not call f1 again.

To fix this, either declare them in the function's local scope using var:

function f1() {
    for (var i = 0; i <= 5; i++)
        console.log(i);
}
function foo() {
    for (var i = 0; i < 5; i++)
        f1();
}
foo();

Or, use different variables:

function f1() {
    for (i = 0; i <= 5; i++)
        console.log(i);
}
function foo() {
    for (j = 0; j < 5; j++)
        f1();
}
foo();

However, this second option is a bad idea, since it will both place i and j in the global scope, which is asking for conflicts. I'd suggest using the var option.

edited May 28, 2014 at 12:18

answered May 28, 2014 at 11:33

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Cerbrus Over a year ago

@Downvoter: I edited in a bit of information explaining why option 2 isn't a good idea. I'd appreciate if the downvote could be removed.

Sebastien C. Over a year ago

Good answer but I can't approve the second solution. Using global variables like this will inevitably cause problems and become a pain to debug.

Cerbrus Over a year ago

@sebcap26: And that's exactly why I said that the second option is a bad idea, right below that option.

Matteo Tassinari Over a year ago

Actually, after f1 has executed, it should be i == 6

Matteo Tassinari · Accepted Answer · 2014-05-28 11:44:52Z

9

If you write your loop like

for (i = 0; i < 5; i++)

here i refers to a global variable, because you have not declared it with the var keyword, and since you use i in both functions, they end up actually using the same variable.

You should then replace both loops with

function f1() {
   for (var i = 0; i <= 5; i++)
      console.log(i);
}
function foo() {
   for (var i = 0; i < 5; i++)
      f1();
}
foo();

As your code is originally written, i is a shared global variable, so foo starts, sets is to 0 then calls f1 which loop on it up to 6, when control returns to foo it founds that i is 6, so i < 5 is false and so it ends the loop.

edited May 28, 2014 at 11:44

answered May 28, 2014 at 11:34

Matteo Tassinari

18.6k8 gold badges65 silver badges85 bronze badges

1 Comment

webkit Over a year ago

this is a precise and direct answer to the question

Collectives™ on Stack Overflow

Why is this javascript for loop running only once?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related