Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Foundations Functions Anonymous Functions

Michael Fraser
Michael Fraser
19,084 Points

Bit Confused about the last section of this...

Hi, the last section of this video was describing a code pattern for managing the scope of variables. Why does wrapping the whole lot in parentheses make the code automatically execute? And what is the advantage of the extra parentheses & content at the end (arg1, arg2)? I had a bit of a play and I realise the extra parentheses are required to make the code execute, but whats going on with the extra "args"; are they available to the previous block of code? Thanks in advance...

3 Answers

Andrew Shook
Andrew Shook
31,709 Points

So what you are talking about is called a closure/self executing function. You can read more about it here or here. To answer your first question, the code will execute automatically because that's the way the language was designed. I wish there was a more in depth answer, but just the way JavaScript works. So to answer the rest of your questions I'm going to use a little example. This is a very common use for closure in CMS's like Drupal and Wordpress:

(function($, win){
        // put your jQuery code here and make all variables  you want to be global a property of the win
        // using dot or square bracket notation. I.E. win.variableA or win["variableA"]
})(jQuery, window);

This block of code will allow you to include jQuery into a project in "no conflict". Since other JS libraries also use the dollar sign as an alias(shorthand notation) for functions inside the library, most CMS require that you use jQuery either without the alias or inside of a closure so as to not cause a conflict with other libraries.

The last set of parentheses:

(jQuery, window);

Are used just like the parentheses at the end of any function. They allow you to pass in information for your function to used. They are required because a closure is a function, and since all functions in JavaScript require parentheses as part of their declaration closures need them too. Now the benefit/hinderance of passing things into a closure is that the scope inside a closure is not the global scope. In JavaScript, scope determines not what is allowed to use a variable/function, but also how long that variable/function is stored in memory. So any variable/function you create inside another function will only exist as long as that function is being used.

Now with the jQuery example above, this temporary variable/function existence is helpful because you are telling JavaScript that inside this closure the dollar sign means jQuery and win means the window object. That is what the first line of the example code tells Javascript. After the closure execute though, JavaScript forgets that what the dollar sign meant inside the closure so you can use it as an alias for something else.

As I said earlier, the temporary existence of variables/functions inside a closure can also be a hinderance, because you lose everything inside the closure once it's done executing. This mean you can not reuse a function declared inside a closure outside it. If you want to reuse a function then you need to add it to the window object, because all JavaScript global variables and functions stored as properties or methods of the window object.

I hope this helped a little bit. If you need more clarification just let me know on this thread and I'll try to clear things up for you.

Andrew McCormick
Andrew McCormick
17,730 Points

My advice is don't over-think it. It's just how Javascript syntax works. Wrapping the function in parentheses do not auto execute the code, it's the parentheses afterwards that tell it to execute the code (though both are required to make it work). You can pass an object by reference into the function call using those closing parentheses.

Modify arguments in self executing function

Self-Executing Anonymous Functions
Immediately-Invoked Function Expression (IIFE)

Michael Fraser
Michael Fraser
19,084 Points

Thanks guys. Makes more sense now. My advice is don't over-think it - thats usually the answer to of most of my problems...