Back our Angular 4 Book on Kickstarter.

Why use a self executing function with AngularJS?

I was recently reviewing some code for a client, and I noticed that a lot of JavaScript code was wrapped in a self executing function. Why would you do that? This is my take.

What is a Javascript self executing function?

A self executing function is a function that is immediately invoked when the application launches. Formally, it should be called an Immediately-Invoked Function Expression (IIFE). The function doesn't execute itself; but rather the browser does during page rendering.

This is a generic self executing function:


(function () {
console.log('function executed');
})();

An anonymous function is wrapped in parenthesis, and then '()' is put at the end. When the page initializes, the browser will execute this function once.

Why use an IIFE?

The main purpose of a IIFE is for code encapsulation. Variables you create inside the IIFE are not exposed as global JavaScript variables, and therefore cannot be affected inadvertently by other code that runs in your page. Primarily, I consider the approach scope control.

When dealing with large applications, or multiple developers, using an IIFE helps prevent namespace conflicts. Two people using the same variable name for different things will cause odd results for your application.

Using a self executing function with AngularJS

This is how you might use an IIFE with AngularJS:


(function (angular) {
angular.module('testApp', []);
})(angular);

You'll notice that the angular framework is passed into the function as an argument. Inside the function, an Angular module is created. You could also create controllers, services, filters, or other Angular elements inside this function, something like this:


(function (angular) {
angular.module('testApp', []);
angular.module('testApp')controller('testController', ['$scope',function ($scope) {);
})(angular);

Or you could split them up into multiple, independent IIFE:


(function (angular) {
angular.module('testApp', []);
})(angular);
(function (angular) {
angular.module('testApp')controller('testController', ['$scope',function ($scope) {);
})(angular);

Anything JavaScript related can be put inside these self executing functions, so these would work for other frameworks, or any code.

Why use an IIFE with AngularJS?

Now that I showed you how to use an IIFE with AngularJS, the question is why? It is, primarily, a matter of personal preference. I see no direct benefit to using these with AngularJS. Your angular code is already going to be encapsulated in functions including controllers, services, directives, and the sort. So, the bulk of your JavaScript is already encapsulated, and protected from mistaken naming conflicts or unprotected change.

As best I Can see; it comes down to a matter of personal preference.

Here are some good reading on the topic

Sign up for DotComIt's Monthly Technical Newsletter

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.