You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/06-advanced-functions/03-closure/10-make-army/solution.md
+96-97Lines changed: 96 additions & 97 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ Let's examine what exactly happens inside `makeArmy`, and the solution will beco
6
6
```js
7
7
let shooters = [];
8
8
```
9
-
2. Fills it in the loop via `shooters.push(function...)`.
9
+
2. Fills it with functions via `shooters.push(function)`in the loop.
10
10
11
11
Every element is a function, so the resulting array looks like this:
12
12
@@ -26,105 +26,104 @@ Let's examine what exactly happens inside `makeArmy`, and the solution will beco
26
26
```
27
27
28
28
3. The array is returned from the function.
29
-
30
-
Then, later, the call to any member, e.g. `army[5]()` will get the element `army[5]` from the array (that's a function) and call it.
31
-
32
-
Now why do all such functions show the same value, `10`?
33
-
34
-
That's because there's no local variable `i` inside `shooter` functions. When such a function is called, it takes `i` from its outer lexical environment.
35
-
36
-
What will be the value of `i`?
37
-
38
-
If we look at the source:
39
-
40
-
```js
41
-
function makeArmy() {
42
-
...
43
-
let i =0;
44
-
while (i <10) {
45
-
letshooter=function() { // shooter function
46
-
alert( i ); // should show its number
47
-
};
48
-
...
49
-
}
50
-
...
51
-
}
52
-
```
53
-
54
-
We can see that all `shooter` functions are created in the lexical environment, associated with the one `makeArmy()` run. But when `army[5]()` is called, `makeArmy` has already finished its job, and the final value of `i` is `10`(`while` finishes at `10`).
55
-
56
-
As the result, all `shooter` functions get the same value from the outer lexical environment and that is, the last value, `i=10`.
57
-
58
-
59
-
60
-
As you can see above, on each iteration of a `while {...} ` block, a new lexical environment is created.
61
-
62
-
So, to fix a problem we can copy the value of `i` into a variable within the `while {...}` block, like this:
63
-
64
-
```js run
65
-
functionmakeArmy() {
66
-
let shooters = [];
67
-
68
-
let i =0;
69
-
while (i <10) {
29
+
30
+
Then, later, the call to any member, e.g. `army[5]()` will get the element `army[5]` from the array (which is a function) and calls it.
31
+
32
+
Now why do all such functions show the same value, `10`?
33
+
34
+
That's because there's no local variable `i` inside `shooter` functions. When such a function is called, it takes `i` from its outer lexical environment.
35
+
36
+
Then, what will be the value of `i`?
37
+
38
+
If we look at the source:
39
+
40
+
```js
41
+
function makeArmy() {
42
+
...
43
+
let i =0;
44
+
while (i <10) {
45
+
letshooter=function() { // shooter function
46
+
alert( i ); // should show its number
47
+
};
48
+
shooters.push(shooter); // add function to the array
49
+
i++;
50
+
}
51
+
...
52
+
}
53
+
```
54
+
55
+
We can see that all `shooter` functions are created in the lexical environment of`makeArmy()`function. But when `army[5]()` is called, `makeArmy` has already finished its job, and the final value of `i` is `10` (`while` stops at `i=10`).
56
+
57
+
As the result, all `shooter` functions get the same value from the outer lexical environment and that is, the last value, `i=10`.
58
+
59
+
60
+
61
+
As you can see above, on each iteration of a `while {...}` block, a new lexical environment is created. So, to fix this, we can copy the value of `i` into a variable within the `while {...}` block, like this:
62
+
63
+
```js run
64
+
functionmakeArmy() {
65
+
let shooters = [];
66
+
67
+
let i =0;
68
+
while (i <10) {
69
+
*!*
70
+
let j = i;
71
+
*/!*
72
+
letshooter=function() { // shooter function
73
+
alert( *!*j*/!* ); // should show its number
74
+
};
75
+
shooters.push(shooter);
76
+
i++;
77
+
}
78
+
79
+
return shooters;
80
+
}
81
+
82
+
let army =makeArmy();
83
+
84
+
// Now the code works correctly
85
+
army[0](); // 0
86
+
army[5](); // 5
87
+
```
88
+
89
+
Here `let j = i` declares an "iteration-local" variable `j` and copies `i` into it. Primitives are copied "by value", so we actually get an independent copy of `i`, belonging to the current loop iteration.
90
+
91
+
The shooters work correctly, because, the value of `i` now lives a little bit closer. Not in `makeArmy()` Lexical Environment, but in the Lexical Environment that corresponds the current loop iteration:
92
+
93
+
94
+
95
+
Such problem could also be avoided if we used `for` in the beginning, like this:
96
+
97
+
```js run demo
98
+
functionmakeArmy() {
99
+
100
+
let shooters = [];
101
+
70
102
*!*
71
-
letj=i;
103
+
for(leti=0; i <10; i++) {
72
104
*/!*
73
-
letshooter=function() { // shooter function
74
-
alert( *!*j*/!* ); // should show its number
75
-
};
76
-
shooters.push(shooter);
77
-
i++;
78
-
}
79
-
80
-
return shooters;
81
-
}
82
-
83
-
let army =makeArmy();
84
-
85
-
// Now the code works correctly
86
-
army[0](); // 0
87
-
army[5](); // 5
88
-
```
89
-
90
-
Here `let j = i` declares an "iteration-local" variable `j` and copies `i` into it. Primitives are copied "by value", so we actually get an independent copy of `i`, belonging to the current loop iteration.
91
-
92
-
The shooters work correctly, because, the value of `i` now lives a little bit closer. Not in `makeArmy()` Lexical Environment, but in the Lexical Environment that corresponds the current loop iteration:
93
-
94
-
95
-
96
-
Such problem could also be avoided if we used `for` in the beginning, like this:
97
-
98
-
```js run demo
99
-
functionmakeArmy() {
100
-
101
-
let shooters = [];
102
-
103
-
*!*
104
-
for(let i =0; i <10; i++) {
105
-
*/!*
106
-
letshooter=function() { // shooter function
107
-
alert( i ); // should show its number
108
-
};
109
-
shooters.push(shooter);
110
-
}
111
-
112
-
return shooters;
113
-
}
114
-
115
-
let army =makeArmy();
116
-
117
-
army[0](); // 0
118
-
army[5](); // 5
119
-
```
120
-
121
-
That's essentially, the same, as `for` on each iteration generates the new lexical environment, with its own variable `i`. So `shooter` generated in every iteration references its own `i`, from that very iteration.
122
-
123
-
105
+
letshooter=function() { // shooter function
106
+
alert( i ); // should show its number
107
+
};
108
+
shooters.push(shooter);
109
+
}
110
+
111
+
return shooters;
112
+
}
113
+
114
+
let army =makeArmy();
115
+
116
+
army[0](); // 0
117
+
army[5](); // 5
118
+
```
119
+
120
+
That's essentially the same, because, `for` on each iteration generates a new lexical environment, with its own variable `i`. So `shooter` generated in every iteration references its own `i`, from that very iteration.
121
+
122
+
124
123
125
-
Now, as you've put so much effort into reading this, and the final recipe is so simple - just use `for`, you may wonder: was it worth that?
124
+
Now, as you've put so much effort into reading this, and the final recipe is so simple - just use `for`, you may wonder -\- was it worth that?
126
125
127
-
Well, if you could easily answer the question of that task, you wouldn't read the solution, so hopefully this task must have helped you to understand things a bit better.
126
+
Well, if you could easily answer the question, you wouldn't read the solution. So, hopefully this task must have helped you to understand things a bit better.
128
127
129
-
Besides, there are indeed cases when one prefers `while` to `for`, and other scenarios where such problems are real.
128
+
Besides, there are indeed cases when one prefers `while` to `for`, and other scenarios, where such problems are real.
0 commit comments