Trouble understanding Javascript & ES6 Scoping

JavaScript
#1

Hi everyone,

I’m having a tough time understanding why the following code returns “3”.
It’s my understanding that the function would only be called once var i === 2, so therefore var i would = 2 when returned.

Upon running the code snippet locally and logging the value of i, it goes from = 2 on the last iteration of the loop, to = 3 when logged inside the function.
I’m assuming it has something to do with the fact that the function is defined inside the if statement, but would love a clearer explanation as there’s clearly a gap in my understanding!

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

As you can see, printNumTwo() prints 3 and not 2. This is because 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. The let keyword does not follow this behavior:

Thanks!

#2

This is because you declared i with var, that means that it became a global scope inside the function. So, even though it returned it when it is equals to 2, the for loop didn’t stop until 3, and since i is global, that means that it will be changed. This is prevented using the new syntax from ES6, let that can only be accessed inside that specific block { }. So if you change

for (var i = 0; i < 3; i++)

Into:

for (let i = 0; i < 3; i++)

Then it’s going to output 2;

1 Like
#3

The object of this lesson is to point out exactly this sort of counterintuitive behavior. The function is defined when i == 2, but for var, that function definition references the variable instead of the value in the variable. This means that the function uses i after it updates to 3. If you were instead to use let, then this sort of silliness would go away and you would instead see the function return 2.

2 Likes
#4

After reading your answer and reading through the tutorial again it finally clicked for me!
Thank you for taking the time to help me out!

1 Like
#5

That makes sense! I also didn’t understand that the global value for i continued to increment after the last iteration :smile:

Thank you for taking the time to help me out!

#6