Question

I’m working with a script and have found the following, which I really can’t find any info of what it means

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


       ... bla bla bla ...

    });
}) (jQuery);

Is (function($){}) (jQuery); the same as $(function () {}); ? and if so, why would somebody define twice document.ready ?

Answer 1

No, it’s not the same. It’s an anonymous function which is being passed the jQuery object, to insure that it is available as the local variable $ within the scope of the function, even if the global variable $ is overwritten by another library. It is completely different than $(function () { }) and $(document).ready(function () { }).

This particular pattern is recommended in the jQuery plugin authoring documentation:

[When authoring a plugin] 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.

(function( $ ) {
  $.fn.myPlugin = function() {
 
   // Do your awesome plugin stuff here

 };
})( jQuery );