Get #Amazon #Prime for this #holiday #amazonprime #christmas #2019

#JavaScript - Immediately Invoked Function Expression

Immediately Invoked Function Expression


MDN Immediately Invoked Function Expression

Immediately Invoked Function Expression or self-executing anonymous function is a function that executes immediately after it is interpreted.

Use cases:

1)

var a = 5;

(function() {
  var a = 3;
  console.log(a) 
})();
// 3

The variables defined in this expression remains in its own local scope and thus doesn't modify or be affected by the global scope variables.

2)

(function() {
  var localVar = 3;
})();

localVar // Reference error

You will get a reference error if you try to access a variable defined within a immediately invoked function expression.

3)
It can be used to create private variables or private methods for encapsulation and data hiding.

let counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    get: function() {
      return privateCounter;
    },
    decrement: function() {
      changeBy(-1);
    }
    increment: function() {
      changeBy(1);  
    }
  };
})();

counter.get() // 0
counter.decrement() // -1
counter.increment() // 0
counter.increment() // 1
privateCounter = 5 // create a global scope variable called privateCounter
counter.get() // count is still 1

4)
Associate an item in a loop with its respective item instead of the last item as the value is only assigned the function within the loop is called instead of when the loop is run.
<p id="help">Description will appear here</p>
<p>E-mail: <input type="text" id="email" name="email"></p>
<p>Name: <input type="text" id="name" name="name"></p>
<p>Age: <input type="text" id="age" name="age"></p>
<p>Username: <input type="text" id="username" name="username"></p>


function showHelp(help) {
  document.getElementById('help').innerHTML = help;
}

function setupHelp() {
  var helpText = [
      {'id': 'email', 'help': 'Your email address'},
      {'id': 'name', 'help': 'Your first name'},
      {'id': 'age', 'help': 'Your age (you must be over 16)'},
      {'id': 'username', 'help': 'Pick a unique username'}
    ];

  for (var i = 0; i < helpText.length; i++) {
    var item = helpText[i];
    document.getElementById(item.id).onfocus = function() {
      showHelp(item.help);
    }
  }
}

setupHelp();
source: MDN Closure

The description p tag will always show 'Pick a unique username' no matter which input you select because when you set the input on focus, the loop had already finished executing and thus, i counter in the loop would be 3 and points to {'id': 'username', 'help': 'Pick a unique username'}.

One way to fix it is to use Immediately Invoked Function Expression.
for (var i = 0; i < helpText.length; i++) {
    (function() {
       var item = helpText[i];
       document.getElementById(item.id).onfocus = function() {
         showHelp(item.help);
       }
    })();
// Immediate event listener attachment with the current i of item when the loop is iterated. 


References:
1) why-using-self-executing-function StackOverflow thread
2) What is the (function() { } )() construct in JavaScript?

Thank you for reading!

Jun