MuhammedZakir
commented
4 years ago If anything confuses you, do tell! I will try my best! :-)
If I understand correctly, using
letdoesn't create a new Lexical Environment and it is the{}block clause creates a new Lexical Environment each time andletjust creates a local variable inside the Lexical Environment, whilevarhoists the variable into the function level scope when creating a variable. So, whether usingletor not, there is a new Lexical Environment created each run infor(){}orwhile{}
That's correct!
But for the first time I read the solution/explanation, I thought it was using let that creates a new Lexical Environment.
You should read the solution again. It explains correctly! Below is the code snippet from task - https://javascript.info/task/make-army.
function makeArmy() {
let shooters = [];
let i = 0;
while (i < 10) {
let shooter = function() { // shooter function
alert( i ); // should show its number
};
shooters.push(shooter);
i++;
}
return shooters;
}
let army = makeArmy();
army[0](); // the shooter number 0 shows 10
army[5](); // and number 5 also outputs 10...
// ... all shooters show 10 instead of their 0, 1, 2, 3...And becasue you are adding a new
letor replacingvarwithletin each new code snippet. [...]
As you can see above, variable i is declared using let, not var. Another thing to note is that, we are actually pushing a function to shooters array, not a value. What that means is, whenever a shooter function is called, value of i is taken from its lexical environment (see below).
From solution:
Now why all such functions show the same? That’s because there’s no local variable
iinside shooter functions. When such a function is called, it takesifrom its outer lexical environment.--snip--
…We can see that it lives in the lexical environment associated with the current
makeArmy()run. [...]
Here it explains,
- variable
iis declared insidemakeArmyfunction's main body and thus it's scope is insidemakeArmyfunction. - there is no variable
iinside shooter function and hence, - value of variable
iin shooter function is taken from its outer lexical environment.
tl;dr - whenever a shooter function is called, value of i is taken from its outer lexical environment.
From solution:
[...] But when
army[5]()is called,makeArmyhas already finished its job, andihas the last value: 10 (the end of while).As a result, all shooter functions get from the outer lexical environment the same, last value
i=10.
This explains that
-
at the end of while loop in
makeArmyfunction,ihas the value10and hence, -
at the end of
makeArmyfunction,ihas value10. -
makeArmyfunction's lexical environment has a variable namediwith value10 -
whenever any of the functions in
armyarray is called, value ofiis taken from shooter function's outer lexical environment. It looks something like this- call
army[5]() - call
alert(i)->- looks in the lexical environment -> found no variable named
i->- looks in while loop's lexical environment -> found no variable named
i->- looks in
makeArmyfunction's lexical environment -> found variable namediwith value10
- looks in
- looks in while loop's lexical environment -> found no variable named
- show an alert with
10
- looks in the lexical environment -> found no variable named
- exit function
- call
Important: This is just for the sake of explaining. This is NOT how it is actually done!
While loop solution:
function makeArmy() {
let shooters = [];
let i = 0;
while (i < 10) {
let j = i;
let shooter = function() { // shooter function
alert( j ); // should show its number
};
shooters.push(shooter);
i++;
}
return shooters;
}
let army = makeArmy();Here, variable i's value is assigned to j and show alert with j.
- call
army[5]()- call
alert(j)-> - looks in the lexical environment -> found no variable named
j->- looks in while loop's lexical environment -> found variable named
jwith value5(see below)
- looks in while loop's lexical environment -> found variable named
- show an alert with
5
- call
- exit function
What happens in the first case is that there is no variable i in while loop. So on each iteration, while loop create a new lexical environment and put something like this --
there is nothing here. you might find what you are looking for in
makeArmy()'s lexical environment
That's why, all footer functions show an alert with 10.
In second case, while loop's lexical environment is --
j=<current_value>. if that's not what you're looking for, you might find it inmakeArmy()'s lexical environment
See https://javascript.info/task/make-army/lexenv-makearmy.svg. So it shows alert with values we expect!
Important: This is just for the sake of explaining. This is NOT how it is actually done!
iliakan
ajfg93
xxleyi
There is an "Army of functions" exercise in this chapter. And I suggest some modifications for the explanation/solution.
If I understand correctly, using
letdoesn't create a new Lexical Environment and it is the{}block clause creates a new Lexical Environment each time andletjust creates a local variable inside the Lexical Environment, whilevarhoists the variable into the function level scope when creating a variable. So, whether usingletor not, there is a new Lexical Environment created each run infor(){}orwhile{}.But for the first time I read the solution/explanation, I thought it was using
letthat creates a new Lexical Environment. Kinda misleading until I read some thing on MDN aboutlet.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
The quotes above did not direclty clear my doubt but made me thought twice. And then I got my coherent conclusion.
Parts that made me mostly confused for the first time:
And becasue you are adding a new
letor replacingvarwithletin each new code snippet. So I was more likey to believe that it wasletthat somehow creates a new Lexical Environment.To sum up, I suggest making some modification here and let the readers know
letdoes not create a new Lexical Environment, while{}does.Anyway, it's just my opinion. (Or my conclusion could totally be wrong. I write
C++most of my times.)--
In the end, I would like to thank you so much for the tutorial. It's so far the best I could find in the Net. So much better than the classic book I've read. I am going to buy a full tutorial.