JavaScript - Clousures and Immediate functions

Sons of JavaScript Collection | this article

JavaScript always has something cool to it. Besides callbacks and anonymous functions you may find yourself in the need for clousures.

Clousures can adopt the form of an Immediately Invoked Function Expression (IIFE):

(function (parameter1, parameter2) {
  //your code here
}) (a, b) 

Or a simple function:

var closureFn = function(parameter1, parameter2) {
  //your code here
}
... 
var a, b;
closureFn(a, b);
...

An interesting characteristic of clousures is that they carry the scope at the time of their invocation along with them. In the following example safe_i is stored along with the calls so its value is not 5 for all iterations.

As a former C# Developer I found it quite interesting.

Buggy

function buggy() {
  for ( var i = 0; i < 5; i++ ) {
    console.log("Delay: ", i*100);
    setTimeout(function() {
        console.log("i:", i)
    }, i * 100 );
  }
}

Fixed

function fixed() {
  for ( var i = 0; i < 5; i++ ) {
    console.log("Delay: ", i*100);
    (function(safe_i) {
      setTimeout(function() {
        console.log("i:", safe_i)
      }, i * 100 );
    }) (i);
  }
}

You can run the code following the link below. In order to see the console messages you need to toggle the console for your browser Developer Tools.

Demo code: Link

Sons of JavaScript Collection | this article