Skip to main content

JavaScript Functions

JavaScript IIFE

Written by Published

A JavaScript IIFE is a function that runs immediately after it is defined.

IIFE stands for Immediately Invoked Function Expression.

It is written inside brackets and called straight away with a second pair of brackets.

Example

Example

javascript

(function () {
  console.log("This runs at once");
})();

The function is defined and called on the same line.

It has no name, so nothing else can call it again.

What is an IIFE?

An IIFE is a function expression that calls itself as soon as it is created.

The outer brackets turn the function into an expression, and the final () runs it.

Its main purpose is to keep variables private, so they do not leak into the surrounding code.

Syntax

Syntax

javascript

(function () {
  // code to run
})();

The final pair of brackets is what actually calls the function.

Keeping Variables Private

Variables declared inside an IIFE cannot be reached from outside.

Before block scope existed, this was the main way to avoid polluting the global scope.

Example

Example

javascript

(function () {
  const secret = "hidden";
  console.log(secret);
})();

console.log(typeof secret);

The second line prints undefined, because the variable does not exist outside.

An IIFE with Parameters

You can pass values in through the calling brackets.

Example

Example

javascript

(function (name) {
  console.log("Hello " + name);
})("Ada");

The argument goes in the final brackets, just like any other call.

Returning a Value

An IIFE can return a value, which is often stored in a variable.

Example

Example

javascript

const config = (function () {
  const version = "1.0";
  return { version: version };
})();

console.log(config.version);

Here, only the returned object is visible outside.

The Arrow Function Form

An IIFE can also be written with an arrow function.

Example

Example

javascript

(() => {
  console.log("Arrow IIFE");
})();

The structure is the same: brackets around it, then brackets to call it.

Do You Still Need One?

Block scope with let and const, and modules, now solve the same problem.

You will still meet IIFEs in older code, so it is worth recognising the shape.

Example

Example

javascript

{
  const secret = "hidden";
  console.log(secret);
}

console.log(typeof secret);

A plain block with const keeps the variable private in modern JavaScript.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript IIFE</title>
</head>
<body>

  <h1>JavaScript IIFE</h1>

  <p id="result"></p>

  <script>
    const app = (function () {
      const name = "My App";
      const version = "1.0";

      return {
        title: name + " v" + version
      };
    })();

    document.getElementById("result").innerHTML = app.title;
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try changing the version:

Set version to "2.0" and see the title update.

Important Points

  • An IIFE is a function that runs as soon as it is defined.
  • The outer brackets make it an expression; the final brackets call it.
  • Variables inside an IIFE stay private.
  • It can take arguments and return a value.
  • Block scope and modules now cover most of what IIFEs were used for.

Conclusion

A JavaScript IIFE runs once, immediately, and keeps its variables to itself.

It was the standard way to create private scope before let and modules existed.

Understanding the pattern helps you read older JavaScript with confidence.