Is there any difference in this JavaScript code?

Question

I have seen various code which is implemented in following two way. I always use the second one (2.). I wanted to know two thing here.

Is there any difference between these two codes?
Which one is the best practice (and why) if any?

1.

(function () {
    //some code here, angular code
})();

2.

 (function () {
     //some code here, angular code
 });

Please also suggest me some good blog or book in this regards as I wants to learn in more detail. Thank you all advance..

score 9 · Accepted Answer · edited Feb 08 '17 at 07:51

Yes, you are not executing the second one.

In the first example, you are declaring an anonymous function, which gets run afterwards with no parameters.

In the second example, you are just declaring it, but not running it.

() is what makes it run, in this case by passing it no parameters.

This one executes the anonymous function:

    (function () {
        //some code here, angular code
    })();

This one doesn't execute it:

    (function () {
        //some code here, angular code
    });

For example, if you have a parameter, you can pass it like so:

    (function (c) {
        // c.log() is same as console.log
        c.log("hello");
    })(console);

Note: I've added the parameter example because it's less obvious without any parameter.

Edit:

As @Osman has just pointed in the comments, the first one is known as IIFE.

This pattern is so common, a few years ago the community agreed on a term for it: IIFE, which stands for Immediately Invoked Function Expression.

score 3 · Answer 2 · answered Feb 07 '17 at 17:18

3

The second is declaration, the first is declaration and execution.

answered Feb 07 '17 at 17:18

shukshin.ivan

11,075
4
53
69

Fayaz · Answer 3 · 2018-08-28T20:59:18.470

Difference:

The first one executes the anonymous function expression:

    (function () {
        //some code here, angular code
    })();

The second one doesn't execute it:

    (function () {
        //some code here, angular code
    });

anonymous function is a function that doesn't have a name.

Background:

Basically, first we are wrapping the anonymous function declaration with first brackets, like: (), to make it a function expression:

    // this is a function declaration:
    function () {
        //some code here
    }

    // this is a function expression
    (function () {
        //some code here
    });

By itself it does nothing, as we are neither executing it, nor declaring it within the current scope. In other words, it's useless. Learn more about the difference between function declaration & function expression.

Now, we can use the function expression as a parameter to some other function, like jQuery does:

    // now jQuery is taking the function expression as parameter
    $(function () {
        //some code here
    });

Or, we can execute the function itself by using () at the end (This is how we invoke any function actually - in this case without any parameter):

    // Now the function expression gets executed.
    (function () {
        //some code here, angular code
    })();

This is also known as Immediately-Invoked Function Expression or IIFE.

The above examples don't have any parameter. However, if you have a parameter, you can pass it like so while executing:

    (function (c) {
        // Here c.log() is same as console.log()
        c.log("hello");
    })(console);

Note: I've added the parameter example because it may be less obvious without any parameter.

Best Practice:

Since functionally they are different, the question of best practice doesn't appear. Usually we use IIFE in cases where we want to execute something in a scope different from the current scope & we don't want to leave any footprint of function declaration, variable declaration etc. within the current scope.

Is there any difference in this JavaScript code?

4 Answers4

Difference:

Background:

Best Practice:

Further Reading: