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.

Carycaryatid

no iife doesn't execute the code on document ready... – Plano

if you want to work with dom you can use $(document).ready otherwise it doesn't matter. – Rhodesia

I think you confused $(function(){ ... }); (which is a jQuery shorcut for .ready()) with IIFE – Narine

“or can I just remove the $(document).ready and place the code directly inside the IIFE” – well that depends largely on what this code needs access to of course … – Lotze

I'm shocked no one has mentioned here that the most important distinction is the location of the script that this refers to. If the script tag is at the bottom at the body (like it should be), then there is no difference because the DOM is ready. The only need for $(document).ready() is if you put your script tag prior to the bottom of the body, in which case the DOM is not yet ready and you need to wait for the event to fire. – Elohim

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

Plano

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

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 – Throckmorton

Answer 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));

Cultivation

Answer 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.

Ban

Answer 4

IIFE does the functions when the Execution Context ( scope of the current code that is being evaluated ) is ready. Check the article about Code Organization Concepts in jQuery which describes the two most common patterns, The Object Literal and The Module Pattern, and how to use them.

Ornithine