Self executing Anonymous functions in javascript [closed]

Question

Closed. This question needs debugging details. It is not currently accepting answers.

---

Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.

Closed 1 year ago.

Improve this 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();
});
})();

• Ian: 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
• asifrc: 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.

Answer 1

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

Answer 2

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();
});

• nnnnnn: +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.

Answer 3

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();
});

• nnnnnn: "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: 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.

Answer 4

Answer is No.Its not redundant.

Reason:

1. Self-invoking functions runs instantly i.e will be executed as soon as it is encountered in the Javascript.
2. $(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

• nnnnnn: 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.
• HIRA THAKUR: 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