Using functions' accepted parameters vs. assigning them to a variable

Question

What would be the difference between

(function($){
    $(document).ready(function() {

        $(this)/*... jQuery functions */

    });
})(jQuery);

and this?

(function(jQuery){
    jQuery(document).ready(function() {

        var $ = jQuery;
        $(this)/*... jQuery functions */

    });
})(jQuery);

and when should I use each?

There's no big difference unless you need jQuery to be an exact alias for $. — John Dvorak
– John Dvorak, Commented Dec 2, 2012 at 8:38
FWIW, even better IMO (more concise): jQuery(function($) { $(...).... });. — Felix Kling
– Felix Kling, Commented Dec 2, 2012 at 8:41
@IlyaD as in $ === jQuery even if window.jQuery changes. — John Dvorak
– John Dvorak, Commented Dec 2, 2012 at 8:49

jfriend00 · Accepted Answer · 2012-12-02 08:50:21Z

2

The main difference between the two examples is that one is in a more local scope. In the first example, your redefinition is at a higher scope than in the second example where it's a local variable. Theoretically, the one in local scope might be slightly faster to use, but whether that is a meaningful difference or would depend upon a lot of factors.

Each nested function declaration has it's own set of local variables. When the javascript interpreter goes to find the value of a variable like $, it looks first for it in the most local scope (the local variables of the function that is being executed at the moment). If it doesn't find it there, it goes up the chain looking for other variables in a higher scope. If it is not found at the next higher level of scope, it keeps going up the chain. Eventually, it gets to the global scope and searches the global scope for the desired symbol. If it isn't found there, then it is undefined.

In your first code example, $ will be found at this higher scope as it is not directly a local variable of the document.ready callback function that was executing. In your second example, it will be a true local variable so it will be found slightly quicker.

In addition, both cases assign $ to a non-global variable within your scope which protects it from begin hijacked by outside code.

edited Dec 2, 2012 at 8:50

answered Dec 2, 2012 at 8:40

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

4 Comments

ilyo Over a year ago

thanx, in the second case i meant jQuery(document).ready(function() {. What is more local scope?

jfriend00 Over a year ago

@IlyaD - I added more to my answer about different scopes and finding variables.

ilyo Over a year ago

thanx, so in the first case the $ will be in the scope of the first function, and in the second-it will be in the second functions' scope?

jfriend00 Over a year ago

@IlyaD - In the first code example, $ is defined in a higher level scope (above the document.ready callback function). In the second code example, $ is defined within the callback function itself. Both are within the scope of the callback function (as $ will found in both examples), the closer in scope is just searched before the other.

Collectives™ on Stack Overflow

Using functions' accepted parameters vs. assigning them to a variable

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related