JQuery best practice, using $(document).ready inside an IIFE?

Question

I am looking at a piece of code:

(function($) {    
   // other code here    
 $(document).ready(function() {   
    // other code here    
  });    
})(jQuery);

I though the IIFE does the functions of $(document).ready, is this code correct? or can I just remove the $(document).ready and place the code directly inside the IIFE.

Solution 1

No, IIFE doesn't execute the code in document ready.

1. Just in IIFE:

(function($) {
  console.log('logs immediately');
})(jQuery);

This code runs immediately logs "logs immediately" without document is ready.

2. Within ready:

(function($) {
   $(document).ready(function(){
     console.log('logs after ready');
   });
})(jQuery);

Runs the code immediately and waits for document ready and logs "logs after ready".

This explains better to understand:

(function($) {
  console.log('logs immediately');
  $(document).ready(function(){
    console.log('logs after ready');
  });
})(jQuery);

This logs "logs immediately" to the console immediately after the window load but the "logs after ready" is logged only after the document is ready.

---

IIFE is not alternative for ready:

The alternative for $(document).ready(function(){}) is:

$(function(){
   //code in here
});

---

Update

From jQuery version 3.0, the ready handler is changed.

Only the following form of ready handler is recommended.

jQuery(function($) {

});

Ready handler is now asynchronous.

$(function() {
  console.log("inside handler");
});
console.log("outside handler");

> outside handler

> inside handler

Solution 2

• If you need DOM to be ready you need to use $(function() {/* DOM Manipulations goes here})
• If you want to avoid some sort of names collision you can wrap the code with IIFE (function($) {/* safely use $ here*/}(jQuery))

And you can combine both approaches:

(function($) {
    /*Do smth that doesn't require DOM to be ready*/

    $(function() {
        /*Do the rest stuff involving DOM manipulations*/
    });

}(jQuery));

Solution 3

IIFE needs to create a one more scope. If you remove IIFE and $ will no be defined (ie jQuery.noConflict()) - you will get an error. jQuery will defined everywhere the javascript file with library was loaded.

So it's not jQuery best practise, it's a javascript best practise.

Comments

[Abeer Sul]

It's worth mentioning that when IIFE surrounds document.ready, it is used to "not" pollute the global scope

[Subhadeep]

In IIFE we are passing Jquery and receiving with $. Now Jquery we are passing is window object variable and not defined anywhere. Then why code is not throwing unknown reference error when jquery library writing based on $?? please explain