JavaScript Immediately Invoked Function Expressions…or IIFEs…or “iffys”

Chris Hosler
Nov 25, 2020 · 3 min read
Image for post
Image for post

This week I present for your approval, JavaScript’s Immediately Invoked Function Expression (IIFE for short, pronounced “iffy”). An IIFE is a function that is invoked as soon as it is created, the upshot for this is that is does not create extra “stuff” in our global object.

To start let’s look at a normal, good old function…

function sayHi() {
console.log("Hello, World!);
}

Pretty straightforward, we’re creating a global function with the name of sayHi and in order to invoke the function we have to call it as, sayHi(), in our code, to get our Hello, World! in the console.

We could also write our sayHi function, as a function expression…

let sayHi = function(){
console.log("Hello, World!);
}

Here we’re defining our function expression as a variable with the name of sayHi, and now that we have a function expression we could write our function expression in parentheses, as such…

let sayHi = (function(){
console.log("Hello, World!");
})

Our sayHi variable now points to an anonymous function that throws Hello, World! to the console, and since we have written our function as an expression, JavaScript has no problem with this and we can still call it normally with sayHi().

Here’s where things get interesting, we can now immediately invoke this function, by adding parentheses to the end (we can also drop the sayHi variable declaration), creating our IIFE…

(function(){
console.log("Hello, World!");
})()

Boom, and we now have an IIFE that immediately throws a console.log of Hello, World!.

The most common syntax for IIFEs is…

(function(){
// add stuff you want to do here
})()
// Or as an arrow function
(() => {
// add stuff you want to do here
})()

We could also give our IIFE a name and some arguments, however, since the function is immediately invoked, we cannot invoke it again later on…

(function addTen(a){
let sum = a + 10;
console.log(sum);
})(5)
// outputs 15 to the console once

This can be useful if we wanted a function to only run once or if we wanted to return a specific value once.

As an aside, you might see an IIFE starting with a semi-colon…

;(function(){
// some things here to do stuff
})()

This is to avoid syntax errors when to JavaScript files are blindly concatenated into a single file.

Other ways you might see IIFEs written is with any unary operator, however you cannot use this with an arrow function and you will rarely see it out in “the wild” but if you do…

-(function(){
// some things here to do stuff
})()
+(function(){
// some things here to do stuff
})()
~(function(){
// some things here to do stuff
})()
!(function(){
// some things here to do stuff
})()

Well that’s a real quick rundown of JavaScript’s Immediately Invoked Function Expression (IIFE), I thought that it would be nice to just run through everything so in case you run across them you’d know what was going on. Thanks for reading!

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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