CODEWITHSUNDEEP
javascriptiife
Matt
Matt

Reputation: 4301

Need help understanding a javascript function

I'm hoping someone can explain the following usage of JavaScript.

I have a page with a script that looks like this:

(function($){
     // code 
     // and stuff
})(jQuery);

I'm trying to understand what this code does, specifically:

  1. The opening parenthesis at the start
  2. The usage of the $ symbol
  3. The jQuery in parentheses at the end

thanks!

Upvotes: 0

Views: 223

Answers (5)

sorpigal
sorpigal

Reputation: 26106

Briefly:

This declares an anonymous function which accepts one argument, referred to by the local variable name of $, and then immediately calls the function passing as the first argument the jQuery object.

Less briefly:

In javascript a function is declared like this:

function foo(arg1, arg2){

}

Later the function foo can be called:

foo("arg 1", "arg 2");

But in javascript functions are first class citizens; you may, if you choose, store a function in a variable. When doing this the variable name is the function name, so you write it like this:

var foo = function(arg1, arg2){

};

The trailing semicolon is required because a variable declaration (and assignment) is a statement. Later, the function foo can be called:

foo("arg 1", "arg 2");

The advantage here is that you can pass the function to another function, or store it in an array, or whatever. Functions of this sort are called anonymous functions (because they have no function name as such).

Inside the anonymous function foo, as seen above, you can declare local variables which remain withing the scope of that function and do not exist in the scope in which the function was declared. For example, the local arg1 and arg2 variables don't exist in the scope of the variable foo (but they do exist within the anonymous function stored in foo).

This trick allows us to create a private block in which we control what things are named without worrying about stomping over someone else's namespace.

You could write the example you provided as follows:

var foo = function($){

}; fn(jQuery);

Which is the same thing, but has that ugly intermediate variable. What may not be obvious is that the declaration of the anonymous function "returns" a function reference which can be invoked later... or at the same time, merely by adding the function call syntax of ().

What the code is doing is defining an anonymous function, which creates a private scope, and then immediately calling it without storing in a variable. Like this:

function(arg1){

}("arg 1");

I am not entirely sure why there's an extra set of parentheses arroudn the anonymous function definition, but they at least make the code a little more readable/logical. You are merely passing an argument to the result of the parenthetical expression, which happens to be a function:

(function(arg1){

})("arg 1");

All of tis allows jQuery to have a globally-scoped variable named jQuery, but also allows you the user to use the shorthand of $ without conflicting with other javascript frameworks which use the same name for other things.

Upvotes: 0

Rex M
Rex M

Reputation: 144182

At the highest level, it is declaring a function and invoking it in the same statement.

Let's break it down into component parts:

First, we can use $ as an argument/variable name in a function, just like anything else:

function foo($)
{
    alert($);
}

foo('hi'); //alerts 'hi'

Second, we can assign a function to a variable:

var foo = function($) {
    alert($);
}

foo('hi'); //alerts 'hi'

Finally, we don't have to give functions names - we can just declare them. We wrap them in parenthesis to encapsulate the entire function declaration as a var, which we then call (just like above):

(function($) {
    alert($);
})('hi');

In your case, jQuery is some object being passed into the function as the $ parameter. Probably the jQuery library root object, so you can call functions on it.

Upvotes: 2

Brandon Belvin
Brandon Belvin

Reputation: 445

  1. The parenthesis wrap the anonymous function so it can be called right away with the parameter being a reference to jQuery

  2. $ is a valid variable name in JavaScript, so many frameworks use it for brevity. By including it here as the function argument, you're saying that you want to use $ as an alias for jQuery. This lets you keep your code as short as possible and save your user's bandwidth.

  3. Answered in the first part - you're sending a reference to the jQuery object/framework to your anonymous function.

Upvotes: 0

Gumbo
Gumbo

Reputation: 655755

Let’s first look at the inner function declaration:

function($){
     // code 
     // and stuff
}

This is an anonymouse function declaration with one parameter named $. That function is then wrapped in parenthesis and called by appending (jQuery) to it with jQuery as parameter.

Upvotes: -1

BryanH
BryanH

Reputation: 6062

This is an anonymous function.

The specific example you provide is usually used when jQuery (which uses the "$") is conflicting with another library (prototype also uses "$").

What this does is say that whenever "$" is used within the function, it is to reference the jQuery object.

Normal:

$("foo").doStuff()

Conflict avoidance:

jQuery("foo").doStuff()

Using anonymous function to avoid conflict:

(function($){
  $("foo").doStuff();
})(jQuery)

Upvotes: 5

Related Questions