My question is very simple, but I can't seem to find the answer.
I have the following code:
var hiddenCountryOptions = $("#HiddenCountryDropdownId option");
Is this code executed just once when I load the page? Or the jquery code is executed every time I use the variable?
Thanks
Just once. $("#HiddenCountryDropdownId option") is a function, and once it runs and returns it's value, that value is stored in the variable hiddenCountryOptions. So any time you reference hiddenCountryOptions, you will be accessing the value returned by $("#HiddenCountryDropdownId option"). This isn't specific to jQuery, but is a basic feature of javascript.
The right hand operand (right of the assignment operator) is executed only once. Simply because it's a function call, which returns an object. That return value (the object) is assigned to the variable... or at least a reference to that object is being assigned.
The ECMA specification is quite clear about this, in its own way, of course):
The production AssignmentExpression : LeftHandSideExpression = AssignmentExpression is evaluated as follows:
Let lref be the result of evaluating LeftHandSideExpression.
Let rref be the result of evaluating AssignmentExpression.
[skipping 3 & 4]
Call PutValue(lref, rval).
As you can see, the right hand expression is evaluated first, then the value to which the expression was resolved is assigned.
That's the reason why you sometimes see code like this:
var someFunctionWithElements = (function(elem1, elem2)
{
return function(val1, val2)
{
elem1.val(val1);
elem2.val(val2);
};
}($('#foo'), $('#bar')));
The closer created here is being passed 2 DOM references (wrapped in a jQ object). This way, the DOM isn't travered each time we call the somFunctionWithElements function...
$("#HiddenCountryDropdownId option");
is a call to the jquery function, so it will execute and return a reference which will be stored in the hiddenCountryOptions variable.
Only once. In case you want to prove it to yourself... you'll see that even after another a class, there are still only 2 in adivs:
http://jsfiddle.net/7uVuE/
HTML
<div class="a">foo</div>
<div class="a">foo</div>
<div>bar</div>
JS
adivs = $(".a");
console.log(adivs.length); //2
$("div").addClass("a");
console.log(adivs.length); //still 2
