A bunch of little closures vs one big one

Question

I have a Google Map, and I am adding event listeners to different things. For instance, I have a Point object, and for this object, I have been adding events as thus:

google.maps.event.addListener(this.marker, 'click', (function(point) {
    return function(event) {
        alert(point.index);
    }})(this));

I have a lot of these events (one for 'click', 'rightclick', 'doubleclick', etc).

When I am adding the event, I create a closure specifically around only the current point. What I am tempted to do however is just:

var point = this;

google.maps.event.addListener(this.marker, 'click', function(event) {
    alert(point.index);
});

I have been avoiding this though because of two reasons.

One is that I've seen people that know more about Javascript than I do using "individual" closures, so I figure they must have a good reason.

The second is because (and I don't know anything about how Javascript is interpreted) I wonder if creating a large closure captures all of the other variables I'm not going to use in my event function (e.g. 'var color'). Could this cause performance problems?

Thanks for the help!

Answer 1

There should be no problem with it while your point does not change. So it would be fine to do it as in your second example:

var point = this;

google.maps.event.addListener(this.marker, 'click', function(event) {
  alert(point.index);
});

Generally you would do another closure of your event handling function when your point is bound to change and you need it at a distinctive state, like in a loop for example:

for(var i = 0, len = points.length; i < len; i++) {
  google.maps.event.addListener(points[i].marker, 'click', (function(point) {
    return function(event) {
      alert(point.index);
    }
  })(points[i]));
}

If in my example we would have not used the closure, in the moment when the event was triggered we would have had reference to the last elements of the array points.

Answer 2

Both your examples create closures over something called point. In the first one, point is a parameter to the outer anonymous function, and in the second one, point is a local variable. But either way, it is ultimately closed over by an anonymous function.

Creating an anonymous function accepting one named parameter and then immediately calling it with an argument is just one way of binding a value to a name within a scope.

(function(x) { 
    // now x has the value
})(getValue());

Or:

var x = getValue();
// now x has the value

The difference is that by using a function, you ensure that the x lives in its own namespace and will not be merged with any other x in the enclosing scope. That is, the value is in maintainability, not speed of execution.

Which will perform better? The only way to find out is to test on multiple browsers - they all have their own execution engines.

It seems reasonable to think that the more anonymous functions are created, the more small allocations occur. So your second example, with fewer anonymous functions, may perform better. But that is pure unfounded guesswork without testing in every browser you care about.