jQuery anonymous function variable scope

Question

Can someone please explain why the following ~~doesn't work~~ works:

function displayResults(data) {
    $("#odNextPage").click(function() {
        alert(data.queryType); // "undefined"
        return false;
    });
}

Why can I use the data object inside the click anonymous function?

Edit: The queryType property wasn't actually set which I think caused the problem, sorry. I'd still be interested for someone to explain why it now does work, given that the click function is executed outside the scope of the data object.

The function isn't actually called here. It is passed around and when it is called the context is different. — QuentinUK, Aug 16 '11 at 02:13
It works because click function was defined in same context where `data` is. When click event produced it calls this click function and `data` is looked in scope where function was created. — buryat, Aug 16 '11 at 02:22
Read here about how do JavaScript closures work: http://stackoverflow.com/questions/111102/how-do-javascript-closures-work — sanmai, Aug 16 '11 at 02:52

mu is too short · Accepted Answer · 2011-08-16T02:50:31.080

The thing that calls displayResults controls data not only when the the function is called but also when it returns (and hence before your callback gets called). The calling sequence could look like this:

data = { /* interesting things */ };
displayResults(data);
delete data.queryType;
// Time passes and then your callback gets called
// but data.queryType is undefined.

I don't know the exact circumstances of your situation but the above summarizes what can happen.

When you produce a closure over data you're grabbing onto data but that doesn't mean that you've locked what's inside data.

Now that we know where data is coming from and why it was broken in the first place, we can consider why it works when data is correct and left alone.

When you create your anonymous callback function:

function() {
    alert(data.queryType);
    return false;
}

you're creating a closure that holds onto a reference to data (or, more accurately, what data points to) and data won't be killed off until no one is referencing it. The lifetime of a variable depends on its scope; your data variable has lives within your displayResults function. But the variable only references (or points to) an object in memory and that object will, more or less, stick around until no one references it anymore.

The variable name and the object that is named are separate entities with separate lifetimes. To quote Bruce Lee:

Don't concentrate on the finger, or you will miss all the heavenly glory.

You can't get away from pointers in programming even when they're not called pointers.

Thanks, it works now that I've filled the data object properly (my bad). See edit - can you explain what's going on? — Flash, Aug 16 '11 at 02:20
@Flash: I added an update that may (or may not) clarify things. — mu is too short, Aug 16 '11 at 02:45
Thanks, that helped alot. One question: Will a closure like this cause a memory leak if I keep calling displayResults with new `data`, or can I be confident that the old anonymous functions and associated old data will be cleaned up? — Flash, Aug 16 '11 at 04:12
@Flash: Don't worry too about memory leaks too much with jQuery, the garbage collector should take care of cleaning everything up. Just do things the standard way (and what you're doing is pretty standard) and you should okay. — mu is too short, Aug 16 '11 at 04:27

AlienWebguy · Answer 2 · 2011-08-16T02:28:10.893

You should use getters and setters to keep track of your variable assignments regardless of scope.

var data = {};
setDataQueryType('post');

$("#odNextPage").click(function() {
    alert(getDataQueryType()); // 'post'
    setDataQueryType('get');
    alert(getDataQueryType()); // 'get'
    return false;
});

// Getter for query type
function getDataQueryType() {
    return data.queryType;
}

// Setter for query type
function setDataQueryType(val) {
    data.queryType = val;
}

jQuery anonymous function variable scope

2 Answers2