This question already has answers here:
What is the scope of variables in JavaScript?
(27 answers)
Closed 5 years ago.
I'm trying to understand how scopes work in JS. Can you tell me if I correct with understanding of this chunk of code:
for(var i = 0; i<5; i++){
setTimeout(function timeoutHandler() {
var i = i;
console.log(i); //undefined
})
}
console.log prints undefined 5 times. So as I understand, when timeoutHandler is executed, it has its own local scope with own i variable. So is that correct that during timeoutHandler execution, the interpreter asks for i variable, finds it declared in local scope and uses this declared variable for assignment? This explains why it is undefined, but I'm not sure I'm fully correct.
Thanks
UPD
I don't need this code to work properly, I just want to understand why it behaves like that in this case
Trying to make sense of it by this example:
for(var i = 0; i<5; i++){
//create a self executing function
(function(iValue){
//in this scope iValue has the i from the loop
setTimeout(function() {
console.log(iValue); //will print the correct i
})
})(i); //pass i in it's current context to the function
}
Or easier with ES6:
Use let instead of var.
Since let is scoped within the block (each run of the loop is it's own block) it will not get another value inside the setTimeout.
for(let i = 0; i<5; i++){
setTimeout(function() {
console.log(i); //will print the correct i
})
}
Related
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
let keyword in the for loop
(3 answers)
Closed 2 years ago.
Why is the output of the following code :
let nodes = [];
for (let i = 0; i < 5; ++i) {
nodes[i] = () => i;
}
for (let node of nodes) {
console.log(node());
}
is 0 1 2 3 4, while the output of the following code :
let nodes = [];
let i;
for (i = 0; i < 5; ++i) {
nodes[i] = () => i;
}
for (let node of nodes) {
console.log(node());
}
is 5 5 5 5 5?
let variables are scoped the to the block you use it in.
If you use let outside the for block, then you create one variable shared by each function you create (and you change the value of that variable each time you go around the loop).
If you use let inside it, you create a new variable each time you go around the loop, so each function has its own variable with a value that you aren't changing.
How do closure and environment context come into play in this?
They don't really. It's just a matter of if each function closed over the same i or a different i … and you aren't using this.
The type of function you use is irrelevent. You'd get the same effect with a function expression.
Variables declared by let have their scope in the block for which they are defined, as well as in any contained sub-blocks.
In your first code, variable i is declared as local variable during iteration. But in the second code, i is declared as a global variable. So that it prints 5,5,5,5,5
Please refer this link:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 4 years ago.
Below is the simple jest test block in JavaScript, under the describe I've written a simple test to print the current index of the loop (until 5) of which it is put in. But the result is always Test 5
describe("Hello", async ()=>{
for(var i=0; i<5; ++i){
test(``Test ${i}``, async ()=>{
await console.debug("Test "+ i);
});
}
});
Can someone please clarify, how does it work?
Use let instead of var, let will preserve the scope for each async call. So in each loop, new values of i will be passed to your method and those values will stay preserved. In the case of var the variable i will be function scoped (that function being the one you use as callback in describe()) so when your asyn method resolves, you will see the value of i which exists inside your callback, since the loop would already have ended the value would be 5.
for(let i=0; i<5; ++i){
// dummy async method
setTimeout(() => {
console.log(i)
}, 2000)
}
This question already has answers here:
Explanation of `let` and block scoping with for loops
(5 answers)
How do JavaScript closures work?
(86 answers)
Closed 5 years ago.
Regarding the let Declarations in loops in book Definitive JavaScript Developer guideline, the code:
var funcs = [];
for (let i = 0; i < 10; i++) {
funcs.push(function() {
console.log(i);
});
}
funcs.forEach(function(func) {
func(); // outputs 0, then 1, then 2, up to 9
})
It says:
The let declaration creates a new variable i each time through the loop, so each function created inside the loop gets its own copy of it. Each copy of i has the value it was assigned at the beginning of the loop iterations in which it was created..
I want to know, when invoke the function func(), how and where it finds the i value for each element in array of funcs. All element in funcs are same
ƒ () {
console.log(i);
}
Could someone illustrate how each step happens when call the function in the above code? (I sort of understand that, if use var instead of let, the global variable i is what each call finds.)
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 7 years ago.
I'm confused by the following JavaScript code. I wrote a loop and defined a function inside the loop, but when I call a function defined in the loop, I only get 10 rather than the index.
Obviously, in the following code I abstracted out stuff that isn't relevant:
objectArray = [];
for (i = 0; i< 10; i++){
objectArray[i] = {};
}
for (i = 0; i< 10; i++){
objectArray[i].get_number = function(){
return i;
}
}
console.log(objectArray[5].get_number()); // returns 10 rather than 5
I always get 10 rather than i as expected.
It's because of JavaScript closure. The method objectArray[i].get_number has direct access to i (not a copy of i). The value of i lives on in memory because each method objectArray[i].get_number still has access to it. There's only one i, and when the loop iterates it, it increases by one. When a method objectArray[i].get_number accesses it, the loop has already run to completion, so it accesses the final value of i.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Javascript closure inside loops - simple practical example
javascript variable scope/closure in loop after timeout
Can you please explain step by step why the results are different?
Snippet A (alerts 10)
for(var i=0; i<10; i++) if(i==3) setTimeout(function() {alert(i);}, 100);
Snippet B (alerts 3)
for(var i=0; i<10; i++) if(i==3) setTimeout((function(p) {
return function() {alert(p);}
} )(i), 100);
A variable's scope is either the global scope (window in a browser) or a function.
In the first case i is defined in the scope containing the for loop. This is why it still changes until the end of the loop before the callback given to setTimeout is executed.
In the second case, the intermediate function contains and keeps another variable, p. Note that this would have worked without the test, as this would have been a different closure for each setTimeout.