DEV Community

Cover image for Demystifying JavaScript IIFE
Arindam Majumder
Arindam Majumder Subscriber

Posted on • Originally published at arindam1729.hashnode.dev

1 1 1 1 1

Demystifying JavaScript IIFE

Introduction:

Immediately Invoked Function Expression (IIFE) is one of the most popular design patterns in JavaScript. It pronounces like "iify".

The Name sounds Complex?

Don't worry! In this article we'll understand what is IIFE, It's usecase and many more! After completing this article you'll have a clear understanding of IIFE.

What is IIFE?

Demystifying Automatic Semicolon Insertion in JavaScript

IIFE stands for Immediately Invoked Function Expression .

"An IIFE (Immediately Invoked Function Expression) is a JavaScript function that is executed immediately after it is defined. It is a self-invoking function that is commonly used to create a private scope, encapsulate code, and prevent variable pollution in the global namespace."

Let's understand the syntax:

(function Greet(){
    console.log("Hello Folks");
})() 

// Output: Hello Folks
Enter fullscreen mode Exit fullscreen mode

Have you noticed the Difference here??

Here we have wrapped the function with parenthesis and then invoked it.

But why?

We wrap the function with parentheses to treat the function as an expression rather than a function declaration. And we use another set of parentheses to invoke the function immediately.

But What will happen if we don't use the outer parenthesis?

Let's see this with an example,

function Greet(){
    console.log("Hello Folks");
}() 

// Output: Uncaught SyntaxError: Unexpected token ')'
Enter fullscreen mode Exit fullscreen mode

This throws an error simply because in the normal function syntax we can't invoke a function directly. For this case, we have to invoke the function explicitly.

So to use IIFE, we need to use the outer parenthesis.

Why is it used?

There are many reasons to use IIFE. Here are some of them

1. Isolate Scope Creation:

IIFEs create a new function scope, which helps to prevent variable and function name collisions with other parts of the code. Variables defined inside an IIFE are not accessible from the outside scope, keeping them private and isolated.

2. Avoiding Global Scope Pollution:

As you know, variables declared in the global scopes are accessible by every function. Sometimes this creates conflicts and errors. To avoid this, IIFE is very useful, as It creates its own scope and keeps them safe from Global scope pollution

3. One-Time Usage:

IIFEs are useful for executing code that needs to run only once during the application's initialization.

Conclusion:

If you found this blog post helpful, please consider sharing it with others who might benefit. You can also follow me for more content on Javascript and other web development topics.

To sponsor my work, please visit: Arindam's Sponsor Page and explore the various sponsorship options.

Connect with me on Twitter, LinkedIn, Youtube and GitHub.

Thank you for Reading :)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay