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

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.