Immediately Invoked Function Expressions (IIFE)

Javascript language has come a long way from its early days in 1995 to this moment. There have been many beautiful and notable additions to the language to enable developers to write code that can easily be maintained and debugged. Today, we will talk about one such addition, the Immediately Invoked Function Expression or IIFE. Without further ado, let's get into it.

How IIFEs work

IIFEs work by creating a scope within their operator. The function described within them can therefore not be accessed from outside the scope, and thus it eliminates global scoping issues.

Scopes in Javascript

A scope in Javascript means a context in which declared variables are visible and referenced. Another way of explaining is that scope shows which variables are accessible and which aren't.

Types of Scope in Javascript

Global scope: Variables declared outside any function are known as Global scope. This means a scope that can be referenced and is visible to all other scopes.
Function scope: This refers to variables that are declared inside a function. This means that the variables can be accessed anywhere from inside the function.
Block scope: This refers to variables that are declared inside a javascript block which is denoted by curly braces ({}). The variables in a block scope can be accessed inside and only inside that block. We should note that only variables declared with let and const are block-scoped. Variables declared with var do not have block scope and can be assessed from outside a block. Therefore you should not use var when declaring your variables. Use const for never-changing variables and let for variables that may change later.

The syntax that defines IIFEs

There are many ways to write IIFEs, and in this section, we will discuss them.

With parentheses: This is the most common way of writing IIFEs. You write your function and then immediately call it but wrap the entire function up in parentheses.

(function() {
  alert("Hello World!");
}());

In the code block above, we have a function wrapped in parenthesis and immediately called. The wrapping parenthesis convinces Javascript that we are writing a function expression. When we run the code, we immediately see an alert from line 2. And Javascript will never execute that line again. We can also use this syntax with arrow functions:

(() => {
  alert("Hello World!");
}());

Using the Not operator: Another way of writing IIFEs is by using “!” in front of the function. And that enforces Javascript to treat the function after “!” as an expression. This syntax doesn't work with arrow functions.

!function() {
  alert("Hello World!");
}();

Using Unary operator: We can also write IIFEs using unary operators like “+”, “-” or even “~”. It should be noted that this syntax also doesn’t work with arrow functions.

With + operator
+function() {
  alert("Hello World!");
}();

With - operator
-function() {
  alert("Hello World!");
}();

With ~ operator
~function() {
  alert("Hello World!");
}();

Using void: This is one of the least used ways of writing IIFEs, but you may come across it in the wild, so I thought it a good idea also to discuss it here. Using void also forces the function to be treated as an expression. And as you may have guessed, this also doesn’t work with arrow functions.

void function() {
  alert("Hello World!");
}();

Important points to note about IIFEs

Like any function, IIFEs can be either named or anonymous
Immediately invoked function expressions create or have their scope, which means that the variables defined inside them cannot be made available outside that function.
You can give IIFEs parameters and also pass arguments into them. An example is given in the code block below:

((a, b, c) => {
  console.log(a); // logs 400 to the console
  console.log(b); // logs 500 to the console
  console.log(c); // logs 600 to the console
})(400, 500, 600);

Advantages of Immediately Invoked Function Expression

IIFEs do not create global variables unnecessarily
They make Javascript code more organized and maintainable
IIFEs gets rid of pollution caused by scoping
Functions defined inside IIFEs do not conflict with other functions even if they have the same name

Conclusion

In this article, we have discussed IIFEs. Their syntax, how they work, key points about them and their advantages. I hope you give them a try in your next Javascript code and see how amazing they are.