Table of Contents
What is IFFE in JavaScript?
An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined. IFFE is widely used in patterns that power most of the JavaScript frameworks in the ecosystem.
With IIFE, variables and whatever is defined within that function is made private, private meaning that the values of anything within the function block can not be accessed outside it.
With IIFE software engineers can scope variables, objects, and even methods to avoid function name conflict and they can also break their code into different modules that perform a specific task without conflict from each module or function.
Let take a look at the different type of functions.
Function Statement
This is the most popular way of declaring functions that every beginner in JavaScript has come across, we simply create a function with the keyword function
and add a name, then add parenthesis that takes in an optional parameter and curly brackets. Then we can invoke the function by calling its name with a parenthesis.
function exampleOne(){
console.log("Function Statement")
}
exampleOne();
Function Expression
These are functions that are nameless and thereby passed into a variable for it to be accessed. Just like a normal function but has no name.
const exampleTwo = function (){
console.log("Function Expression")
}
exampleTwo();
Now ,Let have a look on how IFFE works
Immediately Invoked Function Expressions (IFFE)
IFFE is immediately Invoked, it doesn’t need a name or variable to invoke it, by simply adding a parenthesis()
at the end of the function immediately invokes it. Also, IFFE is treated like an expression, which means it is wrapped in a () parenthesis.
(function (){
console.log("Example 3")
})();
This is a basic example of an IFFE, as you can see I didn’t need to call its name, just () at the end.
Note: Do not miss the semi-colon after the () as it would throw an error.
With IFFE an engineer that has 100 functions wouldn’t fear messing up function names since he/she can make them go nameless and still achieve the same result with named functions. With IFFE you can have multiple functions in it with names but there only exist within that function and can’t be accessed outside. This would give every engineer a readable and reusable codebase.
Accepting Argument in IFFE
IFFE is not limited to only scoping stuff but does the basic thing that every function does which include accepting parameters and arguments.
(function (num1,num2){
var answer = num1 + num2
console.log(answer)
})(2,3);
Output
5
Now let try to access that answer
variable outside the IFFE.COPY
(function (num1,num2){
var answer = num1 + num2
console.log(answer)
})(2,3);
console.log(answer)
Output
5 Uncaught ReferenceError: answer is not defined.
Now let’s take a step further and make two variables with the same name to see if we can get a conflict.COPY
var answer = 20;
(function (num1,num2){
var answer = num1 + num2
console.log(answer)
})(2,3);
console.log(answer)
Output
5 20
From the example, JavaScript didn’t count the answer
variable inside the IFFE as global scope. On a good day, this has saved us a lot of stress from debugging
Advantages of IIFE:
- Do not create unnecessary global variables and functions
- Functions and variables defined in IIFE do not conflict with other functions & variables even if they have the same name.
- Organize JavaScript code.
- Make JavaScript code maintainable.
With this knowledge, you can start writing readable, easy-to-maintain code which is part of what makes you an awesome developer.