// Immediately Invoked Function Expressions(IIFE) and How They Work
//Lets take a typical function statement and then we can call the function using the “name” parameter. Simply copy this post and paste to the browser console and follow the results.
function greet(name) {
console.log(“Hello” + name);
}
greet(" Yashua");
greet(" Imhotep");
//**Ths will simply print out:**
// **Hello Yashua**
// **Hello Imhotep**
// Now using a Immediately Invoked function Expression(IIFE), lets use a function expression and we can invoke the function on the fly right after we create the function by simply using brackets (). And we can put the parameter we wish inside the brackets to pass the “name” to the string.
var greetfunc = function(name){
console.log(“Hello” + name);
}(" Imhotep");
//This will give the same result of "Hello Imhotep"
//Now just for information sake you can also just input a value or a variable and it will not produce an error in the code. It will simply just accept these values and hold them in memory.
3; //value
var family = {name: “Joe”, address: “Chicago”}; //object in memory
console.log(family); //prints object name and values
(“Imhotep”); //Again no error from a string
// Now what about a function statement? A function statement will give you an error because a function statement requires a name. To see this error just input the function statement below without using parenthesis.
// Now to change this to a function expression you must wrap this statement in parenthesis and it will not give an error.
(function(name){
return ("hello " + name);
});
// Now lets take this function wrap it in parenthesis and to make a function expression and immediately invoke this function expression we add our name parameter in brackets().
(function(name){
var greeting = “Inside IIFE: Hello”;
console.log(greeting + " " + name);
})(“Imhotep Amen”); //IIFE using a wrapped function statement. I can create and run a function on the fly. This will again return:
//“Hello Imhotep Amen”. //
//Now lets take a look at what happens under the hood when we invoke a function expression.
var greeting = ‘Hola’; //this sets the global variable greeting to “Hola”. It will not effect the var greeting within the function above which has its own lexical environment within the function so they do not touch each other.
console.log(greeting); // **This will print out "Hola"**
//Next I can also change the global greeting within the function by referencing the global “window”. Remember objects pass by reference and I can pass reference to my global object to my immediately invoked function. I will then intentionally crash into the global object.
(function(global, name){
var greeting = "Hello "; //will change global greeting from "Hola" to "Hello" when
invoked//
global.greeting = "Hello my man "; //defines global.greeting equal "Hello my man"
within global environment//
console.log(greeting + " " + name); // prints "Hello Imhotep Amen" because the
"window" has variable greeting as "Hello " before any function is invoked
console.log(global.greeting + " " + name);//prints "Hello my man Imhotep Amen" because global.greeting is "Hello my man".
})(window, “Imhotep Amen”)
// IIFE invokes the function to follow the above steps immediately using now what is left in the window at the global level and prints:
"Hello my man Imhotep Amen"
console.log(greeting); //Now var greeting "Hello " is changed to global.greeting string “Hello my Man” because you changed the window to be the last string or variable that was used even though it was inside the function. Thus it prints:
//Hello my man"//