Why write code Jquery like this

Question

Why write code Jquery like this?

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

Jai · Accepted Answer · 2013-04-04T18:35:54.133

14

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.

from the docs:

it's a best practice to pass jQuery to an IIFE (Immediately Invoked Function Expression) that maps it to the dollar sign so it can't be overwritten by another library in the scope of its execution.

This is generally used to author plugins. Read out more here

edited Apr 04 '13 at 18:35

answered Mar 31 '13 at 06:06

Jai

74,255
12
74
103

8

wah user with nearly 9k but only 7 upvote and 24 downvotes. Come on man, give people some points!!!! – Mar 31 '13 at 06:24
@adeneo It's better if you can add it as an answer with an explanation :-) – Techie Mar 31 '13 at 06:36
@user1788747 That was long ago i used to, yup will get to it soon. – Jai Mar 31 '13 at 06:38
@dasun True, because you can't downvote comments :) (It wouldn't avoid a potential clash with `$`.) – JJJ Mar 31 '13 at 06:38
@Dasun - It's really more of a comment, as the existing answers has this well covered. Juhana, yes it would ! – adeneo Mar 31 '13 at 06:38

score 11 · Answer 2 · edited Jun 20 '20 at 09:12

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

This specify a function to execute when the DOM is fully loaded. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts. Read more
(function(){ ... })();

That is a function which invokes itself as soon as possible when the browser is interpreting your ecma-/javascript. Therefore, its very unlikely that you can successfully act on DOM elements here. It will be executed as soon as it is encountered in the Javascript.

Explanation for your code

(function ($) { <--  $ is just an alias for jQuery
    $(function () {
     .......  <--- Here you can use the $ without an issue.
    });
})(jQuery); <--- This is done usually to avoid conflicts. Passing jQuery object here

If you look at the jQuery core. It says

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

jQuery.noConflict()

score 2 · Answer 3 · edited Mar 23 '14 at 09:30

(function ($) {
  //
})(jQuery);

This type of Module pattern is very used out there. It invokes itself passing a reference to jQuery providing faster access to the variable, as it now lives in the scope of the function, and it also prevents global pollution.

The second one:

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

Runs the anonymous function once the DOM is loaded, that you make sure that everything is ready before executing any code.

score 1 · Answer 4 · answered Mar 31 '13 at 06:10

Some other libraries also use the $ as a variable name so to assure you are using jQuery not other lib var you will pass it to a function and name it $ in that scope.

(function ($) { //<--- naming jQuery to $
   $(function () {//now we are sure that we are using $  as jQuery  
    .......
   });
})(jQuery); //<----passing jquery .

Why write code Jquery like this

4 Answers4

from the docs:

This is generally used to author plugins. Read out more here

Explanation for your code

Linked

Related