Why wrap your angular controller code with anonymous function?

Question

I've been seeing a number of people wrapping their controllers with:

function(){
   //CODE
}();

What's the benefit / goal there?

Answer 1

That isn't really anything related directly to Angular, it is a JS pattern know as an Immediately Invoked Function Expression.

It is one of the most useful patterns in JavaScript, primarily because of:

Code Encapsulation

Since functions have closures in JS, we can use this pattern to create private data very easily:

var index = (function iife() {
  var counter = 0; // <-- this is private, only available inside the closure of inner()
  return function inner() {
    return counter++;
  };
})();

console.log(index()); // 0
console.log(index()); // 1
console.log(index()); // 2
console.log(index.counter) // undefined

---

We can also pass arguments into an IIFE, which allows us to control how we access the outside context of our IIFE. For example, to make sure $ is actually the jQuery object within your code:

(function ($) {
    // here have access to the global jQuery as $ regardless of what window.$ is and 
    // how many libraries are trying to use $
})(jQuery);

---

By combining the two ideas above, IIFEs can also be used to implement the module pattern, which is the basis for how RequireJS and NodeJS separate code:

var myModule = (function iife(initData) {
  // we can use initData here to initialize our module if necessary
  
  var module = {};

  // private vars ...
  var privateVar1, privateVar2;

  // private methods ...
  function privateMethod() {
    console.log('yeeey');
  }

  module.somePublicProperty = 1;
  module.somePublicMethod = function() {
    privateMethod();
  };

  return module;
})(/* pass initialization data */);

myModule.somePublicMethod(); // 'yeeey'

Answer 2

The reason you'll find a lot of JavaScript code wrapped in an anonymous function is to isolate it from other code on the page.

The following code will declare a variable called name on a global scope:

var name = "Hello World";

By using that code, any other script on the page attempting to use a variable called name could potentially get an unexpected value of "Hello World" because your script declared it as "Hello World".

By wrapping that code in an anonymous function, you keep the code from conflicting with other variables called name:

(function() {
    var name = "Hello World";
})();

In the example above, name is now only available inside of the scope of the anonymous function. It is not global, and therefore cannot conflict with other code on the page.

By wrapping your Angular module in an anonymous function, you prevent your code from conflicting with other code.

Additionally, other people who may use your code won't have to worry about it changing their global scope.