Anonymous jQuery variable scope

Question

Can someone explain why the following does not work:

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

Why can I use a data object inside an anonymous click function?

Edit : the queryType property is not actually set, which, in my opinion, caused the problem, sorry. I would still be interested in someone explaining why it is now working, given that the click function is executed outside the scope of the data object.

Answer 1

The thing calling displayResults manages data not only when the function is called, but also when it is returned (and therefore before the call to the call). The calling sequence might 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 do not know the exact circumstances of your situation, but the above summarizes what might happen.

When you create a closure on data , you capture data , but that does not mean that you have blocked what is inside the data .

---

Now that we know where data comes from and why it was broken, 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 create a closure that contains a link to data (or, more precisely, what data points to), and data will not be destroyed until no one refers to it. The lifetime of a variable depends on its volume; your data variable has life in your displayResults function. But a variable only refers to (or points to) an object in memory, and this object will, more or less, stick until no one else refers to it.

The variable name and the named object are separate objects with different lifetimes. To quote Bruce Lee:

Do not concentrate on your finger, or you will miss all heavenly glory.

You cannot get away from pointers in programming, even if they are not called pointers.

Answer 2

You should use getters and setters to track 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; }