Self Executing Anonymous Functions within Javascript

Question

I have been trying to understand anonymous functions. I have come to realise that adding extra parentheses at the end helps the anonymous functions execute. However, I have also come across code that seems to execute the anonymous function without the extra parentheses, and to my surprise I couldn't find the use of the jquery ready method either. It goes something like :-

$(function() {

    $('#login_form #username').validator({
        format: 'alphanumeric',
        invalidEmpty: true,
        correct: function() {
            $('#login_form #username').text('Thanks');
        },
        error: function() {
            $('#login_form #username').text('Plese fill username field');
        }
    });

});

The above file is simply included in an html file containing a form. I can't seem to understand how the above code is being executed automatically. Can somebody help shed some light on this ? Also, what difference would the extra parentheses make, such as :-

$(function() {

    $('#login_form #username').validator({
        format: 'alphanumeric',
        invalidEmpty: true,
        correct: function() {
            $('#login_form #username').text('Thanks');
        },
        error: function() {
            $('#login_form #username').text('Plese fill username field');
        }
    });

})();

The code in this question is not related in any way to the jQuery Validate plugin and the question is not about form validation. Removed the jquery-validate tag. Thanks. — Sparky
– Sparky, Commented Sep 27, 2014 at 14:55

jfriend00 · Accepted Answer · 2014-09-27 06:29:33Z

2

$ is a function in jQuery. So, $() is a function call. And:

$(function() { /* code here */});

is a function call that you are passing an anonymous function to. That $ function will then call that anonymous function at some time in the future. In jQuery's case, it will call that function when the DOM is done loading and ready for manipulation. It's a shortcut syntax that I don't use primarly because it confuses people that aren't familiar with jQuery, but others like it for its brevity. It is shorthand for this:

$(document).ready(function() { /* code here */});

which I personally find a little more self-descriptive.

These are NOT self-executing anonymous functions. Those are a different construction for a different purpose. This is just a plain function call just like ready() would be, with the one addition of passing it a function.

The extra parens on your second construction are not needed and don't add anything in this particular case.

edited Sep 27, 2014 at 6:29

answered Sep 27, 2014 at 6:23

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jfriend00 Over a year ago

@Grateful - Those extra parens in this particular instance don't add anything and are not useful or needed. There are other circumstances where they are meaningful, but not in this case because the function has already been executed.

Salvador Dali · Accepted Answer · 2014-09-27 06:27:29Z

0

You are just calling a function with a specific name. The name of the function is $. If you will do something $() in the debugger you will see that it will execute it. You can pass a parameter to this function.

In your case your parameter is a function. But you can do something like this: $(console.log(1))

answered Sep 27, 2014 at 6:27

Salvador Dali

224k151 gold badges726 silver badges766 bronze badges

Collectives™ on Stack Overflow

Self Executing Anonymous Functions within Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related