1
likes
spam Like Dislike

IIFE in JavaScript: What Are Immediately Invoked Function Expressions?

published 476 days, 13 hours, 52 minutes ago posted by DhruvDhruv 483 days, 9 hours, 47 minutes ago
Thursday, March 2, 2023 2:00:07 PM GMT Thursday, February 23, 2023 6:05:03 PM GMT

An IIFE (Immediately Invoked Function Expression) is a JavaScript design pattern that allows developers to execute a function immediately after defining it. This technique is commonly used in JavaScript to avoid polluting the global namespace and to create private scopes.

In JavaScript, every variable or function defined in the global scope becomes a property of the global object (which is window in a browser environment). This can lead to naming collisions and unexpected behavior, especially in large codebases or when working with third-party libraries.

To avoid this, developers can use an IIFE to create a private scope for their code. Here's an example:

(function() {

// private code here

})();

In this example, we define an anonymous function and immediately invoke it using the () syntax at the end. This creates a private scope for the code inside the function. Any variables or functions defined inside the function are only accessible within that scope and are not added to the global namespace.

An IIFE can also take arguments, just like a regular function. Here's an example:

(function(name) {

console.log("Hello, " + name + "!");

})("World");

In this example, we define an anonymous function that takes a name argument and logs a greeting to the console. We immediately invoke the function with the argument "World". This results in the message "Hello, World!" being logged to the console.

One benefit of using an IIFE is that it allows developers to create private variables and functions that cannot be accessed from outside the function. Here's an example:

(function() {

var count = 0;

function increment() {

count++;
console.log("Count is now: " + count);

}

increment();

increment();

increment();

})();

In this example, we define an anonymous function that contains a count variable and an increment function. The increment function increments the count variable and logs the current count to the console.

We then immediately invoke the function, which calls the increment function three times. Each time the increment function is called, the count variable is incremented and the current count is logged to the console.

Because the count variable and increment function are defined inside the IIFE, they cannot be accessed from outside the function. This helps to prevent naming collisions and other issues that can arise when working with global variables.

In conclusion, an IIFE is a powerful JavaScript design pattern that allows developers to create private scopes for their code and avoid polluting the global namespace. By using an IIFE, developers can create private variables and functions that are not accessible from outside the function, and can avoid naming collisions and other issues that can arise when working with global variables.

After visiting this story, if you enjoyed it, please show the author some love by coming back and clicking Like button and leaving a comment.

category: JavaScript | clicked: 0 | | source: www.freecodecamp.org | show counter code

No comments yet, be the first one to post comment.

To post your comment please login or signup

Welcome JavaScript Developers!

Are you a JavaScript developer or interested in becoming one? DeveloperSites is here to help you find the most interesting, freshest JavaScript developer stories for you to sharpen your skills as a seasoned JavaScript developer or help you find resources that will help you become a JavaScript developer.

Here you will find the latest JavaScript blog posts, articles, books and more. The best stories are voted up by our growing JavaScript developer community.

Signup for free and join the DeveloperSites community today!