The Complete Guide About Javascript IIFE

Through this article, we will go through the details of Javascript Immediately Invoked Function Expression (IIFE).


An Immediately-invoked Function Expression (known as Self-executing anonymous functions) is a way to execute functions immediately, as soon as they are interpreted at runtime.

IIFE’s are very useful because they can create local scope for the variables without affecting the surrounding code outside of it.


IIFE can be defined as the following:

(function() {
   // function implementation

It also can be defined as an arrow function:

(() => {
  // function implementation

We basically have declared a function expression inside the parentheses, then we’ve appended the () to execute the function as soon as it’s get interpreted.

Those wrapping parentheses () are actually what make our function, to be considered as an expression.

Regular JS functions strictly require a name, For example:

function doSomething() {}
// Or as an arrow function
doSomething() => {}

While function expressions don’t strictly require a name, we can give it a name as the following:

(function doSomething() {
  /* */

Also, as an arrow function

(doSomething = () => {
  console.log('Log me please!')
The Complete Guide About Javascript IIFE

Giving IIFE a name doesn’t change the fact that they get executed as soon as they get interpreted, and they get executed only once, we can’t re-invoke/call IIFE again during run-time.


IIFE has a function scope, which means it has a private scope for the function implementation, For example:

(function () {
  var blogName = 'JS-HowTo';

console.log(blogName); // blogName is not defined here, it's in a different scope.

Simply, you can create variables inside the IIFE, and those variables won’t be available to the outside world.

How IIFE works?

A normal Javascript function looks like the following:

function doSomething() {
    console.log('Regular JS function.')

// Call the function anytime/anywhere during the run time

We can call doSomething by choice at anytime/anywhere later during the run-time.

For how IIFE works, simply wrap a function with parentheses, and invoke it by putting () after it.
Remember that IIFE gets executed only once and we can’t re-invoke/call it again during the run-time, For example:

(function () {
  console.log('Expression JS function.'); // Expression JS function.


IIFE accepts any kind of parameters from the outer scope, For example, we need to pass logArgument value from the outer scope to be used inside the function, we can pass it through the closing parentheses

('Expression JS function.')

(function (logArgument) {
  console.log(logArgument); // Expression JS function.
})('Expression JS function.');

What does window, document, undefined mean in IIFE?

If you came across some known Javascript SDKs such as Facebook SDK or Google SDK, you might notice that they are passing window, document, undefined and other parameters to the IIFE, Take the google tag manager script as an example:

<!-- Google Tag Manager -->
<noscript><iframe src="//"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
<!-- End Google Tag Manager -->

As shown above, they are passing window, document and other parameters to the IIFE, the reason behind this:

  1. Local variables are faster to resolve than global variables.
  2. Reducing the Javascript bundle size, by minifying/renaming the variables.
(function (w, d) {
  // w: refers to window object
  // d: refers to document object
})(window, document);

Both of the points above would be noticed and results in better performance on large scale applications.

What about undefined?

In ECMAScript 3, undefined is mutable. Which means its value could be reassigned, something like 

undefined = true; But in ECMAScript 5 strict mode ('use strict';) the parser will throw an error. Before this, the way to protect IIFE’s was by passing undefined as a parameter, by doing the following:

(function (window, document, undefined) {

})(window, document);

This means if someone came along and did this, it would be okay:

undefined = true;
(function (window, document, undefined) {
  // undefined is a local undefined variable
})(window, document);

Alternative syntax using unary operators

IIFE starting with a semicolon (;)

Sometimes you may come across IIFE that starts with a semicolon ;, which is called the defensive semicolon.

The reason behind this is to eliminate JS files/logic combinations in case it gets blindly combined together, For example, consider we’ve two JS files:




If you use any kind of code minifying tool, such as Toptal JS minifier to concatenate the code from both files into a single file, it will result in the following:

(void console.log("file1"))(function(){console.log("file2")})()

Which will throw a syntax error when trying t execute it. That’s why it’s preferable to add a leading or defensive semicolon ; in front of the opening wrapping parenthesis.

Other supported operators can be used within the IIFE

!function () {


+function () {


-function () {


~function () {


That’s It! And as always happy coding!

Photo from Unsplash

Related Posts

How to Capture Screenshots with Puppeteer In NodeJS

How to Capture Screenshots with Puppeteer In NodeJS

To Capture Screenshots with Puppeteer: Launch a Browser Instance Navigate to the Web Page Capture the Screenshot Introduction: Puppeteer is a powerful Node.js library that allows developers…

How to Minimize Puppeteer Browser Window To Tray

How to Minimize Puppeteer Browser Window To Tray

Puppeteer is a powerful tool for automating tasks in headless or non-headless web browsers using JavaScript. While Puppeteer is often used to perform actions within a browser,…

Intercepting Responses in Node.js with Puppeteer

Intercepting Responses in Node.js with Puppeteer

Introduction: Puppeteer is a powerful Node.js library that provides a high-level API for controlling headless Chrome or Chromium browsers. It’s widely used for web scraping, automated testing,…

Mastering React Component Re-rendering in Jest

Mastering React Component Re-rendering in Jest

In this hands-on guide, we’ll explore the art of optimizing React component re-rendering within Jest tests. By combining theory with practical coding examples, you’ll gain a deep…

Eliminating Nesting Loops in React Rendering

Eliminating Nesting Loops in React Rendering

React has ushered in a new era of web application development with its component-based structure, promoting code reusability and maintainability. But as projects evolve, achieving optimal performance…

Exploring Type and Interface Usage in TypeScript

Exploring Type and Interface Usage in TypeScript

TypeScript has gained immense popularity by bridging the gap between dynamic JavaScript and static typing. Two of its fundamental features, “Type” and “Interface,” play pivotal roles in…

Leave a Reply

%d bloggers like this: