Creating a function reference that has value parameters not references

Question

I'm not sure exactly how to describe what I want. I want to define a function with the parameters being a local VALUE not a reference.

say I have list of objects I want to create

for(i = 0; i < 10; i++){
  var div = document.createElement("div");
  div.onclick = function(){alert(i);};
  document.appendChild(div);
}

Now I believe in this example no matter what div I click on, it would alert "10"; as that is the last value of the variable i;

Is there a way/how do I create a function with the parameters being the value they are at the time I specify the function... if that makes any sense.

Inside the function, i is a captured variable, not a parameter. — SLaks
– SLaks, Commented Mar 16, 2010 at 0:11
See also: stackoverflow.com/questions/1734749 stackoverflow.com/questions/643542 stackoverflow.com/questions/1582634 stackoverflow.com/questions/1331769 stackoverflow.com/questions/1552941 stackoverflow.com/questions/750486 stackoverflow.com/questions/933343 stackoverflow.com/questions/1579978 stackoverflow.com/questions/1413916 ...and more... :) — Christian C. Salvadó
– Christian C. Salvadó, Commented Mar 16, 2010 at 0:27
@CMS: Yes; I've gotten a lot of reputation answering this kind of question. — SLaks
– SLaks, Commented Mar 16, 2010 at 0:28
@SLaks: Yes, I've also answered this question many many times, I think at some point we will need a sort of FAQ by tag or something like that... — Christian C. Salvadó
– Christian C. Salvadó, Commented Mar 16, 2010 at 0:32
It's difficult to find existing answers when you're not sure exactly how to phrase the question :) — Sheldon Ross
– Sheldon Ross, Commented Mar 16, 2010 at 0:32

SLaks · Accepted Answer · 2010-03-16 00:10:56Z

5

You need to create the function inside another function.

For example:

div.onclick = (function(innerI) {
    return function() { alert(innerI); }
})(i);

This code creates a function that takes a parameter and returns a function that uses the parameter. Since the parameter to the outer function is passed by value, it solves your problem.

It is usually clearer to make the outer function a separate, named function, like this:

function buildClickHandler(i) {
    return function() { alert(i); };
}

for(i = 0; i < 10; i++){
    var div = document.createElement("div");
    div.onclick = buildClickHandler(i);
    document.appendChild(div);
}

answered Mar 16, 2010 at 0:10

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sheldon Ross Over a year ago

Now I suppose I have to curry the functions if I want to pass 'this' also? div.onclick= function(){somefunction(i,this)};

SLaks Over a year ago

@Sheldon: Correct. Alternatively, someFunc.call(this, i) will allow you to use this inside of someFunc.

Pim Jager · Accepted Answer · 2010-03-16 00:12:24Z

0

You could use an anonymous function:

for(i = 0; i < 10; i++){
    (function(i){
        var div = document.createElement("div");
        div.onclick = function(){alert(i);};
        document.appendChild(div);
    })(i)
}

answered Mar 16, 2010 at 0:12

Pim Jager

32.2k17 gold badges75 silver badges100 bronze badges

Collectives™ on Stack Overflow

Creating a function reference that has value parameters not references

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related