This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
What is the difference between "let" and "var"?
(39 answers)
Closed 5 years ago.
Consider these 2 snippets:
With let:
for(let i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i);
}, 100)
}
With var:
for(var i = 0; i < 10; i++) { //HERE
setTimeout(function() {
console.log(i);
}, 100)
}
From my understanding, let only affects the scoping of the variables, so why are the outputs of the 2 loops should be same, so why does let print 0-9 and var prints 10 10 times?
Because you have a timeout in your loop, none of your logs are being called until the entire loop is finished.
After the loop is finished, the value of i is 10 if you use var.
But let is block scoped, meaning it's the same value anywhere in the loop, even in an async function like setTimeout (unless you manually change it inside the loop) - because the loop creates a new scope on each iteration, it's almost like each iteration creates a new "instance" of the i variable when you use let, whereas using var each loop is using the same instance of the i variable.
Related
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 8 months ago.
If I run this code then it console 4 at 5 time, can anyone explain why it is happening ?
let number = 1;
for (var i=0; i<5; i++){
number=i;
setTimeout(()=>{
console.log(number)
},1000)
}
Also if I modify this to as below then output is 5 times 5 ?
for (var i=0; i<5; i++){
setTimeout(()=>{
console.log(i)
},1000)
}
And why it prints 0 to 4 when we use let like
for (let i=0; i<5; i++){
setTimeout(()=>{
console.log(i)
},1000)
}
Its a typical use case of var being functional scope ,every iteration of for loop shares the same value of var (doesn't creates a new scope as var being functional scope) which is kind of global in here
so when the last condition arrives i<5 i is already has become 4 ,and it is shared by every callback of setTimeout so they all prints 4 ,4 times
But in case of let a new scope is formed in every iteration ,as let being a block scope (for loop has a block scope)
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)
let keyword in the for loop
(3 answers)
Closed 4 years ago.
Why output is 10 when use var and with let it works the loop.
Edit the output is 11 but why let and var are different
var funcions = [];
for (var x = 0; x <= 10; x++) {
funcions.push(function() {
console.log(x);
});
}
funcions.forEach(
function(func) {
func();
}
);
I know that let, is a signal that the variable may be reassigned, such as a counter in a loop, or a value swap in an algorithm. It also signals that the variable will be used only in the block it’s defined in, which is not always the entire containing function.
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:
What is the difference between "let" and "var"?
(39 answers)
Closed 5 years ago.
Why the following code returns 10 times 10 and print hey as first line?
for (var i = 0; i < 10; ++i) {
setTimeout(() => console.log(i), 0)
}
console.log('hey')
When if instead I use let I get properly the counting, but why the line hey is always printed first?
for (let i = 0; i < 10; ++i) {
setTimeout(() => console.log(i), 0)
}
console.log('hey')
My question actually contains two:
First why hey is printed first.
Why using let the counting is printed properly.
setTimeout() is an asynchronous function
console.log('hey')
won't wait for it to finish before printing, since JS is single threaded, it would wait for the program to run and then pick the setTimeout() from event queue
difference between let and var can be found in this answer. Basically since let has scope limited to the for loop, the setTimeout can refer to only 1 value of i. If we use var then it is function scope and each function would get the same value of i