We Keep Coding

What is the lifetime of a variable declared with let inside of a for loop? [duplicate]

This question already has answers here:
Explanation of `let` and block scoping with for loops
(5 answers)
Closed last month.
Why is it that this code prints numbers 0 through 9
actions = []
for (let i = 0; i < 10; ++i) {
actions.push(() => console.log(i))
}
for (const action of actions) {
action()
}
but this code prints the number 10 ten times.
actions = []
let i
for (i = 0; i < 10; ++i) {
actions.push(() => console.log(i))
}
for (const action of actions) {
action()
}
According to MDN for the initialization portion of the for statement:
An expression (including assignment expressions) or variable declaration evaluated once before the loop begins. Typically used to initialize a counter variable. This expression may optionally declare new variables with var or let keywords. Variables declared with var are not local to the loop, i.e. they are in the same scope the for loop is in. Variables declared with let are local to the statement.
I would have interpreted this to mean that the variable i is declared and initialized once and is local to the for loop, persisting between iterations. But it acts as though it's being re-declared and initialized on every iteration as let i = previous_i++

i is indeed local to the loop - it's declared and initialized in every iteration of the loop, and thus you get the values 0 through 9.

Does the function call have access or retain the value of a local var variable of its parent function because I declare that variable as var? [duplicate]

This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Explanation of `let` and block scoping with for loops
(5 answers)
Closed 7 months ago.
I expect the calling of the first element in the array to print out the number 0. However, it prints 5. Does the function call have access to i of its parent function because I declare i as var? If I declare i as a let variable, it prints 0 as expected.
0-closureBug.js
function makeFunctionArray() {
const arr = []
for (var i = 0; i < 5; i++) {
arr.push(function() { console.log(i) })
}
console.log(i)
return arr
}
const functionArr = makeFunctionArray()
functionArr[0]()

I get strange output when i use var keyword in for loop with setTimeOut inside [duplicate]

This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 2 years ago.
I have this code.
for (var i = 1; i <= 5; i++) {
setTimeout(function () {
console.log(i);
}, 1000);
}
I don't understand the output from this lines of code:
The output in the console is number 6,and it says that is repeated five times.
If i use the let keyword for "i" then i get the output that i expect,
1,2,3,4,5 after one second
Why is that ?

var has scoping issues and that's why let was introduced.
In your for loop you are defining i, but actually it's stuck to the global scope, and after 1 second, the for loop would actually be done, and when the setTimeout callback is fired, i would have already reached 6 and it's read from the global scope.
In a nutshell, because i is stuck to the upper scope of for, each iteration modifies the calue of i and doesn't create another i.
If you change var to let, the issue is resolved.

setTimeout is async hence will execute after the loop is done, that s why you have i=6, put it in a self invoking function to retain the value of i or use let instead of var in your loop
for (var i = 1; i <= 5; i++) {
((i) => setTimeout(function() {
console.log(i);
}, 1000))(i)
}
for (let i = 1; i <= 5; i++) {
setTimeout(function () {
console.log(i);
}, 1000);
}

Can't understand how this javascript code control flow? [duplicate]

This question already has answers here:
How do JavaScript closures work?
(86 answers)
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 3 years ago.
This is the code of which i am not able to understand the flow of and also how the value of i persist even after the for loop ends.
var printNumTwo;
for (let i = 0; i < 5; i++) {
if (i === 2) {
console.log("now");
printNumTwo = function() {
console.log("inside");
return i;
};
console.log(i);
}
console.log(i);
}
console.log(printNumTwo());
The output of the program is
0
1
now
2
2
3
4
inside
2

reason of this behavior is Closures
A closure gives you access to an outer function’s scope from an inner
function. In JavaScript, closures are created every time a function is
created, at function creation time. mozilla doc
var printNumTwo;
for (let i = 0; i < 5; i++) {
if (i === 2) {
console.log("now");
printNumTwo = function() {
console.log("inside");
return i;
};
console.log(i);
}
console.log(i);
}
console.log('now calling printNumTwo()')
let s=printNumTwo();
console.log('now printing return value of printNumTwo()')
console.log('retrun value of PrintNumTwo is:'+s);

Closure (let keyword) - Javascript [duplicate]

This question already has answers here:
Explanation of `let` and block scoping with for loops
(5 answers)
Closed 5 years ago.
function first(){
var items = document.getElementsByTagName("li");
for(var x = 0; x < items.length; x++){
items[x].onclick = function() {
console.log(x);
}
}
}
function second(){
var items = document.getElementsByTagName("li");
for(var x = 0; x < items.length; x++){
(function(val) {
items[val].onclick = function() {
console.log(val);
}
})(x);
}
}
function third(){
var items = document.getElementsByTagName("li");
for(let x = 0; x < items.length; x++){
items[x].onclick = function() {
console.log(x);
}
}
}
There are 4 elements in the list. Outputs of the 3 functions:
first: 4 4 4 4
second: 0 1 2 3
third: 0 1 2 3
I am not able to understand the output from the third function. In the second function, each call to the IIFE creates a new function object and hence, a new val variable. But in the third function, there is a single copy of the variable x, then how is the output: 0 1 2 3
Please correct me if I am wrong.

In the documentation for let from MDN they have an example covering this exact case in the Cleaner Code in inner functions section:
for (let i = 1; i <= 5; i++) {
let item = document.createElement('li');
item.appendChild(document.createTextNode('Item ' + i));
item.onclick = function(ev) {
console.log('Item ' + i + ' is clicked.');
};
list.appendChild(item);
}
The example above works as intended because the five instances of the (anonymous) inner function refer to five different instances of the variable i. Note that it does not work as intended if you replace let with var, since all of the inner functions would then return the same final value of i: 6. Also, we can keep the scope around the loop cleaner by moving the code that creates the new elements into the scope of each loop.
The same thing applies to your case, because you use let each anonymous function refers to a different instance of x. There is a different instance on each iteration of the loop. This happens because let has a block-level scope instead of the global function scope that var has.

From the docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
let allows you to declare variables that are limited in scope to the
block, statement, or expression on which it is used. This is unlike
the var keyword, which defines a variable globally, or locally to an
entire function regardless of block scope.
When it is var it gets hoisted like all variables.
When it is let the scope is the block it is defined in.

This is one of the trickiest examples of let keyword.
The fact that Let binds variables to the block(& in this case for-loop) means that it binds the variable to every iteration of the loop. So, when loop is finished, you have 4 items (items from item[0] to item[3]) listening to click event.
In fact the for-loop in the third function produces the following:
items[0].onclick = function() {
console.log(0);
}
items[1].onclick = function() {
console.log(1);
}
items[2].onclick = function() {
console.log(2);
}
items[3].onclick = function() {
console.log(3);
}
Make sure to read more about Let here in MDN Some other exciting cases could be found there.