0

Possible Duplicate:
What do empty parentheses () after a function declaration do in javascript?

I understand basically how Javascript works. Now I'm self-learning Javascript design patterns by going through other programmers' works and I come across this

  var $a = (function() {
    var a..... //assigning values & functions to variables 
    return { init : init }; //in the variable above there is "init" 
  })();
  $a.init();

I can tell that $a.init() creates an object that has the properties & functions listed above. But I don't understand how it actually work.

Why is the function written this way(function() { })() ?

Why is return {init: init} necessary when there is already an init function above?

What kind of pattern is this?

Community
  • 1
  • 1
  • The `return` statement builds an object with one property, "init", whose value is (apparently) a reference to a local function called "init". – Pointy Jan 07 '13 at 16:54
  • @Pointy so `return{init:init}` just create an `init` function in $a when $a is called and then `$a.init()` does the rest of the jobs ? –  Jan 07 '13 at 16:56
  • Yes. The `{ property: value, property: value, ... }` notation is called an "object literal" expression, and it creates an object. Thus, the `return` statement returns that constructed object. – Pointy Jan 07 '13 at 16:58
  • @Pointy thanks I get the whole picture now :) –  Jan 07 '13 at 16:58

3 Answers3

2

This is the common module pattern.

This

  var $a = (function() {
     var a..... //assigning values & functions to variables 
     var init = function() {... uses a};
     return { init : init }; //in the variable above there is "init" 
  })();
  $a.init();

is about like doing

var a..... //assigning values & functions to variables 
var $a = { init : function(){... uses a} }; //in the variable above there is "init" 
$a.init();

but with the advantage that a is private (you can't read or write it if there is no function giving access to it) and doesn't encumber the global namespace. For the same reason, the locally declared init function must be declared in the returned object.

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
1
(function() {
})();

Is called a IIFE Immediately Invoked Function Expression. Basically it is a function which is executed immediately without explicitely calling it. The brackets enclosing the function are turning the declaration into an expression, and the empty () at the end are the parameters handed over to the IIFE.

$a is assigned the returnvalue of your IIFE, which is a object with a method called init, which invokes a function inside your IIFE which is also called init.

return { init : init };
                 /\ the name of the method which is called internally
          /\ the name of the method which is returned from the function

It is a common way to modularize your Javascript and create a sort of privacy (which is not too trivial, because javascript per default has no privacy like other languages do).
This way, other parts of the javascript only have access to the properties your declare in your return statement, but not the internal stuff you declare in your IIFE.

Christoph
  • 50,121
  • 21
  • 99
  • 128
0

the extra brackets mean, that this function is immediately invoked. which means everything inside is executed and the return value of that function will be the value of $a.

in your example $a contains now an object { init: init}

if you leave out the extra bracket you would should declare a new function which you could call.

read more about immediately invoked function expressions here

hereandnow78
  • 14,094
  • 8
  • 42
  • 48