All this talk about IIFEs is making me want a coffee!

What is an IIFE in JavaScript?

Learn what an Immediately Invoked Function Expression is in five minutes or less!

Sunil Sandhu
Aug 15, 2018 · 4 min read

Bad Joke Alert Note: ‘iffy’ is an adjective which means ‘full of uncertainty; doubtful’.

Hearing the term ‘Immediately Invoked Function Expression(also known as an IIFE) and suddenly feeling like garbage for not understanding is also perfectly normal, because programming languages are often littered with elitist terms to make things sound more complicated than they really are.

Also having absolutely no idea what the difference between using this instead of a traditional function is perfectly normal. Let’s try to debunk the whole thing so that feeling iffy about using an IIFE can become a thing of the past!

We’ll dive into the concept just enough that you understand its significance,

but not too much that your brain gets scrambled*

*or fried — however you happen to like your brains! 🤯 + 🧠 = 🍳

Put simply, an Immediately Invoked Function Expression is a good way at protecting the scope of your function and the variables within it. The term ‘scope’ might also be a bit fancier than it needs to be — it basically just means where it can be accessed from.

You will often (but not always) see IIFEs used in frameworks/libraries such as jQuery. They will often wrap all of the code for their framework/library inside of an IIFE in order to protect the scope of its variables and also to make sure that everything is executed without the user having to do anything.

Anyway, let’s look at a quick example of a function and why it may be useful to turn it into an IIFE:

So here we have a function that simply adds together the values of var x and var y. We then call the function shortly after. From this point, we can call the addTogether function as many times as we like.

But maybe this isn’t desirable, and we simply want to call a function in order to get an output, but that’s it — we’ll never want to use it again and don’t want our program to ever be able to accidentally access it.

Now the first thing to mention here is that, in the above example, our variables are safe — safe insofar that they are immutable (which is just a fancy, technical term for saying that they cannot be changed in the future).

So that’s great, our variables cannot be accessed, but how do we make it so that our function also cannot be accessed.

That’s where IIFE’s come in.

So the first thing we do is wrap our entire addTogether function in brackets, like so:

This is actually the first part of creating what is known as a function expression. Now at the moment, it’s not quite your typical function expression, in that function expressions will usually be anonymous. What we have here is called a named function expression. How many more times do you think we can say function expression in the space of a minute? Function expression, function expression, function expression.

Function Expression!

Anyway, so because we are creating one of those function expression things that I just said about ten times, we don’t actually need to give the function a name anymore, because the plan is that once we’ve created an IIFE, we have no intention of calling the function again. So let’s get rid of the name:

Okay, we’re nearly there.

Finally we need a way to be able to call this function, but how do we do that now given that we don’t have a name to refer to? Well, we simply add a pair of brackets at the end of the function (but just before the semi-colon), like so:

And there you have it, your very own IIFE!

So now no longer any need to feel iffy about using IIFE’s.

If you’re keen to know more about IIFEs, MDN’s website have a nice glossary page about them (be warned though, they use a lot of technical terms).

If you found this useful, be sure to leave some claps. And follow us too, make yourselves at home, put your feet up!

TL;DR

An Immediately Invoked Function Expression is a good way at protecting the scope of your function and the variables within it.

Because I couldn’t settle on the red or silver…

JavaScript In Plain English

Show some love by subscribing to our YouTube channel!

JavaScript In Plain English

New articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store