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

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

Leave a Comment