What is the significance of, and reason for, wrapping the entire content of a JavaScript source file in a function block?

anewman15

Abdullah Al Numan

Posted on July 17, 2022

What is the significance of, and reason for, wrapping the entire content of a JavaScript source file in a function block?

In JavaScript, wrapping the entire content of a source file generally comes with immediately invoking it. The function is called an Immediately Invoked Function Expression, or IIFE. It is also called a Self-Executing Anonymous Function.

(function () {
  /* … */
})();
Enter fullscreen mode Exit fullscreen mode

It's a design pattern commonly used in the ES6 Module Pattern before ES6 modules were introduced. It helps us encapsulate data and functionality inside a module. jQuery plugins were usually created with IIFEs.

IIFEs are significant because:

  • they help with namespacing functions and variables in a library. Namespacing helps us prevent polluting the global namespace.
  • they help us control privacy of variables and functions. With an IIFE, we are able to expose only the APIs that we want to -- by returning them in an object, and hide the rest.

References

  1. IIFE
  2. Does the module pattern require the use of an IIFE?
  3. Modules (Stateful Access Control)
  4. The Power of the Module Pattern in JavaScript
💖 💪 🙅 🚩
anewman15
Abdullah Al Numan

Posted on July 17, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related