Purpose of jQuery(function ($) { ... }($));

Question

I've been seeing this pattern in various projects I learn from, sometimes when using jQuery developers wrap their code in this function:

jQuery(function ($) { 'use strict'; /* Application code */ }($)); /* End jQuery */

I was trying to look up the explanation in jQuery docs, but didn't really find much. Could you please explain to me why and when should this be used? And are there better practices / alternatives for something like this.

It is synonymous with $(document).ready(function(){}). It is called when the page is loaded so you have access to the DOM. — Mr. Polywhirl
– Mr. Polywhirl, Commented Feb 10, 2015 at 12:40
This doesn't look like a regular pattern, actually I looks partly useless. The function function ($) {} immediately is invoked with $ and the result of it is passed to jQuery() as parameter. — t.niese
– t.niese, Commented Feb 10, 2015 at 12:46

Jai · Accepted Answer · 2015-02-10 12:45:44Z

4

The $ which is an alias for jQuery, sometimes it gets collide with other javascript libraries like mootools which also uses $ sign internally.

So you have just secured the $ jQuery alias for your code within the scope of the method:

jQuery(function ($) { 'use strict'; /* Application code */ }($));

another similar approach is having a scope like this:

(function($){ $(function(){ // <----here you have just secured the $ for your code. 'use strict'; /* Application code */ }); })(jQuery);

answered Feb 10, 2015 at 12:45

Jai

74.8k12 gold badges77 silver badges104 bronze badges

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

4 Comments

Jochen van Wylick Over a year ago

Also, OP, this notation wraps everything in an an Immediately-Invoked Function Expression ( aka IIFE ).

Jai Over a year ago

@spike true! That is what i posted in the answer but did not used the term IIFE and doc ready just fires once in a page so that would do i think.

t.niese Over a year ago

Just as an addition: As long as the function ($) {'use strict'}($) does not return a function then the outer jQuery() is useless. Even then it might be misleading.

Jochen van Wylick Over a year ago

@Jai - jep, I thought I'll provide some Google terms for the man.

Vikas Kad · Accepted Answer · 2015-02-10 12:44:23Z

2

read this you will get idea about it...

http://api.jquery.com/jquery.noconflict/

answered Feb 10, 2015 at 12:44

Vikas Kad

1,0212 gold badges19 silver badges43 bronze badges

Comments

ram · Accepted Answer · 2015-02-10 12:41:46Z

0

It is very similar to :

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

answered Feb 10, 2015 at 12:41

ram

2,3534 gold badges29 silver badges39 bronze badges

Comments

Laszlo Varga · Accepted Answer · 2015-02-10 12:55:37Z

Without the outside wrapper, it is a plugin definition, see: Basic plugin creation.

Collectives™ on Stack Overflow

Purpose of jQuery(function ($) { ... }($));

4 Answers 4

4 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Linked

Related