Immediately Invoked Function Expression and document ready function

Question

In Javascript using jQuery i can add scope to the function using Immediately Invoked Function Expression and pass the function jQuery, and name the parameter $

(function ( $ ) { 

    $.fn.greenify = function() {
        this.css( "color", "green" );
        return this;
    }; 

}( jQuery ));

Similarly, we write document ready function as below

$(function() {
    console.log( "ready!" );
    // use $ variable here
});

Does that mean document ready function is already scoped?
Do i also need to pass the function jQuery, and name the parameter $ in document ready function? something like below

$(function ( $ ) {
    console.log( "ready!" ); 
    // use $ variable here   
 }( jQuery ));

Any time you have a `function() {}`, there is a scope associated with that method. Once you get into ES6, using block scope `{}` with `let` and `const` (and maybe one more?) has a scope as well. Related: https://stackoverflow.com/questions/34564403/what-is-block-scope-function-ecmascript-6-compare-with-ecmascript-5#34564497 — Taplar, Dec 18 '17 at 22:35
$ and jQuery are really window.$ and window.jQuery. So no need to additionaly pass jQuery as a parameter to IIFE unless you want to create a shadow local variable $ inside this IIFE scope with same value. — Oleksandr Poshtaruk, Dec 18 '17 at 22:38
Also you don't have to pass $ to a doc ready, but you can. `jQuery(function($){});` This is helpful if the noConflict is active. — Taplar, Dec 18 '17 at 22:39

ibrahim mahrir · Answer 1 · 2017-12-18T22:50:12.800

0

The IIFE is invoked immediately, it won't wait for document to get ready. So:

(function($) {

    // here document is not necessarly ready

})(jQuery);

When you do $(function() { ... }); you are not creating an IIFE, you are just passing a function (callback) to be executed when the document is ready.

If you want to do both, then use:

(function($) {

    $(function() {

        // here, document is really ready
        // $ available here too

    });

})(jQuery);

Or do it like this (using the fact that jQuery passes itself as parameter to its ready callback):

jQuery(function($) {

    // here, document is really ready
    // and $ is obviously available (only here)

});

edited Dec 18 '17 at 22:50

answered Dec 18 '17 at 22:37

ibrahim mahrir

31,174
5
48
73

You said `When you do $(function() { ... }); you are not creating an IIFE, you are just passing a function (callback) to be executed when the document is ready`... So if i have 2 document ready functions on the same page. and both document ready functions are using same variable name but different value like `var num = 1111` and `var num = 9999` aren't these variables scoped to respective document ready function? – LP13 Dec 18 '17 at 23:21
@LP13 I think you may be confusing **functions scopes** in general, with **functions scopes** used in IIFEs specially. Both are the same, because both are function scope. `function() { anything declared in here is only visible inside here }`. Anything declared inside the function's body is only visible inside that body, no matther how the function is used: whether it's used as an IIFE or as a callback to another function (like `$(...)`). – ibrahim mahrir Dec 18 '17 at 23:33

Immediately Invoked Function Expression and document ready function

1 Answers1