Develop Reference

Javascript Closures and self-executing anonymous functions

I was asked the below question during an interview, and I still couldn't get my head around it, so I'd like to seek your advice.
Here's the question:
var countFunctions = [];
for(var i = 0; i < 3; i++){
countFunctions[i] = function() {
document.getElementById('someId').innerHTML = 'count' + i;
};
}
//The below are executed in turns:
countFunctions[0]();
countFunctions[1]();
countFunctions[2]();
When asked what would be the output of the above, I said count0,count1 and count2 respectively. Apparently the answer was wrong, and that the output should all be count3, because of the concept of closures (which I wasn't aware of then). So I went through this article and realized that I should be using closure to make this work, like:
var countFunctions = [];
function setInner(i) {
return function(){
document.getElementById('someId').innerHTML = 'count' + i;
};
}
for(var i = 0; i < 3; i++){
countFunctions[i] = setInner(i);
}
//Now the output is what was intended:
countFunctions[0]();//count0
countFunctions[1]();//count1
countFunctions[2]();//count2
Now that's all well and good, but I remember the interviewer using something simpler, using a self-executing function like this:
var countFunctions = [];
for(var i = 0; i < 3; i++) {
countFunctions[i] = (function(){
document.getElementById('someId').innerHTML = 'count' + i;
})(i);
}
The way I understand the above code, we are skipping the declaration of a separate function and simply calling and executing the function within the for loop.
But when I ran the below:
countFunctions[0];
countFunctions[1];
countFunctions[2];
It didn't work, with all the output being stuck at count2.
So I tried to do the below instead:
for(var i = 0; i < 3; i++) {
countFunctions[i] = function(){
document.getElementById('someId').innerHTML = 'count' + i;
};
}
, and then running countFunctions[0](), countFunctions[1]() and countFunctions[2](), but it didn't work. The output is now being stuck at count3.
Now I really don't get it. I was simply using the same line of code as setInner(). So I don't see why this doesn't work. As a matter of fact, I could have just stick to the setInner kind of code structure, which does work, and is more comprehensive. But then I'd really like to know how the interviewer did it, so as to understand this topic a little better.

The relevant articles to read here are JavaScript closure inside loops – simple practical example and http://benalman.com/news/2010/11/immediately-invoked-function-expression/ (though you seem to have understood IEFEs quite well - as you say, they're "skipping the declaration of a separate function and simply calling and executing the function").
What you didn't notice is that setInner does, when called, return the closure function:
function setInner(i) {
return function() {
document.getElementById('someId').innerHTML = 'count' + i;
};
}
// then do
var countFunction = setInner("N"); // get the function
countFunction(); // call it to assign the innerHTML
So if you translate it into an IEFE, you still need to create (and return) the function that will actually get assigned to countFunctions[i]:
var countFunctions = [];
for(var i = 0; i < 3; i++) {
countFunctions[i] = (function(i){
return function() {
document.getElementById('someId').innerHTML = 'count' + i;
};
})(i);
}
Now, typeof countFunctions[0] will be "function", not "undefined" as in your code, and you can actually call them.

Take a look at these four functions:
var argument = 'G'; //global
function passArgument(argument){
alert(argument); //local
}
function noArguments(){
alert(argument); //global
}
function createClosure_1(argument){
return function (){
alert(argument); //local
};
}
function createClosure_2(argument){
var argument = argument; //local
return function (){
alert(argument); //local
};
}
passArgument('L'); //L
noArguments(); //G
createClosure_1('L') //L
createClosure_2('L') //L
alert(argument) //G
I think, first function is obvious.
In function noArguments you reference the global argument value;
The third and fourth functions do the same thing. They create a local argument variable that doesn't change inside them and return a function that references that local variable.
So, what was in the first and the last code snippet of your question is a creation of many functions like noArguments,
that reference global variable i.
In the second snippet your setInner works like createClosure_1. Within your loop you create three closures, three local variables inside them. And when you call functions inside countFunctions, they get the value of the local variable that was created inside the closure when they were created.
In the third one you assign the result of the execution of those functions to array elements, which is undefined because they don't return anything from that functions.

JavaScript dynamically defining properties

I'm working on a JS framework and came across something odd (or I'm missing completely obvious)
I define properties on objects using Object.defineProperty. However using this within a for loop will result in some funky values. Somehow the last property added will always be the assigned value. For example if I'd assign something to attribute one it gets assigned to attribute three. Here's an example (and here's a fiddle http://jsfiddle.net/5xLdC/)
var Test = function(){};
var props = ['one', 'two', 'three'];
for(var i = 0; i < props.length; i++) {
Object.defineProperty(Test.prototype, props[i], {
get: function() {
return this['_'+props[i]];
},
set: function(val) {
this['_'+props[i]] = val;
}
});
}
var test = new Test();
test.one = 'one';
console.log(test.three) // => 'one'
If I'd wrap this up in a forEach loop it works perfectly fine. What I'm guess at is that they all hold the same get/set functions due to scope errors (on my part?).
Could anyone explain as to why this happens?
EDIT:
Also possible to solve with a IIFE:
get:(function(y) {
return function() { return this['_'+props[y]]; }
})(i)

get and set are functions that all reference the same variable, i. By the time you call the function outside the loop, i is 3. When you use forEach, the function defining the properties gets the index or key as a parameter, which is a different entity in each call.

Jquery assignment fails when inside a for loop

I have a jquery which works correctly when I do this:
var slide = [];
slide[1] =
{
hide: function() {
$("#slide-1").hide();
},
show: function() {
$("#slide-1").show(2000);
}
};
slide[1].show(); <<< works fine
But if I try it in a loop in fails:
for (var i=1; i <= totalSlides; i++) {
slide[i] =
{
hide: function() {
$("#slide-" + i).hide();
},
show: function() {
$("#slide-" + i).show(2000);
}
};
};
slide[1].show(); << unassigned
any idea?

Well, you're saying that it is "unassigned" but I'm guessing that the function is just not doing what you want.
This is a common issue. All the functions you're creating in the loop are referencing the same i variable. This means that when the function runs, it is getting the value of i where it was left after the loop finished.
You need to scope the variable that your functions reference in a new variable environment to retain the value from the loop. To do that, you need to invoke a function, and have that function reference the current i value.
Like this:
function generate_functions( j ) {
// v----- DO NOT place the opening brace on the next line, after the
return { // return statement, or your code will break!!!
hide: function() {
$("#slide-" + j).hide();
},
show: function() {
$("#slide-" + j).show(2000);
}
};
}
var slide = [];
for (var i=1; i <= totalSlides; i++) {
slide[i] = generate_functions( i );
};
slide[1].show(); // should work
I created a function called generate_functions(), and invoked it in each iteration, passing i as an argument.
You'll notice that generate_functions() received the value as the j parameter. You could call it i as well, but changing the name makes it a little clearer IMO.
So now your functions are referencing the local j. Because a new variable environment is created with each invocation of generate_functions(), the functions inside that you create will be referencing the j value of that specific variable environment.
So the generate_functions() returns the object that contains the functions that were created in each new variable environment, and that object is assigned to slide[i].

Is the $("slide-1" + i).show(2000) a typo, or the error?

Add var slide = []; above the for loop.

why async in node.js in loop giving error

I have this part of code in my application.
card.getcard(command, function(toproceed,resultscard) {
console.log('entry other cards api result'+sys.inspect(resultscard));
if (resultscard.length==0) {
return proceed(false,{errno:'011','queueno' : request.queueno, message:'there is no access card for particular gib'});
}
for (var i=0; i<resultscard.length;i++) {
console.log('card owner'+resultscard[i].owner);
//checking that any users is in inside of gib
server.wrap(function(){
server.getchannel("channels."+request.gibid+'-I', function(err, channel) {
if (channel.users) {
var arr=channel.users.split(',');
if (functions.in_array(resultscard[i].owner, arr)) {
response.users.push(resultscard[i].owner);
}
}
});
if(i==resultscard.length-1) {
if (response.users.length<=0) {
//here need to send sorry event that no owner is online
request._command='sorry';
} else {
request._command='knock';
}
return proceed(true,response);
}
});
}
});
while executing this giving me error .
entry other cards api result[ { cardid: 16,
cardtype: 'A',
status: 'A',
refername: 'rahulgib',
refertype: 'G',
owner: 'rahul' },
{ cardid: 27,
cardtype: 'A',
status: 'A',
refername: 'rahulgib',
refertype: 'G',
owner: 'namita' } ]
card ownerrahul
card ownernamita
node.js:178
throw e; // process.nextTick error, or 'error' event on first tick
^
TypeError: Cannot read property 'owner' of undefined
at Object.callback (/home/myhome directory /redisyoungib/lib/yapi.js:271:50)
at RedisClient.return_reply (/usr/local/lib/node/.npm/redis/0.6.0/package/index.js:384:29)
at HiredisReplyParser.<anonymous> (/usr/local/lib/node/.npm/redis/0.6.0/package/index.js:78:14)
at HiredisReplyParser.emit (events.js:64:17)
at HiredisReplyParser.execute (/usr/local/lib/node/.npm/redis/0.6.0/package/lib/parser/hiredis.js:35:22)
at RedisClient.on_data (/usr/local/lib/node/.npm/redis/0.6.0/package/index.js:325:27)
at Socket.<anonymous> (/usr/local/lib/node/.npm/redis/0.6.0/package/index.js:90:14)
at Socket.emit (events.js:64:17)
at Socket._onReadable (net.js:673:14)
at IOWatcher.onReadable [as callback] (net.js:177:10)
I am not getting why it is giving this error ?
get card gives the result from mysql of card
wrap function executed the callback function .
getchannel return the data from redis .

The functions you're creating and passing into server.getchannel are closures over the i variable (well, over everything in scope, but it's i we're concerned with). They get an enduring reference to i, not a copy of its value as of when the function was created. That means when the function runs, it uses the current value of i, not the value as it was when the function was created. The upshot is that all of those functions will use the same value of i, which is the value as of the end of the loop. Since that's beyond the end of the array, resultscard[i] is undefined and so trying to read an owner property from it fails. (More about closures: Closures are not complicated)
So what you want to do is get those functions to close over something that's a copy of the value of i. The usual way to do that is to have a factory function that creates them and that accepts the value to use as an argument. The factory function creates the callback function, which closes over the argument, whose value doesn't change.
Without reading through it too carefully, applying that to your code probably looks something like this:
card.getcard(command, function(toproceed,resultscard) {
console.log('entry other cards api result'+sys.inspect(resultscard));
if (resultscard.length==0) {
return proceed(false,{errno:'011','queueno' : request.queueno, message:'there is no access card for particular gib'});
}
for (var i=0; i<resultscard.length;i++) {
console.log('card owner'+resultscard[i].owner);
//checking that any users is in inside of gib
server.wrap(function(){
server.getchannel("channels."+request.gibid+'-I', makeCallback(i));
// Call the factory function, passing in `i` -----^
if(i==resultscard.length-1) {
if (response.users.length<=0) {
//here need to send sorry event that no owner is online
request._command='sorry';
} else {
request._command='knock';
}
return proceed(true,response);
}
});
}
// The factory function
function makeCallback(index) {
return function(err, channel) {
if (channel.users) {
var arr=channel.users.split(',');
// Note we use `index` -- our argument -- not `i` below
if (functions.in_array(resultscard[index].owner, arr)) {
response.users.push(resultscard[index].owner);
}
}
};
}
});
Now the callback we create in makeCallback closes over the index argument for the call that created it, which nothing other changes. We pass i in, and there we are. It's still a closure over the other things (because of where makeCallback is defined), but it uses index with them so it handles the right entry.

This is one of the trickiest parts of javascript scope imo.
When you're inside a loop and you're creating anonymous functions based on the index from a loop, you need to do something like bind, currying, or anonymous self executing functions to make sure you are capturing the right value.
The concept is illustrated by this example:
var set = [];
// Store a list of functions in an array
for (var i = 0; i<5; i++) {
set.push(function(){
console.log(i);
});
}
// Pull the functions back out and execute them
for (var x = 0; x<5; x++) {
set[x]();
}
The output of this is:
5
5
5
5
5
Expected? No. You'd expect 0, 1, 2, 3, 4
This is because the variables based on the index for the outer scope (outside the function you've created) is not copied, its evaluated when the function is executed (some time later, after the loop is already through).
To get the desired affect, you can do any of the things I mentioned above. This (which is arguably the simplest) is a self executing anonymous function:
var set = [];
// Store a list of functions in an array
for (var i = 0; i<5; i++) {
(function(i){
set.push(function(){
console.log(i);
});
})(i);
}
// Pull the functions back out and execute them
for (var x = 0; x<5; x++) {
set[x]();
}
This gives you the desired output of 0, 1, 2, 3, 4 because we've established a new scope by creating a new function, passed in the variable we're interested in (i), and executed the function immediately with the desired parameters. It takes the basic form of (function(a){})(a).
Without knowing the details of your code beyond this block, you might do something like this:
card.getcard(command, function(toproceed,resultscard) {
console.log('entry other cards api result'+sys.inspect(resultscard));
if (resultscard.length==0) {
return proceed(false,{errno:'011','queueno' : request.queueno, message:'there is no access card for particular gib'});
}
for (var i=0; i<resultscard.length;i++) {
(function(resultscard, i){
console.log('card owner'+resultscard[i].owner);
//checking that any users is in inside of gib
server.wrap(function(){
server.getchannel("channels."+request.gibid+'-I', function(err, channel) {
if (channel.users) {
var arr=channel.users.split(',');
if (functions.in_array(resultscard[i].owner, arr)) {
response.users.push(resultscard[i].owner);
}
}
});
if(i==resultscard.length-1) {
if (response.users.length<=0) {
//here need to send sorry event that no owner is online
request._command='sorry';
} else {
request._command='knock';
}
return proceed(true,response);
}
});
})(resultscard, i);
}
});

Why can't I add an event to each element in a collection that refers to Itself rather than the last element in the "for(){}" statement

On Window's load, every DD element inside Quote_App should have an onCLick event appended that triggers the function Lorem, however, Lorem returns the nodeName and Id of the last element in the For statement rather than that of the element that trigged the function. I would want Lorem to return the nodeName and Id of the element that triggered the function.
function Lorem(Control){
/* this.Control=Control; */
this.Amet=function(){
return Control.nodeName+"\n"+Control.id;
};
};
function Event(Mode,Function,Event,Element,Capture_or_Bubble){
if(Mode.toLowerCase()!="remove"){
if(Element.addEventListener){
if(!Capture_or_Bubble){
Capture_or_Bubble=false;
}else{
if(Capture_or_Bubble.toLowerCase()!="true"){
Capture_or_Bubble=false;
}else{
Capture_or_Bubble=true;
};
};
Element.addEventListener(Event,Function,Capture_or_Bubble);
}else{
Element.attachEvent("on"+Event,Function);
};
};
};
function Controls(){
var Controls=document.getElementById("Quote_App").getElementsByTagName("dd");
for(var i=0;i<Controls.length;i++){
var Control=Controls[i];
Event("add",function(){
var lorem=new Lorem(Control);
lorem.Control=Control;
alert(lorem.Amet());
},"click",Controls[i]);
};
};
Event("add",Controls,"load",window);
Currently you click on any DD element Lorem always returns the nodeName and Id of the last DD element.
Lorem should return the nodeName and Id of the Control (Control[i]) that triggered Lorem.
How do I go about making this happen?
Thank you!

you need a closure inside the loop where you are attaching the event handlers to capture the value of i in each loop iteration.
for(var i=0;i<Controls.length;i++) {
(function() {
var Control=Controls[i];
Event("add",function(){
var lorem=new Lorem(Control);
lorem.Control=Control;
alert(lorem.Amet());
},"click",Controls[i]);
})();
};
Here I've created a closure above using JavaScript's good friend, the self-invoking anonymous function.
The reason a closure is required is that without it, the value of i at the point at which any event handler function is executed would be the value of i in the last loop iteration, not what we want. We want the value of i as it is in each loop iteration, at the point at which we declare each event handler function, thus we need to capture this value in each iteration. Using an anonymous function that executes as soon as it's declared is a good mechanism for capturing the desired value.
Another point, slightly off topic but it may help you out, is that event capturing is not supported in every browser (ahem, IE) but event bubbling is. This effectively makes the useCapture boolean flag in addEventListener quite useless for developing cross browser web applications. I'd therefore advise not to use it.
One more thing, JavaScript generally uses camel casing for function names and variable names. Pascal casing is generally used only for constructor functions (functions that create objects).

When you create a function that refers to variables outside of it, these references will be resolved at the time you call this function.
In your case:
var functions = [];
function outer() {
for (var i = 0; i < N; i++) { // <------------
functions[i] = function() { // |
alert(i); // <-- this 'i' refers to this one
}
} // At the end of the for loop, i == N (or N+1?)
}
functions[x](); // Will show N (or N+1)
// because that's the current value of i in the outer function
// (which is kept alive just because something refers to it)
What you want to do is capture the value of 'i' at each step of the loop, for later evaluation, e.g.:
var functions = [];
function outer() {
for (var i = 0; i < N; i++) { // <---------------------------------------
functions[i] = (function(my_i) { // <---- |
return function () { // | |
alert(my_i); // my_i refers to this which is a copy of 'i' there
}
}(i)); // run function(with my_i = the i at each step of the loop)
}
}
functions[x](); // Will show x
You can see there is an inner function that gets a copy of the current counter as a parameter. This inner function stays alive with that copy, so that later calls to the stored innest function returns the value of the my_i of the function that created it -- Clear? :-)
This is the wonderful world of closures. It may take a bit of mind-bending to first get it, but then you'll be glad you did, so go and google "javascript closures" to death!

This may be a more obvious variant of Russ Cam's answer:
function Controls() {
var Controls = document.getElementById("Quote_App").getElementsByTagName("dd");
var createHandlerFor = function(CurrentControl) {
return function() {
var lorem=new Lorem(CurrentControl);
lorem.Control=CurrentControl;
alert(lorem.Amet());
}
};
for (var i=0; i<Controls.length; i++) {
Event("add", createHandlerFor(Controls[i]), "click", Controls[i]);
}
};