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.

Answer 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