DEV Community

Cover image for What is IIFE in JavaScript ?
Kamran Ahmad
Kamran Ahmad

Posted on

What is IIFE in JavaScript ?

Sometime in JavaScript we need a function that executes only once and never again. Basically a function that disappears right after its called once. How can we achieve this? for example we could do this:

const func1 = function(){
             console.log('this function will never run again!`)
                }
 func1();
Enter fullscreen mode Exit fullscreen mode

But we definitely can call this func1() again if we want. This is NOT what we want to do. We want to execute a function immediately without having to save it somewhere.
So this is how we do that,
we simply write the function expression itself without assign it to any variable.

function(){
console.log('This function will never run again')
}
Enter fullscreen mode Exit fullscreen mode

if we run this, we would get an error function statements require a function name an that's because JavaScript expects a function statement, but we simply start a new line of code with the function keyword.

Here we can still trick JavaScript into thinking that this is just an expression. We do that by simply wrapping all of this into GROUPING OPERATOR().

(function(){
   console.log('This is will never run again!')
});
Enter fullscreen mode Exit fullscreen mode

so we basically transform the previous statement into an expression. But the function didn't execute yet. To execute the function we need to call it like this (adding '()' next to it, like we do with regular function call).

(function(){
   console.log('This is will never run again!')
})();
Enter fullscreen mode Exit fullscreen mode

So we create a function expression and we immediately call it. which is why this pattern is called Immediately Invoked Function Expression(IIFE).

The same would also work for an arrow function this way.

(() => console.log('This function will never run again!'))();
Enter fullscreen mode Exit fullscreen mode

This will also never run again.

so this is not really a feature, of the JavaScript.

it's more of a pattern, that some developers come up with and it is widely used.

This design pattern is also known as a Self-Executing Anonymous Function.
Self-Executing -> it executes the moment it is created.
Anonymous -> it has no name and is not stored variable.

Top comments (1)

Collapse
 
deathshadow60 profile image
deathshadow60 • Edited

It was also known as a SIF back in the '80's in some interpreted languages. Self Instancing Function. Something that's bothered me about programming the past 40 years or so of my doing it. It seems like every 5 to 10 years the same old concepts are re-introduced with a new name slapped on it. Goes hand in hand with how terms that were abandoned 30+ years ago are back, not, and trendy... guess it goes with the 1960's failure known as "new math" now being called "common core maht".

Laugh is IIFE are largely unnecessary now that we have let/const. I was initially leery of both of them trying hard to find a scenario where they would actually provide any benefit, and it wasn't until I realized they can replace the IIFE that I "got it".

If you define your functions as CONST inside a simple {}, and don't use var, you boom have the same functionality as a IIFE apart from being able to pass it parameters on startup. IIFE were kind of a hack to get scope isolation... and we have that without the tricks now as let/const gives us that at the block level.


{
    const testFunc = (message) => {
        console.log(message);
    };
    testFunc("This Section Only Runs Once");
}

testFunc("This throws an error");

Death to the IIFE, long live the code block. (aka "closure" to people who abuse the word closure for something it doesn't mean...)