What is the difference between creating a module normally and creating a module within a function?

Question

What is the difference between creating a module normally and creating a module within a function?

Navigation

#1 by (5 votes)
#2 by (4 votes)
#3 by (3 votes)
#4 by (1 votes)

7

I've been looking at some sample projects in AngularJS and have come across several times with the following code:

(function () {
    angular.module('meuModulo', [
        'alguma.dependencia',
        'outra.dependencia'  
    ]);
})();

This same code, in the pattern I'm used to, would be:

angular.module('meuModulo', [
    'alguma.dependencia',
        'outra.dependencia'  
    ]);

That is, the code was placed inside a function .

Is there a difference between the first and second examples? If yes, what are the advantages of using the first approach instead of the second one?

The above code is just an example of a module creation in AngularJS.

javascript angularjs

asked by anonymous 30.03.2016 / 15:46

4 answers

4

The first format isolates the declared variables function in global scope. Thus, all variables declared within the function are restricted to the scope of the function, not influencing the global scope.

30.03.2016 / 16:05

3

The difference between the two codes has to do with the type of variable scope implemented in JavaScript. JavaScript uses a function scope , rather than block scope used by languages like C and Java .

Encapsulating the creation of modules within an anonymous function causes all variables created within the function to be accessible outside the function.

Basic example:

(function() {
    var variavelLocal = 12;
    document.write(variavelLocal);
})();

document.write(variavelLocal);

Note that the above code displays the value 12 only once, the document.write of within the anonymous function. The second document.write throws an exception, if you open the console of your browser will see the error:

stacksnippets.net/js:18 Uncaught ReferenceError: variavelLocal is not defined

As for your specific example, it makes no difference, since no variable is created, so the scope does not matter in that case.

30.03.2016 / 16:03

1

This is an Immediately Invoked Function Expression IIFE or Immediately-Invoked Function Expression, it is as if it were a self-executing "module" that encapsulates the code avoiding collisions in the global scope.

It also avoids collisions of variables in the global scope if the code is to be minified in a single file.

This is a widespread practice in the angular community by John Papa's famous Style Guide. I recommend you take a look because there are many good legal tips for good practices for Angular 1 and 2 - > John Papa's Angular style guide

30.03.2016 / 16:20

What is the function of the array? Why does NetBeans warn you that you should not access global variables directly?

score 5 · Accepted Answer

Section 1 contains an Immediately-Invoked Function or Immediately-Invoked Function Expression (IIFE) function.

Involving your AngularJS components into an expression in the form of the immediately called function helps prevent function variables and function declarations from living longer than expected in the global scope, which also helps prevent variable collisions.

This becomes even more important when the code is reduced and packaged into a single file for deployment on a production server, providing the scope of variables for each file.

Reference: AngularJS Guidelines

There is a very nice article in Portuguese about these functions: JavaScript IIFE