Hello there, welcome to my blog. Software engineers basically solve problems through code and this takes a thorough process from planning, applying principles and best practices to make the code readable and reusable, software engineers don't just open their code editors and jump in and start writing codes, they plan it out, which would always include using best practices, and one of the best practice is the DRY(Don't Repeat Yourself) principle. In my last article here, I explained variable scoping and how they affect your codebase, but today I would be explaining one of the ways we can follow the DRY principles using IFFE. Does that sound strange? If it does, then this article is definitely for you. Grab your popcorn.

What is IFFE?

IFFE means Immediately Invoked Function Expressions. IFFE is widely used in patterns that power most of the JavaScript frameworks in the ecosystem and can be used in vanilla javascript too, at least I use it. IFFE as the names imply is a function that is immediately called after it has been declared. With IFFE, 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 IFFE 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("Example 1")

} 
exampleOne();
// Output: "Example"

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("Example 2")

} 
exampleTwo();
// Output: "Example 2"

Immediately Invoked Functions 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")

})();

// Output: "Example 2"

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.

(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.

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.

Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live - John Woods.

Who knows it maybe me... Lol.

In the end...

So we have come to the end of this amazing article. Hope you learned something useful. If you did, like, share, comment, just do anything to make it go viral.

I would be posting more articles, so be sure to follow me to get notified when I post them.

If you have any questions concerning Go, Javascript, TailwindCSS, Open-source, or this article? You can reach me on Twitter. Till next time, see ya. Thank you.

What is an IFFE in JavaScript?