0

Question:

Why is the function wrapped in a parenthesis? I have taken this code out of parenthesis and it works with no trouble.

What is the benefit of having the code in a (function() { ...Code Here...})(); like it is in the following example?

Code:

(function() {
    "use strict";
    // Doesn't work because strict mode 
    // enforces the fact that the second example shouldn't work
    if (true) {
        function fn1() {
            // This won't run
            console.log("doesn't work -- have a great Die Hard Day XIII");
        };
        fn1();
    }
})();

Code Here: What would sending the JQuery word as a parameter do for this namespace. I know that the reason that the function is enclosed in (...) is to create a namespace. I guess a better question would be as to why one would pass in a variable, but I would imagine that would be in case another namespace needed the variable. 

( function( $ ) {
    // Init Skrollr
    var s = skrollr.init({
        render: function(data) {
            //Debugging - Log the current scroll position.
            //console.log(data.curTop);
        }
    });
} )( jQuery );
Cœur
  • 37,241
  • 25
  • 195
  • 267
Doug Hauf
  • 3,025
  • 8
  • 46
  • 70
  • 4
    This is called an [IIFE](http://benalman.com/news/2010/11/immediately-invoked-function-expression/) ("iffy") – Oliboy50 Jul 02 '14 at 01:53
  • 1
    I like this question. Even though the other is similar had has good answers I think that this question was as useful for my development of this type of program. I have been wondering this myself. If I am not mistaken it creates a namespace that all other variables can be placed in without another name space using the same variable name and then over writing a variable if there is a chance that two variables my share the same name. A good example would be index or counter or i or j that are used in for-loops. – user3491862 Jul 02 '14 at 13:12

2 Answers2

7

I have taken this code out of parenthesis and it works with no trouble.

That’s not correct; it can’t run (or even be parsed) by itself. JavaScript sees function in a place where a function declaration can be and assumes it’s a function declaration. Parentheses are used to force the context to be an expression. The practice is redundant if it’s unambiguously a function literal – say, in a variable declaration – but many find it more readable. There’s a jsHint option to enforce it, for example.

Ry-
  • 218,210
  • 55
  • 464
  • 476
  • 2
    For example, see http://jsfiddle.net/Gbnq3/ and open your JS console, and notice the syntax error. – Phrogz Jul 02 '14 at 01:55
  • 2
    Ben Alman has a good writeup on it here: [Immediately-Invoked Function Expression (IIFE)](http://benalman.com/news/2010/11/immediately-invoked-function-expression/) – dc5 Jul 02 '14 at 02:00
  • I believe that the OP is referring to taking the entire function body out of the `(function () { ... })();` construct, which would make more sense. – Qantas 94 Heavy Jul 02 '14 at 02:39
  • Oh. In that case, @DougHauf: it scopes the `'use strict';` to just that function, which is useful sometimes when you’re not sure that it won’t be poorly combined with other code in a way that either removes strict mode or breaks non-strict-compliant other code. – Ry- Jul 02 '14 at 02:57
1

Because then they are calling it:

(function() { ... })();
                    ^^
Jonathon Reinhart
  • 132,704
  • 33
  • 254
  • 328