The Complete Guide About Javascript IIFE

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

Introduction

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.

Syntax

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.

Scope

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
doSomething()

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.
})();

Arguments

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:

https://developers.google.com/tag-manager/quickstart

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- 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:

(function(){
    console.log('file1')
})()

And

(function(){
    console.log('file2')
})()

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 remove highcharts.com credits link

How to remove highcharts.com credits link

Highcharts is a popular JavaScript charting library that offers a wide range of interactive and customizable charts for developers. However, if you’re using the free version of…

Highcharts Place text in the center of a pie chart

Highcharts Place text in the center of a pie chart

To place text in the center of a pie chart in Highcharts, you can use the chart.renderer object to create a custom label and position it in…

Test design breakpoints using jest and react-testing-library

Test responsive design using jest and react-testing-library

Testing design breakpoints in React applications is an important aspect of front-end development. It ensures that the components look and behave as expected on different screen sizes….

Testing React-Query with Jest and React-testing-library

Testing React-Query with Jest and React-testing-library

Introduction In this article we will cover the basic usage of testing useQuery hook from tanstack/react-query library, along with how to test it using jest and react-testing-library….

Highcharts How To Change Series Color with examples

Highcharts How To Change Series Color with examples

To change the color of a series in Highcharts, there are a set of options we are going to discover in this article. Option 1: Using the…

A quick introduction to Javascript shadow DOM

A quick introduction to Javascript shadow DOM

Introduction JavaScript Shadow DOM is a powerful tool for creating isolated and reusable components in web development. It allows developers to create custom elements with their own…

Leave a Reply

%d bloggers like this: