IIFE (Immediately Invoked Function Expressions) in JS

Today we are going to talk about something that doesn’t get talked about enough in JS, and that’s IIFE (Immediately invoked function expressions) and the fact that they are a great way to save code and make your code cleaner.

What makes life so special? For starters, they assist you in keeping your code clean and organized. When you have a lot of code, it can be difficult to keep track of what goes where. All of your code is nicely wrapped in one location with an IIFE. Additionally, IIFEs can assist you in avoiding name conflicts.

There’s always the risk of creating a variable with the same name as the variable you’re working on when declaring variables in the global scope. A variable somewhere else in your code This can lead to a slew of issues. However, when you encapsulate your code in an IIFE, this risk is eliminated because your This risk is minimized when you encapsulate your code in an IIFE since your variables are only accessible within the scope of the IIFE.

IIFEs also offer performance benefits. When you reference a variable in the global scope, JS has to search through all of the other variables in that scope to see if it exists (this process is known as ‘variable hoisting’). However, when you reference a variable within an IIFE, JS knows exactly where to find it because it is contained within that function’s scope. This can lead to faster execution time and less CPU usage overall.

So now that we know why IIFEs are so great let’s take a look at how we can actually use them. Essentially, an IIFE is just a normal function expression that is immediately invoked after being defined:

(function() { //code goes here })();

As you can see in the example above, we simply surround our entire block of code in parenthesis and then call it by adding another set of parentheses at the end. It’s really as simple as that! Now let’s create a basic message application to demonstrate how this might operate in practice:

(function() {

 var messages = []; //declare our messages array

//adds a new message object to our array with text and timestamp properties messages.push({text: "Hello world!", timestamp: Date.now()});

console.log(messages); //print out our array

})();

As you can see, using an IIFE is a great way to keep your code clean and organized. By encapsulating our code in a function, we can avoid potential naming collisions and keep our variables isolated from the rest of the global scope. Additionally, IIFEs offer performance benefits by allowing JS to quickly reference variables within the function’s scope.

What are Some of the Advantages of Working with IIFEs?

Using IIFEs has the advantage of helping you keep your code clean and orderly. It might be difficult to keep track of what goes where when you have a lot of code. All of your code is nicely wrapped in one location with an IIFE. Additionally, IIFEs can assist you in avoiding name conflicts.

There’s always the risk of mistakenly creating a variable with the same name as another variable elsewhere in your code when declaring variables in the global scope. This can lead to a slew of issues. This risk is minimized when you encapsulate your code in an IIFE since your variables are only accessible within the scope of the IIFE.

IIFEs also offer performance benefits. When you reference a variable in the global scope, JS has to search through all of the other variables in that scope to see if it exists (this process is known as ‘variable hoisting’).

However, when you reference a variable within an IIFE, JS knows exactly where to find it because it is contained within that function’s scope. This can lead to faster execution time and less CPU usage overall.

   

About the Author

ByteScout Team of Writers ByteScout has a team of professional writers proficient in different technical topics. We select the best writers to cover interesting and trending topics for our readers. We love developers and we hope our articles help you learn about programming and programmers.