I run the two following code snippets.
The first loop is giving the expected result when I assign a different name for the local variable.
for(var i = 0; i < 3; i++) {
setTimeout((function() {
var i2 = i;//named i2 here
return function(){console.log(i2)};
})(), 10);
}
The second loop will print undefined instead. I thought
var i = i will just re-declare the original i. And I expect it pint out some number.
How come I get undefined here?
for(var i = 0; i < 3; i++) {
setTimeout((function() {
var i = i;
console.log(i);
return function(){console.log(i)};
})(), 10);
}
The scope of the initialization expression of var is the body of the function, and the local variable i is already in that scope. So you can't reference an outer variable with the same name. You can think of
var x = <expression>;
as equivalent to:
var x;
x = <expression>;
If you look at it this way, you can see why var i = i; won't work, it's equivalent to:
var i;
i = i;
The assignment uses the uninitialized value of the local variable.
The usual idiom to solve this is to make i a parameter to the function, which you then pass in the argument list of the IIFE.
for(var i = 0; i < 3; i++) {
setTimeout((function(i) {
console.log(i);
return function(){console.log(i)};
})(i), 10);
}
For more information, see JavaScript closure inside loops – simple practical example
Scope
The inner var i declares a new variable called i within a scope that already has a variable called i.
The declaration is assigned the value of the scope's most prominent i, which is the one you just declared.
Since the value of the newly declared i is undefined, the assignation of itself to itself is of its value of undefined.
The variable i is already being used by the loop for in the outer scope. Now you are declaring a new variable i in an inner scope
var i = i;
Once that statement is ran the inner scope is the counter i of the loop is more accessible because you overridden it with new i.
Basically what you are doing here is: defining a new variable i and assign to it a value of that variable you just declared which is undefined.
Eaiset solution is to declare j and assign to it the value i.
for(var i = 0; i < 3; i++) {
setTimeout((function() {
var j = i;
console.log(j);
return function(){console.log(j)};
})(), 10);
}
OR just use i while passing it the function setTimeout
for(var i = 0; i < 3; i++) {
setTimeout((function(i) {
console.log(i);
return function(){console.log(i)};
})(), 10);
}
My guess is it should be return function(){console.log(i)}; in the second snippet. And the reason it still does not work is, that you're basically assigning to var i the same i you just declared with var. You'll see what I mean if you split declaration and assignment:
var i;
i = i;
But yeah, I can see how js quirks like that can be quite frustrating, because one has to always watch out and reinvent new variable names as one goes down the call stack. This is one reason why I fell in love with TypeScript, because it compiles this:
for (let i = 0; i < 3; ++i) {
window.setTimeout(() => {
console.log(i);
});
}
into this:
var _loop_1 = function (i) {
window.setTimeout(function () {
console.log(i);
});
};
for (var i = 0; i < 3; ++i) {
_loop_1(i);
}
which will yield the expected result.
Related
I wrote a simple javascript code. My for loop iterates a "let" declared variable, i between 0 and 2. A function gets declared within the loop only when i == 2. The function has to return the value of i variable. When I call this function from outside the loop, the function returns the value of i = 2 (which is natural for a block scope variable i. However, when I rewrite the loop code as its non-loop equivalent code-block, the function (still called from outside the block) returns the vale of i = 3. What is going on?
"use strict";
var printNumTwo;
for (let i = 0; i < 3; i++) {
if (i === 2) {
printNumTwo = function() {
return i;
};
}
}
console.log(printNumTwo()); //returns 2
// loop equivalent
{
let i = 0;
i = 1;
i = 2;
printNumTwo = function() {
return i;
}
i = 3;
}
console.log(printNumTwo()); // returns 3
Your example is bad because your loop is not counting after 2. So If your loop looks like i <= 3:
for (let i = 0; i <= 3; i++) {
if (i === 2) {
printNumTwo = function() {
return i;
};
}
}
You would get exactly same result as your non-loop example and that's because of closure in javascript but return breaks for loop. Your function is saving reference to that variable from outside scope.
It's because you're actually setting the function to return the value 3 because of the non-loop environment. You should change the loop a little, adding another variable, but first make your function look like this:
printNumTwo = function() {
return num;
}
And in your simulated loop:
i = 2;
num = i;
printNumTwo = function() {
return num;
}
i = 3;
In your non loop based code, printNumTwo is not executed at the same point of its declaration and so the value of i is updated before it is executed so the value 3 is returned.
{
let i = 0;
i = 1;
i = 2;
printNumTwo = function () {
return i;
}
i = 3;
}
console.log(printNumTwo());
but if you run the following code, it should print 2 since it is executed before value if i is set to 3
{
let i = 0;
i = 1;
i = 2;
printNumTwo = (function() {
console.log(i);
})()
i = 3;
}
Note: return in for loop breaks the further execution of the loop, so even if your first code had i <= 3 as its breaking condition, it will return 2.
for (let i = 0; i <= 3; i++) {
if (i === 2) {
printNumTwo = function() {
return i;
};
}
}
console.log(printNumTwo())
"use strict";
var printNumTwo;
for (let i = 0; i < 3; i++) {
printNumTwo = function (i) {
// when references 'i' in this function, 'i' goes to the global scope.
return i;
};
// set the value 3 for 'i' in the global scope
i = 3;
}
console.log(printNumTwo()); // return 3;
try this
"use strict";
var printNumTwo;
for (let i = 0; i < 3; i++) {
printNumTwo = function (i) {
return i;
}.bind(null, i); // you set the current value as parameter = 0
i = 3; // i = 3 and break loop
}
console.log(printNumTwo()); // return 0;
try this
"use strict";
var printNumTwo;
for (let i = 0; i < 3; i++) {
let i = 0;
i = 1;
i = 2;
printNumTwo = function (i) {
return i;
}.bind(null, i); // you set the current value as parameter = 2
i = 3; // i = 3 and break loop
}
console.log(printNumTwo()); // return 2;
I appreciate all the answers I got to my question. All pointing to the case of how a function, when called, handles the environments in which it was both called and created. I read this useful explanation in the book "Eloquent JavaScript" and think it would be good to share it,
"A good mental model is to think of function values as containing both the code in their body and the environment in which they are created. When called, the function body sees the environment in which it was created, not the environment in which it is called."
~ Eloquent_JavaScript/Closure
a = [];
for (var i = 0; i < 3; i++) {
a.push(function() {
console.log(i);
})
}
a[0]() // I want 0, but I get 3
I am trying to write a simple piece of code where I have an array of functions such that when I execute a function at a particular index, the index value should get printed.
However, the piece of code above shows the same result (3 in this case) for all index values. I understand that the value is pointing by reference and therefore points to the last value of i. Could someone point out how to do this in the right manner?
Wrap it around a function. Now each time the loop executes, the wrapper function has its own value of i.
a = [];
for (var i = 0; i < 3; i++) {
(function(i){
a.push(function() {
console.log(i);
})
})(i);
}
a[0]()
You can add a self executing function to act like a module. Doing this, the scope of the variable i is in that function.
a = [];
for (var i = 0; i < 3; i++) {
(function(i){
a.push(function() {
alert(i);
})
})(i);
}
a[0]()
Note: In this block (function(i){ ... })(i), i can have any name, there is no connection between i from loop and i from function, i.e. (function(r){ ... })(r).
Here is an alternate version to an anonymous function that gets created and executed all at once.
The issue that you are having is that when the function gets called, the loop has already been evaluated and the value of i has already reached the max value of 3. You need trap the current value of i while the loop is being evaluated.
var a = [];
for (var i = 0; i < 3; i++) {
var fn = function() {
console.log(arguments.callee.i);
}
fn.i = i; // Pass as 'i' parameter to 'fn'.
a.push(fn);
}
a[0](); // The value 0 will be printed, rather than 3.
There is more than one way to skin a cat. The code above is very similar to:
var a = [];
function fn(i) {
return function() {
console.log(i);
}
}
for (var i = 0; i < 3; i++) {
a.push(fn(i));
}
a[0](); // The value 0 will be printed, rather than 3.
To begin with, I apologize if this question has been asked previously. I have searched for something similar to what I'm asking here and have found nothing but dead ends.
I am reviewing some older code for a project and I am using Brackets as my IDE with the JSLint extension. While going through my code it recommended that I change a line similar to
for(var i = 0; i < somevalue; i++)
to
var i;
for(i = 0; i < somevalue; i++)
This prompted me to ask; is there is any significant difference between the two declarations from a performance aspect, coding standard aspect, or etc.?
Thank you for any answers or leads!
JSLint is actually asking you to move the variable declaration to the top of the function scope:
function myfunction() {
var i,
j,
k;
// other code
for (i = 0; i < 100; i=i+1) { //another JSLint Recommendation: Don't use ++
for (j = 0; j < 100; j=j+1) {
for (k = 0; k < 100; k=k+1) {
console.log(i);
console.log(j);
console.log(k);
}
}
}
}
The reason is that variables have function level scope in JavaScript. If I had declared 'j' inside of the for loop for i, it would have been 'hoisted' to the top of the function and would have actually existed throughout that whole function, not just in the for loop.
JSLint makes this recommendation because that's what is going on behind the scenes anyway, and you could be in for a rude surprise if you don't expect that to be the case.
Consider following 2 functions
function test1(){
//code block 1
for(var i = 0; i < somevalue; i++)
//code block 2
}
function test2(){
//code block 1
var i;
for(i = 0; i < somevalue; i++)
//code block 2
}
In both cases the definitions are hoisted and the compiler first defines the variables. The compiler rearranges the code like this,
function test(){
var i; //and other definitions
//code block 1(without definitions)
for(i = 0; i < somevalue; i++)
//code block 2(without definitions)
}
Therefore there is no difference..
var i binds the variable i to the local context. If you don't do var i, the variable is defined globally.
you should always use var in only one place, at least this is the best practice. Also you should use it per variable only once
so
for(var i = 0;i<10;i++)
is fine but
for(var i = 0;i<10;i++)
for(var i = 0;i<10;i++)
is not good better would be
for(var i = 0;i<10;i++)
for(i = 0;i<10;i++)
but if you do
var i;
for(i = 0;i<10;i++)
or not is totaly up to you
I'm trying to add functions into an array. These have to be named 'opdracht1' through to 'opdracht10'.
Though, I cannot figure out how to give it a name.
var opdrachtArray = [];
for (i = 0; i < 10; i++) {
opdrachtArray.push(function() {func(i); });
}
It adds the functions but as I said earlier I cannot find out how to add a name.
Also, am I later just able to define the functions and call them when I need them?
Name your functions by placing them on the window object:
for (i = 0; i < 10; i++) {
f = function() { func(i); }); // but see below
window['opdracht' + i] = f
opdrachtArray.push(f);
}
However you have a more basic problem. All your functions close over i and therefore func is always going to be called with the value of i after the loop finishes, in other words, 10. One solution is:
function make_func(i) {
return function() {
return func(i);
};
}
then
for (i = 0; i < 10; i++) {
f = make_func(i);
window['opdracht' + i] = f;
opdrachtArray.push(f);
}
Or
for (i = 0; i < 10; i++) {
(function(i) {
var f = function() { func(i); };
window['opdracht' + i] = f
opdrachtArray.push(f);
}(i));
}
or just use func.bind(null, i), which does approximately the same thing.
for (i = 0; i < 10; i++) {
f = func.bind(null, i);
window['opdracht' + i] = f;
opdrachtArray.push(f);
}
If you want each function to be assigned to a name, use dictionary, not array:
var opdrachtDict = {};
for (i = 0; i < 10; i++) {
opdrachtDict["opdracht"+i]=func.bind(null,i);
}
function func(i){
alert(i);
}
opdrachtDict["opdracht3"](); //ok, lets call it and see if you think its still a wrong answer ;)...
You could store the name and function in an object and push each object to the array:
var opdrachtArray = [];
for (i = 0; i < 10; i++) {
var name = 'opdracht' + (i+1);
opdrachtArray.push({name : name, callback : function() {func(i); }});
}
Well a function defined in the global scope just ends up being a property of self/window anyways. i.e.:
function mr_function(){return 5;}
self["mr_function"];
window["mr_function"];
Both (property of self / window) reference the function we defined. I guess you could name your function that way if you're careful. Or assign them to some other object's property if you'd rather not make them global.
As we know, javascript has no BLOCK SCOPE, so when I wrote a for loop like below:
list = [1, 2, 3, 4];
// notice about the `var` keyword
for(var i = 0; i < list.length; ++i) {
// Do something.
}
console.log(i); // shows 4
The matter is: should I use var to declare the variable i?
IF SO:
When I have two or more consecutive for loop, I want to use the same cursor variable i, it will be declare more than once! That simply have problem!
for(var i = 0; i < list1.length; ++i) {
// do something.
}
for(var i = 0; i < list2.length; ++i) {
// do something.
}
// `i` was declared more than once!
In this form, the cursor variable i maybe declared more than once, and the code itself implies that the i variable is likely to have a scope inside the for block, but indeed NOT.
IF NOT SO:
Should I explicitly declare all for cursors earlier in the function?
var i, j, k; // and maybe a long list that I didn't expected?
// Maybe some other code.
for(i = 0; i < count1; ++i) {
// do something
}
for(j = 0; j < count2; ++j) {
// do something
}
for(k = 0; k < count3; ++k) {
// do something
}
If I code this way, I think the code is terrible: it has a long distance between the declaration and use, and obscure about what they are when declared.
If I omit the declarations for them all, and just use, these cursor variables falls into globals! That's much more terrible!
So I'm asking for a good practice, how to declare the cursor variable in this case?
Need your help.
Typically it's simplest to declare the variable, then use it in multiple non-nested loops.
var i;
for(i = 0; i < list1.length; i++) {
// do something.
}
for(i = 0; i < list2.length; i++) {
// do something.
}
There is no problem with reusing i in multiple loops. As soon as the second loop starts, the value is set to the initial value and everything is fine.
Declaring a variable hoists it to the top of the function and successive declarations are syntactically legal but ignored. So:
var i, j, k; // and maybe a long list that I didn't expected?
// Maybe some other code.
for(i = 0; i < count1; ++i) {
// do something
}
...
is what the interpreter does under the hood if you declared it multiple times.
Declaring it in this way (variables on the top) is therefore usually what people suggest (and what JSLint suggests).