How does a (function (){})(); work?(Javascript structure)

Question

I'm using an example project and, while playing around with it and going into the JavaScript code, I found this function:

(function ()
{
 ...
 ...
 a lot of code
 ...
 ...
 ...
        scrollToPage : function (page, time) {

        time = time || 0;
        if (page < 0)
            page = 0;
        else if (page > this.pages.length - 1)
            page = this.pages.length - 1;

        this.changeTarget(this.pages[page]);

        this.scrollTo(-page * this.pageWidth, this.y, time);
    }
...
...
})();

I would like to know how this works. To get an idea of why I would want to use this, it's because I want to use the scrollToPage function outside of this function to navigate on button click. The only experience I have in JavaScript is in Unity3D which is very different than any of web scripting I'm trying out now.

So like this:

(function ()
{
 ...
 ...
 a lot of code
 ...
 ...
 ...
        scrollToPage : function (page, time) {

        time = time || 0;
        if (page < 0)
            page = 0;
        else if (page > this.pages.length - 1)
            page = this.pages.length - 1;

        this.changeTarget(this.pages[page]);

        this.scrollTo(-page * this.pageWidth, this.y, time);
    }
...
...
})();

function myButtonFunction()
{
    scrollToPage(1);
}

check this link http://stackoverflow.com/questions/2421911/what-is-the-purpose-of-wrapping-whole-javascript-files-in-anonymous-functions-li — Akhil Xavier, Apr 14 '14 at 11:02
Visit < http://stackoverflow.com/questions/2421911/what-is-the-purpose-of-wrapping-whole-javascript-files-in-anonymous-functions-li>? — Akhil Xavier, Apr 14 '14 at 11:16

Nick Louloudakis · Accepted Answer · 2014-04-14T14:23:48.960

The way it is written, you define an anonymous function (notice that there is no name in it) and you are invoking it right away. This is used in cases when you need to write chunks of code in functions and invoke it right away.

UPDATE: In your example, the code inside the (function(){})(); will probably be executed when the site starts (you need to see the place that this chunk of code is placed inside the website). In fact, it kind of "assigns" a function to an object's member variable (I suppose this code is the part of an object declaration in the part of the code you don't show, for example var o = {....}) - think of it like setting the function to a new object's member variable in order to use it to invoke that "inner" function. Later, in my button function, this variable can be used to invoke that "inner" function (which has a private scope inside the outter function). This is used to assign function callbacks for the button use later inside your site.

So on start of the website it directly runs? And how do the inner functions work can you acces them outside? — Shishi, Apr 14 '14 at 10:59
Answer updated. Please do not forget to vote the answer if found useful. — Nick Louloudakis, Apr 14 '14 at 11:07

score 0 · Answer 2 · answered Apr 14 '14 at 11:07

0

Now you can call outerFunction(), but the visiblity of innerFunction() is limited to the scope of outerFunction(), meaning it is private to outerFunction(). It basically follows the same principle as variables in Javascript

answered Apr 14 '14 at 11:07

Akhil Xavier

1,095
10
18

But why is it written like this : `scrollToPage : function (page, time)` instead of `function myButtonFunction()` what is the difference? – Shishi Apr 14 '14 at 11:11
both are same.. You can define a function with a name in a function expression: – Akhil Xavier Apr 14 '14 at 11:22

How does a (function (){})(); work?(Javascript structure)

2 Answers2