1

The code below is supposed to declare a new module:

(function() {
   'use strict';

    angular.module('app.avengers', []);
})();

Due to my unfamiliarity with javascript, I am struggling to understand why the multiple parenthesis.

I realize this might be a silly question, but just seeking to understand why it was written this way instead of just:

    angular.module('app.avengers', []);
shaun
  • 1,017
  • 11
  • 22
mtanzania
  • 125
  • 2
  • 12

4 Answers4

2

The syntax you are getting confused with is an anonymous function.

The reason for the anonymous function ((function() {...})();) is to restrict the scope of 'use strict' to the function. If you had that code outside of the function, it would apply to the global scope, which isn't desired.

More information on strict mode here: http://www.w3schools.com/js/js_strict.asp

brettwhiteman
  • 4,210
  • 2
  • 29
  • 38
2

This function is declared in an alternative JavaScript Design Pattern called "Immediately Invoked Function Expression", or more commonly, IIFE.

Immediately-invoked function expressions can be used to avoid variable hoisting from within blocks, protect against polluting the global environment and simultaneously allow public access to methods while retaining privacy for variables defined within the function.

This isn't necessary for Angular apps, but it is a common practice used by many JavaScript developers.

The first set of Parenthesis enclose the entire function block as an anonymous function. The second, empty parenthesis serve to invoke the anonymous function, hence the common confusion that it is "self executing". In essence, the anonymous function performs the task of defining the inner function, then the invocation ensures the definition is actually processed.

As others have stated, the main reasons to define a function in this manner is to isolate the code, and to ensure that 'use strict'; is only applied to the function, not the global scope. Though, in this limited example, the pragma 'use strict;' is serving a very limited purpose.

Claies
  • 22,124
  • 4
  • 53
  • 77
1

That's what's called a immediately invoked function expression in javascript, and it's not related to angular JS.

The first set of parens gives you an enclosed lexical scope, and returns the function object defined within, and the second set of parens executes the function.

So simply:

  1. define
  2. execute
Zachary Yates
  • 12,966
  • 7
  • 55
  • 87
0
(function() {
  ...
}}();

is a "self-executing anonymous function" (EDIT: or more correctly, "immediately invoked function expression"). It defines a function: function() { ... }, then executes it with no arguments (()). It is functionally equivalent to the following, which may be easier to follow:

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

This serves to isolate the code in the function in a local environment, making any variables in it invisible to the outside world.

In this case, it serves to isolate the pragma directive use strict.

Amadan
  • 191,408
  • 23
  • 240
  • 301
  • "self-executing anonymous function" --- is technically incorrect term, since it does not self execute itself. – zerkms Apr 22 '15 at 01:20
  • @zerkms: Fair enough. IIFE is more correct, but in fact less common, I believe. And if you google for it, you will find that your "it's not called that" is patently false. – Amadan Apr 22 '15 at 01:21
  • "but in fact less common" --- sure, let's spread rubbish even further then. – zerkms Apr 22 '15 at 01:22