JavaScript - Need help in understanding how alert( ) works in loops [duplicate] - javascript

This question already has answers here:
What is the scope of variables in JavaScript?
(27 answers)
The iteration variable is +1 outside the for-loop?
(3 answers)
Closed 4 days ago.
I'm studying javascript loops and I'm having trouble understanding how alert() works.
<!DOCTYPE html>
<script>
"use strict";
let i = 0;
for (i = 0; i < 3; i++) { // use an existing variable
alert(i); // 0, 1, 2
}
alert(i); // 3, visible, because declared outside of the loop
</script>
In the code above, why would the final alert(i) show 3? My understanding is this last alert(i) was declared outside of the loop. Then shouldn't it show 0, in reference to the "let i = 0" that was also declared outside of the loop? I'm guessing that the variable "i" was changed by the loop, I'm just trying to figure out exactly how. Thanks

Related

Scope of variable defined in loop initialization in Javascript? [duplicate]

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

i is not incremented within JavaScript for loop [duplicate]

This question already has answers here:
What is the purpose of the var keyword and when should I use it (or omit it)?
(19 answers)
Javascript: Why do I need to declare var i = 0 in the for loop?
(4 answers)
Closed 4 years ago.
for (i = 1; i < this.people.length; i++) {
peoplePicks[i] = this.people[i].chooseAction(peopleChoices[i]);
}
I have this for loop within my JavaScript program. It runs for ever, even though the length of the array that I am passing to it is 2. when I print the value of i after the statement of the for loop, I get 0. So it seems like i is being decremented by executing the for loop's statement. How can I fix this?
Add var before your i variable in the initialising of your for loop.
Like this for (var i = 1; i < this.people.length; i++) {

Why do var and let produce different outputs in closures? [duplicate]

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.

How each call finds the variable outside a for loop which includes a inner function? [duplicate]

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.)

Understanding JavaScript scopes [duplicate]

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
})
}

Categories