Need Help Understanding Global and Local Variables in for loop

Tell us what’s happening:
I’m having trouble understanding why this function returns 3 instead of 2. In the explanation it says that “the value assigned to i was updated and the printNumTwo() returns the global i and not the value i had when the function was created in the for loop.”

I understand that there is a difference between global and local variables, but printNumTwo doesn’t have a value of 3 as a global variable. And when the for loop runs, i=3 when it ends, but would not run through the if statement at the end because i != 2.

Your code so far

 var printNumTwo;
for (var i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
// returns 3

function checkScope() {
'use strict';
var i = 'function scope';
if (true) {
  i = 'block scope';
  console.log('Block scope i is: ', i);
}
console.log('Function scope i is: ', i);
return i;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.122 Safari/537.36.

Challenge: Compare Scopes of the var and let Keywords

Link to the challenge:

but have you read this part of the exercise

With the var keyword, i is declared globally. So when i++ is executed, it updates the global variable

so when i < 3 , it still runs the i++ and updates to 3

so when i === 2, it would return i, but since the for loop ends because i = 3, the return i in the if loop returns as i=3?

In fact, the function stores the link to the i variable. When you call the function, the variable i has value 3. So it shows you 3.

i is declared globally, printNumTwo returns i , so it returns 3 . I think you are partly confused because of the < 3 conditions. Change the if i === 2 to if i ===1 and have a look at what printNumTwo still returns

And also, you’ve said:

No, it doesn’t return when i===2 - you just create a new function when i===2, but you didn’t run it. If you ran the function in the if block (where i==2), you would get 2.

But you’ve just declared a function, so when you run it, JS needs to execute ‘return i’ statement - so it looks for i and finds it, and i is equal to 3.

For example, if you add a z variable in if block:

var printNumTwo;
for (var i = 0; i < 3; i++) {
  if (i === 2) { 
var z = i;
    printNumTwo = function() {
 return z;
    };
  }
}
console.log(printNumTwo());

you would get two, because variable z gets value 2 in the if statement and is not changed afterwards.

from what I understand this is how I see the code running. and please let me know where I am going wrong with this.

with the for loop: i starts at 0, then it continues the for loop because 0<3.
Then it runs through the if statement, which is not correct therefore, it does not return i.
Then, it loops back to the for loop with i = 1, does the same thing as before, no return because if statement is false.
Then loops back to i = 2 where the if statement is now true, so it therefore runs the function and returns i, which right now is equal to 2.
But then it goes back to the function again and runs it with i = 3 in which case the function does not run because 3 is not < 3.

So where I think I am confused is that the if statement only runs if and only WHEN i == 2? Therefore, when i === 3, the if statement does not run and does not return the 3 value.

But what I think you’re telling me is that because we did meet the if condition of i == 2 once, therefore, we return ‘i’, and the value that is returned is 3 because at the end of the for loop i = 3.

Under this explanation then, using your example of changing the if condition to i === 1, this would still return i as 3. Is that correct???

It is important to note that the code

    printNumTwo = function() {
      return i;
    };

does not call the function, it defines the function. The function is not called until after the for loop has completed.

so the way to fix the problem is to change the global i variable into a local variable that way it maintains the value of 2. and in this case, because the if statement has the condition that if i === 2, then z will only have the value of 2.

if you take into account the other comments , it sounds like you have a better understanding than before, I think try and keep it simple, the i variable is global, when i is 2, the for loop says i++ so i becomes 3 so when printNumTwo is called it returns 3 .