DEV Community 👩‍💻👨‍💻

Cover image for IIFE: Immediately Invoked Function Expressions
Parwinder 👨🏻‍💻
Parwinder 👨🏻‍💻

Posted on

IIFE: Immediately Invoked Function Expressions

IIFE is a function that is declared and invoked at the same time. You create them by using anonymous functions and enclosing the function in round brackets (). You can then invoke them by merely calling the expression immediately with a followed pair of round brackets.

(function(name){ // function expression enclosed in ()
    console.log(`Hello ${name}`); // Hello Parwinder
})("Parwinder"); // Immediately called by using () in the end. Yes we can pass arguments
Enter fullscreen mode Exit fullscreen mode

Immediately invoked function expressions are helpful in:

  • Avoiding variable hoisting from within blocks
  • Not polluting the global scope
  • Allowing us to access public methods while maintaining privacy for variables defined within the IIFE

In short, Immediately Invoked Function Expression is an excellent way to protect the scope of your function and the variables in it.

Just because I wrote the above function using the function keyword does not mean you have to. With ES6 popularity, you can use arrow functions as well.

(name => {
    console.log(`Hello ${name}`); // Hello Parwinder
})("Parwinder");
Enter fullscreen mode Exit fullscreen mode

Another way to create IIFE is by using the negation operator !. When we use the function keyword, what we are creating is a function declaration.

function myName() {
    return "Parwinder";
}

console.log(myName()); // Parwinder
Enter fullscreen mode Exit fullscreen mode

You have to invoke the declaration to the return eventually. If we prefix the function with negation, it becomes a function expression.

!function myName() {
    return "Parwinder";
}
Enter fullscreen mode Exit fullscreen mode

But this alone will not invoke it! It has only turned the function into an expression.

We must use () to call the method.

!function myName() {
    console.log("Parwinder"); // Parwinder
}();
Enter fullscreen mode Exit fullscreen mode

Ta-Da! Instead of creating a IIFE using (function => {})() we have done it using !function => {}(). No need to wrap our function block in ().

🚨 Do you see that I changed the return statement in my last example to a console.log? It is on purpose. IIFE will always return undefined. If we use the negation operator to create an IIFE, it will return true because !undefined is true.

Top comments (3)

Collapse
 
cyril_ogoh profile image
ogoh cyril

Nice read
Thanks

Collapse
 
jhelberg profile image
Joost Helberg

It is an excellent way to cover two or more abstractions in one readable unit of code, confusing the reader now and in the future and the writer in the near future. Don't do it.

Collapse
 
whitewcallum580 profile image
Callum White

Thats a interesting read. Ive quite often used this in nodejs to create a async function without global wait.

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!