Self executing Anonymous functions in javascript

Question

In my javascript code, I have a self executing anonymous function which executes immediately. Inside that I have document.ready() which makes sure that the dom is ready before doing stuffs. Just wondering whether the document.ready in my code is redundant or not.

(function() {
"use strict";
var app = {
    init: function () {
        app.addLun('Hello');
        $('#some_id').on('click', this.changeStuff);
    },
    changeStuff: function(e) {
        e.preventDefault();
        $('#some_id').text("Cool text");
    },
    addLun: function(a) {
        console.log(a);
    }
};
$(document).ready(function() {
    app.init();
});
})();

It depends on where this code is located. But I would say it's important to have since your `init` method accesses the DOM, so it needs it to be ready. Worst case scenario is that the DOM is already ready (somehow) and the `app.init();` executes immediately. Nothing wrong with that. Especially since I would assume that because the method is called `init`, it would only be called once...so it's not like the `$(document).ready(` part would be executed many times — Ian, Jul 28 '13 at 07:00
This doesn't really apply to you atm, but just a word of caution: calling `$(document).ready(function(){...});` multiple times (e.g. within a loop) will cause the inner function to be called multiple times.. I've seen it happen on SO several times, so I thought I'd just throw that out there lol. — asifrc, Jul 28 '13 at 07:16

score 4 · Accepted Answer · answered Jul 28 '13 at 07:00

4

Self-executing anonymous functions and jQuery's ready event handler have nothing to do with one another so no, it's not redundant.

answered Jul 28 '13 at 07:00

Blender

289,723
53
439
496

score 2 · Answer 2 · answered Jul 28 '13 at 07:01

In general, no. The immediately-invoked function expression will be invoked immediately, whereas $(document).ready can delay execution. If you know that that whole block of code will be executed after the DOM is ready, then sure, it's redundant, but that's probably not the case.

You can, however, replace your immediately-invoked function expression with passing the whole block to $(document).ready, e.g.:

$(document).ready(function() {
    "use strict";
    var app = {
        // ...
    };
    app.init();
});

+1. Good call on putting it all in the ready handler, noting that although that is definitely fine for the example shown it obviously may not be for other cases. — nnnnnn, Jul 28 '13 at 07:08

anar khalilov · Answer 3 · 2013-07-28T07:13:15.277

0

If you don't write the $(document).ready part then you will be accessing $('#some_id') inside the init function without waiting for the $(document).ready event, which will not work naturally. With document.ready, it will work though and have the same results as the following code:

$(document).ready(function()
{
    "use strict";

    var app = {
        init: function () {
            app.addLun('Hello');
            $('#some_id').on('click', this.changeStuff);
        },
        changeStuff: function(e) {
            e.preventDefault();
            $('#some_id').text("Cool text");
        },
        addLun: function(a) {
            console.log(a);
        }
    };

    app.init();
});

edited Jul 28 '13 at 07:13

answered Jul 28 '13 at 07:04

anar khalilov

16,993
9
47
62

_"You are accessing $('#some_id') without waiting for the $(document).ready event"_ - No, in the OP's code that access is inside a method that is called from within the ready handler. – nnnnnn Jul 28 '13 at 07:05
1

Cool, the update is better. Note that if the whole script appears at the end of the body (or anywhere _after_ the element(s) in question) then you don't need a ready handler. – nnnnnn Jul 28 '13 at 07:15

score 0 · Answer 4 · edited May 23 '17 at 11:49

0

Answer is No.Its not redundant.

Reason:

Self-invoking functions runs instantly i.e will be executed as soon as it is encountered in the Javascript.
$(document).ready(function() {})(); will trigger only after dom elements are completely constructed.

so basically,there is no point in enclosing $(document).ready(function() {})(); within a (function(){ ... })();.As the former part will wait for all the dom elements to get ready and the later will start execution immediately.

Note:

Now,in case we are using pure javascript and we want to execute something after dom ready,then just load the script before the ending body tag </body>.

REFER THIS LINK

edited May 23 '17 at 11:49

Community

1
1

answered Jul 28 '13 at 07:09

HIRA THAKUR

17,189
14
56
87

In the OP's example the ready function would need to be enclosed in the IIFE because otherwise it wouldn't be able to access the `app` variable. – nnnnnn Jul 28 '13 at 07:23
my point is the entire code would still be pretty good if he wrote the enire stuff inside the dom.ready or if there is no dom,ready just include the script at the bottom,before end body tag – HIRA THAKUR Jul 28 '13 at 07:26

Self executing Anonymous functions in javascript

4 Answers4