What does (function($) {...})(jQuery); do?

Question

Someone can explain me what does this code do?

(function($) {
    $.cookie = function(key, value, options) {
         // Body of the function here
    }
})(jQuery);

Wasn't is simpler just declaring in that way?

function cookie(key, value, options) {
     // Body of the function here
}

http://docs.jquery.com/Plugins/Authoring IIFE (Immediately Invoked Function Expression) — arjuncc, Apr 16 '13 at 11:10

score 8 · Answer 1 · answered Apr 16 '13 at 11:10

8

This is called a closure to avoid conflicts with other libraries which are using $. This way you can ensure to use $ in that function with passing jQuery as a param.

(function ($) {
   $(function () {
    .......
   });
})(jQuery); //<----passing jquery to avoid any conflict with other libraries.

like Mootools, prototype etc libraries also uses $ and this closure is used to avoid any conflict.

answered Apr 16 '13 at 11:10

Jai

74,255
12
74
103

3

That's one closure too much. Better use `jQuery(function($){…});` – Bergi Apr 16 '13 at 11:12
@Bergi absolutely much shorter way. – Jai Apr 16 '13 at 11:14

score 5 · Answer 2 · answered Apr 16 '13 at 11:11

You're creating an anonymous function that accepts $, and you're immediately invoking it, passing jQuery. That creates a closure where $ is jQuery. That is, provided that you know that jQuery will be a jQuery instance at the time of execution, you know also that $ will be a jQuery instance instance in that closure. It's a safeguard against competing frameworks that might also define $.

What does (function($) {...})(jQuery); do?

2 Answers2