JavaScript immediately invoking function

JavaScript immediately invoked function

how immediately invoked function constructed?

We already aware of two kind of function declaration function statement and function expression.

function statement function display(name){ return('hello '+name); } console.log(display('world'));
hello world
As you can see it's a function statement; the function already got it's own context on top of global context. We are calling that function using it's name and parenthesis '()'

function expression var myVar = function(name){ return('hello '+name); }; console.log(myVar('mars'));
hello mars
As you can see it's a function expression. The function which is object gets assigned to the variable during execution; we are calling that function using variable name and parenthesis '()'

let's check immediately invoked function expression; IIFE var myVarImm = function(name){ return('hello '+name); }('jupiter'); console.log(myVarImm);
hello jupiter
As you can see it's a function expression. The function which is object gets assigned to the variable during execution; we are calling that function during creation by parenthesis '()' Immediately invoked function expression IIFE.
myVarImm doesn't contain any parenthesis for invocation.


Let's discuss another form of immediately invoked function.
This is the form of function we will see in most of the javascript frameworks.
"hello world"; // a valid statement in javascript, //there are no reference of this value in the memory space though !!! Let's try doing that for a function
function(name){ console.log("hello "+name); }
Uncaught SyntaxError: Unexpected token (
SyntaxError, syntax pareser after reading the word function it identifies it's as a function statement and looking for a name of the function; instead it got opening parenthesis ! So it threw error.
So, what's the way to avoid this ?
Ok, first just try defining it. (function(name){ console.log("hello "+name); }); // this function object would just get lost, // as it's not invoked and there are nonthing referencing this to invoke later. Now do it in correct way; as we know we can invoke a function during creation lets, make use of that. (function(name){ console.log("hello "+name); }('Sun')); // classic example of IIFE // we are invoking the function and passing parameter to it.
hello Sun

why IIFE so useful ?

So far we have seen how IIFE gets constructed, now we will discuss why we need that.

As we know from previous lesson each function in the javascript gets it's own execution context, so IIF is a most secure way to get object execution space without conflicting with any existing variable. var name = 'moon';// name variable of global context (function(){ var name = 'Sun'; // new name variable attached, // with this anonymus IIFE function object context console.log("hello "+name); }()); console.log("hello "+name); // name variable of global context is unchanged
hello Sun
hello moon
Cinque Terre
Let's have a look at the below code.
Cinque Terre
Now after invoking the function using IIFE mechanism we are getting a new execution ncontext on top of global execution context.
Thus we are avoiding the conflict.
Cinque Terre
what if we like to handle global object from our function object context ? This is where we can pass the global object(i,e window) to the funtion as parameter and then modify it accordingly.
Back Next