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

Asked

Viewed 256 times

8

I’ve been looking at some sample projects in Angularjs and came across several times 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 so, what are the advantages of using the first approach instead of the second?

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

javascript angularjs
  • 2

    Modularization in Javascript

  • This is a self-executing encapsulation. I would reply, but I have no knowledge of Angular to affirm an answer.

  • This function has the property of autoload (funcion(){ ... })(), that is, it self-executes what is inside.

  • Thank you for the @Guilhermelautert link

  • When you encapsulate, it means that the elements inside the module will be self-executed... like get, http, etc...

4 answers

6


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

Wrapping your Angularjs components in an expression in the immediately called function form helps prevent variables and function statements from living longer than expected in the overall scope, which also helps prevent variable collisions.

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

Reference: Angularjs Guidelines

Has a very cool article in Portuguese about these functions: Javascript IIFE

4

The difference between the two codes has to do with the type of variable scope implemented in Javascript. Javascript uses a function scope, instead of the block scope used by languages such as C and Java.

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

Basic example:

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

document.write(variavelLocal);

Note that the code above displays the value 12 only once, the document.write from within the anonymous function. The second document.write throws an exception, if you open your browser console you 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 this case.

4

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

2

This is an IIFE Immediately Invoked Function Expression or Immediately-Invoked Function Expression, it is like an autoexecutable "module" that encapsulates the code avoiding collisions in the global scope.

It also prevents collisions of variables in the global scope if the code is 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 cool good practice tips for Angular 1 and 2 -> John Papa’s Angular style guide

Browser other questions tagged javascript angularjs

You are not signed in. Login or sign up in order to post.