Trying to understand the difference of objects in javascript

Question

In the code examples below, I understand how alternative 1 and 2 work, but Im trying to understand the third alternative. What kind of object is this and why does it start with a bracket before the function like this: (function and Why does it end with a double bracket like this: (). Just curious and would like to know what is what and the difference?

Alternative 1: (Object Literals)

var something = {
 rows: 12;
 cols: 6;
  };

Alternative 2: (Function Objects)

var something = function(x,y) {
    return x + y;
}

Alternative 3: ??

var something = (function() {
    var settings = {
    rows : 10,
    cols : 3,
    number : 2
    };
    })();

See http://benalman.com/news/2010/11/immediately-invoked-function-expression/ and http://stackoverflow.com/q/1639180/218196. FYI, all these code examples do different things, so I'm not quite sure what exactly you want to compare here. — Felix Kling, Apr 10 '14 at 21:42
A function is an object, yes? So if you have an object `obj`, adding parentheses merely specifies order of operations. `(obj)` is just a way of referencing `obj`. `(obj)()` calls the `obj` object (if it's a function). And function declarations are expressions, so they can be put into parentheses, with the value of the expression being the function itself. Putting it all together: `(function() { })()` creates a function and then calls it. — Cameron, Apr 10 '14 at 21:44
The parentheses around the function in the last example are not necessary. *Sometimes* they are, but not here. — Pointy, Apr 10 '14 at 21:44
The third example is often used to control the scope, capture variables in a closure and avoid polluting the global namespace. — Tom Leese, Apr 10 '14 at 21:49

attila · Accepted Answer · 2014-04-10T21:55:01.877

1

Alternative 3 sets your "something" variable to the return of the function. () actually executes the function.

I will use something from MDN to show the benefits with closures: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

var Counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  };   
})();

alert(Counter.value()); /* Alerts 0 */
Counter.increment();
Counter.increment();
alert(Counter.value()); /* Alerts 2 */
Counter.decrement();
alert(Counter.value()); /* Alerts 1 */

edited Apr 10 '14 at 21:55

answered Apr 10 '14 at 21:45

attila

2,219
1
11
15

OK, then I guess there shall be a return statement also that return some value!? – 3D-kreativ Apr 10 '14 at 21:47
I added some more helpful explanation of using the 3rd alternative. – attila Apr 10 '14 at 21:56

score 0 · Answer 2 · answered Apr 10 '14 at 21:54

In your code, alternative 3 will leave undefined in something variable, reason being your function is not returning any value.

A very good link already posted above by @Felix. This is basically an IIFE which is invoked immediately and return value of that function would be assigned to something variable.

One of the key goal in such pattern typically is to hide some state in a closure. Any variables defined in the function would make the state. These variables would be accessible to the functions in the returned object but not to the outside world.

Trying to understand the difference of objects in javascript

2 Answers2