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