0

I'm watching an Angular JS tutorial that keeps using variations of this code snippet without explaining it.

(function(param, undefined){
  //Normal function definition in here
  ...
}(bar.foo = bar.foo || {}));

So I get most if this. I recognize the following a self-executing function used to encapsulate bits of javascript to avoid scope pollution.

(function(param, undefined){
  //Normal function definition in here
  ...
});

But I don't understand the syntax of having parentheses after a function definition.

Edit

I understand what is going on inside the parentheses. What I don't understand is the syntax of having parentheses after a function definition: function(...){...}(...);

Dan
  • 10,614
  • 5
  • 24
  • 35
  • @Xufox, see my edit. I wasn't clear enough on what part was confusing me. – Dan Sep 02 '15 at 21:49
  • In that case it’s a duplicate of http://stackoverflow.com/questions/8228281. I can’t vote to close a second time, unfortunately. – Sebastian Simon Sep 02 '15 at 21:50
  • 1
    possible duplicate of [What is the (function() { } )() construct in javascript?](http://stackoverflow.com/questions/8228281/what-is-the-function-construct-in-javascript) – allicarn Sep 03 '15 at 12:51

4 Answers4

1

It is a self-executing function that expects parameters. bar.foo is the parameter that is sent to it (will be param in use of the function). If bar.foo does not have a value prior to the execution of the function, it is set to {}, otherwise, it is set to itself, and then it is passed in.

(function(param1, param2, param3) {
  var ele = document.getElementById("result");

  ele.innerHTML += "param1: " + param1;
  ele.innerHTML += "<br />";

  ele.innerHTML += "param2: " + param2;
  ele.innerHTML += "<br />";

  ele.innerHTML += "param3: " + param3;
  ele.innerHTML += "<br />";

  param3 = param3 || "bananas";
  ele.innerHTML += "param3 after change: " + param3;

})("apples", "oranges");
<div id="result"></div>
allicarn
  • 2,859
  • 2
  • 28
  • 47
1

The function is being triggered with (bar.foo = bar.foo || {}) as the argument. If bar.foo exists, then the function will take bar.foo as the argument. If it is undefined (which is falsey), then it will take in {} as the argument. I hope this helps!

Stephan Genyk
  • 177
  • 1
  • 6
1

Placing parentheses after the function declaration initiates a call to it immediately. It's the same as doing this:

var fn = function () { ... };
fn();

Because the return value of a function declaration is the function object, and when you apply parentheses to a function object, you call it. And, as always, the stuff inside those parentheses are the parameters to the function.

Chad
  • 693
  • 5
  • 17
0

If bar.foo is defined, use that -- but if it isnt, use this empty object ({})

Edit - to fit new clarification

Its placement means that before executing the function, it will handle the bar.foo assignment; like setting a default.

Jared
  • 562
  • 1
  • 6
  • 22
  • Oh, I actually mean the syntax of `function(...){...}(...);`. I should clarify that. – Dan Sep 02 '15 at 21:46