immediately invoked function expression

Index

1. Introduction
2. IIFE(immediately invoked function)
3. Variable assignment
4. Scope
5. Library conflicts
6. Performance

Introduction

The IIFE or immediately-invoked function expression, is one of the ways to declare a javascript function, to understand better how a variable can receive a value of a IIFE before we need understand some concepts.

The first one is how IIFE works, which will be our function that returns a value. After that we’ve understand how Variable assignment works, that is the way to assign a function to our variable, and lastly we can join both concepts and create our immediately-invoked function that will return a value to our variable.

IIFE(immediately invoked function)

The function in javascript most basically syntax as: function functionName(){}, need obligatory be called for the block of code inside her be executed. An alternative to this is a IIFE, that create the function and already execute in sequence.

Copy 
1(function (){
2  /* code */
3})();

Some ways to create a IIFE:

Copy 
1(function(){ /* code */ }());
2(function(){ /* code */ })();
3new function(){ /* code */ }();
4var fn = function(){ /* code */ }();

Variable assignment

Is the way to create a function returning a value to a variable, in this way unless that function be a IIFE, we yet need execute the function for the variable receive the value returned for her.

Copy 
1// Anonymous function assigned to a variable
2
3var sum = function( num1, num2 ){
4  return num1 + num2;
5};
6
7var operation = function addition( num1, num2 ){
8  return num1 + num2;
9};
10
11sum( 5, 5 ); // 10
12addition( 10, 10 ); // addition is not defined

cool, but for what i should learn this?

Scope

The variables have as scope the function where they her created, and how we don’t want to pollute the global scope, the variables created inside our IIFE just exist inside her.

Copy 
1(function(){
2  var element = document.getElementById('element');
3  console.log( element );  // < div id="element">...</ div>
4})();
5
6console.log( element );  // element is not defined

Library conflicts

With most libraries using the $ is common have conflicts, however have other alternatives as the noContlict() in IIFE, you can pass the reference to the jQuery, or other libraries as the parameter.

Copy 
1(function( $j ){
2  function doSomething() { /* code */ }
3  $j('.element').click( doSomething );
4})( jQuery );

Performance

If you use many global variables in your code, a good tip to of performance is pass those variables as parameter, in this way the interpreter don’t need go out to scope of the function ever time to search the value of that global variable.

Copy 
1(function( doc ){
2    var btn = doc.getElementById('btn')
3      , element = doc.getElementById('element');
4
5    btn.addEventListener('click', function(){
6      element.style.display = 'none';
7    }, false);
8})( document );

With a join of both concepts, the variable assignment and the IIFE we can create something as:

Copy 
1var operation = (function(){
2  return {
3    sum: function( num1, num2 ) {
4      return num1 + num2;
5    },
6
7    subtraction: function( num1, num2 ) {
8      return num1 - num2;
9    }
10  }
11})();

In this example above we’ve an anonymous immediately invoked function assigned to the variable operation, in this IIFE we return an object with two functions assigned to the keys of object.

How we are returning the object we can access this functions with operation.sum(5,5) for example. It’s like if we stay exporting this functions that in the first place, they were private inside the IIFE to be accessed through the variable operation.

So we can choose what we want to stay private and what we want to be accessible. For make more organised we can create separated functions and return the object just with the name of the desires function.

Copy 
1var operation = (function(){
2
3  // private function of IIFE
4  function sum( num1, num2 ) {
5    return num1 + num2;
6  }
7
8  // private function of IIFE
9  function subtraction( num1, num2 ) {
10    return num1 - num2;
11  }
12
13  return {
14    sum, // returning the sum function to operation variable
15  }
16
17})();
18
19operation.sum(5,5) // 10
20operation.subtraction(5,5) // operation.subtraction is not a function

Do you want know more about IIFE?

• IIFE - benalman
• Sobre funções imediatas JavaScript
• Every Possible Way to Define a Javascript Function