Compare Scopes of the var and let Keywords

Compare Scopes of the var and let Keywords
0.0 0

#1

Tell us what’s happening:

HELP. I don’t quite get why this example would return 3.

Shouldn’t the loop stop when variable i reaches 2, which means that it would stop “incrementing”? So how did it reach the value of 3?


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

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords


#2

read this


#3

Hi, thank you.

Please elaborate?

I already understand the === comparator.

In the example, i is an integer, and it is comparing it to 2 in the if-statement.
So when (i === 2), it should execute the function printNumTwo right? And i IS 2 during that time, so how did it return 3 in the end?


#4

“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:”


#5

Hi @sjkayle,

The problem is because you use var keyword rather than let keyword.
by using var keyword: you update variable globally so it give you 3
if you use let keyword: you fix this problem and make the variable locally updated.

This is the solution of example

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

Hope this solve your problem, good luck my friend :slight_smile:

Regards,
Ali Mosaad


#6

Hi @sjkayle

I think people are missing the actual point of your question so i’ll post a copy of my response to the same question on an identical thread:

So I’ve been racking my brain over this one for a few minutes. I sat here thinking exactly the same thing and couldn’t for the life of me understand why 3 was being returned instead of 2… and then EUREKA! And boy do I feel stupid now…

Actually, I say that, but quite frankly the formatting of the example code could be improved here.

So here we go:

We have a for loop. As i’m sure you’ve picked up by now for loops work in this pattern…
set variable (var i = 0; in this case) --> execute following code (numArray.push(i)) where condition is true (i<3) --> do something at the end of each iteration (increment i with i++).

We can follow through each iteration of the loop to see what happens!
Iteration 1:

i starts as 0
i is less than 3 so i (0 at the moment) is pushed to the array
i is incremented by 1 to become 1

Iteration 2:

i starts as 1
i is less than 3 so i (1 at the moment) is pushed to the array
i is incremented by 1 to become 2

Iteration 3:

i starts as 2
i is less than 3 so i (2 at the moment) is pushed to the array
i is incremented by 1 to become 3

Iteration 4:

i starts as 3
i is NOT LESS THAN 3 so loop ceases execution

So at this point our loop has ended. Notice how when i is incremented in the third iteration that it takes the value 3, this is what causes the loop to exit (before executing code) on the next iteration.
This is why now, when we get the console to log i, it returns 3.

I find it really helps to work through iterations of loops in situations like this!

Now then, if you’re thinking to yourself “but if the printNumTwo function only gets called when i === 2, how can we call it when i is not 2?”, then you wouldn’t be alone because I did exactly this as well.

Whats important here is that the printNumTwo function is called WITHIN THE LOOP WHEN i === 2. We can still call on this specific function anywhere else as we normally would. Heck, all this function does is return i so the final line console.log(printNumTwo()) is essentially identical to console.log(i). As we can see from the end of our third iteration of the loop i === 3

Hope this helps!


#7

Thank you! I now understand it.