Understanding IIFE in JavaScript

Learn about IIFE in JavaScript with practical examples

Mehdi Aoussiad
Nov 24, 2020 · 3 min read
Coding with coffee.
Coding with coffee.
Photo by Azharul Islam on Unsplash

Introduction

In this article, we will learn about IIFE in JavaScript with practical examples. Let’s get right into it.

IIFE in JavaScript.
IIFE in JavaScript.
Image created with ❤️️ By Mehdi Aoussiad.

What is an IIFE?

Here is an example of IIFE:

(function () {
console.log("Chirp, chirp!");
})();
// this is an anonymous function expression that executes right away
// Outputs "Chirp, chirp!" immediately

Note that the function has no name and it is not stored in a variable. The two parentheses () at the end of the function expression cause it to be immediately executed or invoked.

When to use IIFE?

Consider the following example of two different JavaScript files included in a single web page.

The file index.js :

var userName = "Bill";

function display(name)
{
alert("index.js: " + name);
}

display(userName);

The file app.js :

var userName = "Steve";

function display(name)
{
alert("app.js: " + name);
}

display(userName);

If you run these two JavaScript files on your web page, you will find out that only the file app.js that is executed because it’s included after the file index.js in the HTML. So, JavaScript always considers the last definition if two functions or variables have the same name.

IIFE solves this problem by having its own scope. It is restricting functions and variables to become global. As a result, the functions and variables declared inside IIFE will not pollute the global scope even if they have the same name.

To solve the problem above that we had with the two JavaScript files, we can wrap all the code inside these two files in an IIFE.

Have a look at the following example:

(function () {
var userName = "Steve";

function display(name)
{
alert("index.js: " + name);
}

display(userName);
})();

As you can see, this is a good situation to use IIFE. The global scope won’t be affected anymore.

Conclusion

Thank you for reading this article, I hope you found it useful.

More Reading

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Mehdi Aoussiad

Written by

Front-End Web Developer from Morocco. I focus on writing useful articles for readers. Contact: elmehdiaoussiad@gmail.com Subscribe: https://mehdiouss.ck.page/

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Mehdi Aoussiad

Written by

Front-End Web Developer from Morocco. I focus on writing useful articles for readers. Contact: elmehdiaoussiad@gmail.com Subscribe: https://mehdiouss.ck.page/

JavaScript In Plain English

New JavaScript + Web Development articles every day.

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