Javascript event-syntax question

Question

$(document).ready(function(){
    console.log('a');
});

window.fbAsyncInit = function() {
    FB.init({appId: '{/literal}{$fbAppId}{literal}',
            status: true,
            cookie: true,
            xfbml: true});

    FB.Event.subscribe('edge.create', function(response) {
        // Do something, e.g. track the click on the "Like" button here
        if(!liked)
        {
            {/literal}$.get('http://{$rooturl}/promotions/likecheck.php?CID={$CID}&ctype={$campaignTable}');{literal}
            liked=true;
        }
    });
};
(function() {
    console.log('b');
    var e = document.createElement('script');
    e.type = 'text/javascript';
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
}());

I'm noticing that when I run this javascript in my console i get the output:

b
a

I'm wondering what does it mean to wrap a function in parenthesis in javascript such as here:

    (function() {
    console.log('b');
    var e = document.createElement('script');
    e.type = 'text/javascript';
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
}());

Is the intention of doing this to make this function the first executed in a script tag?

Peter · Accepted Answer · 2011-05-26 14:40:09Z

1

This is sometimes termed as a "self-invoking function", though that terminology may be misleading. As stated, it is a way to create an anonymous function, not save the reference anywhere and then invoke it immediately.

The function will never be executed again. You might question the usefulness of this, but it's actually a good practice to indicate this is the actual program code, separate from function or other object definitions.

However, you still have to use the var keyword to ensure you don't pollute the global namespace.

An Example:

var outside = "Hello Outside";
(function()
{
  alert(outside); // Works as expected.

  // Define some variable and see what happens.
  globalVar = "Hello World, redux";
  var localVar = "Hello World";
}());

alert(globalVar);
alert(localVar); // Get an error: "localVar is not defined"

answered May 26, 2011 at 14:40

Peter

6,3821 gold badge34 silver badges30 bronze badges

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

Comments

Pointy · Accepted Answer · 2011-05-26 14:09:14Z

1

The purpose of doing that is merely to create a private lexical scope so that variables declared for use by that stretch of code don't pollute the global namespace. It does not force the code to be executed "first".

So for example, that variable "e" will be gone after the function executes, and there'll be no "e" floating around to bother any other code.

answered May 26, 2011 at 14:09

Pointy

415k62 gold badges600 silver badges632 bronze badges

Comments

Alnitak · Accepted Answer · 2011-05-26 14:10:23Z

1

This is a way of creating a function (with its own closure, and variables) and invoking it immediately, but without polluting the global namespace.

answered May 26, 2011 at 14:10

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Collectives™ on Stack Overflow

Javascript event-syntax question

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related