Tell us what’s happening:
I understand the basics of the example but im having trouble understanding the reasoning behind getting i = 2 when we use “let”
instead of “var”.
in the first example,
We have a variable named printNumTwo and a forloop . this loop starts with a var i = 0 it will run as long as i is smaller than 3, i < 3 and will increment by 1 at every iteration of the loop i++ . this loop does not really do anything until **i == 2** at which point printNumTwo will be assigned as a function that can be executed , when this function is executed it will return the variable i . since all we are doing when i == 2 is creating a function, and not actually returning anything, the loop continuous with i++ making i = 3 , since i < 3 is false the loop ends.
Lastly we console.log(printNumTwo(()); a function that was created when our loop first ran, and all this function does is return ii = 3 because that’s when the loop ended.
So, when we use let, we will get a return of i = 2. i understand that let is not declaring i as a global statement, but since we declared i inside the loop using let, wouldn’t we get the same result of i = 3? i was incremented to 3 within the loop at which point the loop was falsely and stopped.
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
'use strict';
let printNumTwo;
for (let i = 0; i < 3; i++) {
if (i === 2) {
printNumTwo = function() {
return i;
};
}
}
console.log(printNumTwo());
// returns 2
console.log(i);
// returns "i is not defined"
var printNumTwo;
for (var i = 0; i < 3; i++) {
if (i === 1) {
printNumTwo = function() {
return i;
};
}
}
console.log(printNumTwo());
// returns 3
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:81.0) Gecko/20100101 Firefox/81.0.
Challenge: Compare Scopes of the var and let Keywords
yes, i have read it. and think that i understand the basics of how let is a variable that only exists within its own block, yet, from a logical point of view i cant figure out the proccess behind the following js returning 2.
use strict';
let printNumTwo;
for (let i = 0; i < 3; i++) {
if (i === 2) {
printNumTwo = function() {
return i;
};
}
}
console.log(printNumTwo());
// returns 2
console.log(i);
// returns "i is not defined"
Would it be possible to walk this function step by step as i was able to do with the function using var instead of let?
What might help explain this is to unroll the loop:
let printNumTwo;
{
let i = 0;
if (i === 2) {
printNumTwo = function() {
return i;
};
}
}
{
let i = 1;
if (i === 2) {
printNumTwo = function() {
return i;
};
}
}
{
let i = 2;
if (i === 2) {
printNumTwo = function() {
return i;
};
}
}
{
let i = 3;
if (i === 2) {
printNumTwo = function() {
return i;
};
}
}
console.log(printNumTwo());
// returns 2
console.log(i);
// returns "i is not defined"
What happens with var? Something like this:
et printNumTwo;
var i = 0;
{
if (i === 2) {
printNumTwo = function() {
return i;
};
}
}
{
i = 1;
if (i === 2) {
printNumTwo = function() {
return i;
};
}
}
{
i = 2;
if (i === 2) {
printNumTwo = function() {
return i;
};
}
}
{
i = 3;
if (i === 2) {
printNumTwo = function() {
return i;
};
}
}
console.log(printNumTwo());
// returns 3
console.log(i);
// returns 3
In the let example the declared i’s are invisible outside of their scope. Therefore the function refers to the i in it’s scope and nothing else. Nothing outside can change it.
In the var example there is only one i and it’s shared amongst the scopes. The next iteration of the loop will change it, because it is referencing exactly the same variable.
With let there are 4 i variables, and 4 scopes. With var there is 1 i variable. There are still 4 scopes, and when they refer to i it’s the one i variable that is visible from all 4 scopes.