CODEWITHSUNDEEP
javascriptangularjs
Daniel
Daniel

Reputation: 191

Self executing functions with AngularJS

What are the benefits of using self executing functions with a framework, such as, Angular?

I am new to Angular but my understanding thus far is the module-based design gives most of the benefits that the Self executing function gives. What am I missing? Is it just a matter of style?

Here is an example by Ben Nadel. I really like the style but want to understand if there are any gains by writing Angular code this way or if it is mostly a style choice.

Upvotes: 7

Views: 5824

Answers (3)

Anton Lyhin
Anton Lyhin

Reputation: 1945

Daniel, you said: "if it is mostly a style choice". I know at least two examples in javascript when "code style" is not only matter of preference but it causes different result.

Are semicolons optional? Not at all.

$scope.test = function() {
    console.log('Weird behaviour!')
} //; let us comment it

(function() {} ()); //two functions seem to be independent

is equal to

$scope.test = function() {
    console.log('Weird behaviour!')
}(function() {} ()); //but without semicolon they become the one

Another example of "code style" which is not related to self-executing functions:

var x = (function() {
   return  //returns undefined
   {};
}());

alert(x);

/*
that is why, I suppose, while writing javascript code,
we put function brackets in the following "code style":

function() { //at the same line
   return { //at the same line, this style will not lose the object
   };
}
*/

Code style formation is dictated by unexpected results of such kind.

Last but not least. With selfexecuting function: a closure is created on function call and keeps your vars local.

A closure is created on function call. That is why self-executing function is so convenient. As Daniel correctly mentioned it is a good place for keeping an independent code unit, this pattern is called module pattern. So when you move from pure javascript to specific framework or vise versa this independence enables code changes to be more fluid. The best case is just moving your module to an angular wrapper and reusing it.

So it is convenient for the purpose of code transmission from one technology to another. But, as I believe, it does not really make sence for specific framework.

Upvotes: 2

Daniel Schaffer
Daniel Schaffer

Reputation: 57862

Mainly, it ensures that your code is not declared on the global scope, and any variables you declare remained scoped within your function.

In this case, it also has the benefit of declaring the objects required to run the code in one place. You can clearly see at the bottom that the angular and Demo objects are passed in, and nothing else. If the code was not wrapped in the function, you'd have to scan through the code to see what the dependencies were.

Personally, I prefer to use a module loader like RequireJS, which effectively forces you to follow this pattern.

Upvotes: 7

digao_mb
digao_mb

Reputation: 1294

That's kind of a opinion question. The main advantage I see on self executing functions is to not create global variables. I had never seen this pattern with angular.

On the example link you gave, it does not seem to have any advantage. The angular variable will exist anyway on a angular application, so you could use angular directly. And the Demo being a module, you can add controllers to it without without messing with the global scope.

I like a lot of self executing functions. But in this case I really don't see an advantage.

Upvotes: 2

Related Questions