Make writing a habit together! This is the 9th day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

IIFE, commonly known as the immediate execution function. You may ask me, * “Hey! I know what a normal function expression looks like, but what is IIFE?” . * Well, that’s the question I’m going to answer in this article today.

Functional expression

Before we look at calling function expressions immediately, let’s quickly review what normal function expressions in JavaScript look like.

function(){
 return ;
}
Copy the code

This is how we normally write functions in JavaScript. The function keyword, then the function name, then the function body.

After ES6, we can also write arrow functions and assign them to variables.

ArrowFn(()=>{

})
Copy the code
let ArrowFn=()=>{
}
Copy the code

Through the small example above, I quickly reviewed how normal functions and arrow functions are written. Next we introduce the immediate execution of functions

Here comes the important part, how do we call the above method? You need to explicitly call it wherever you want. In fact, that’s the main reason we wrote ordinary function expressions in the first place.

ArrowFn()
Copy the code

Execute function immediately

Now that we know how normal function expressions work in JavaScript, let’s slowly turn to IIFE. Let’s try to understand the phrase Immediately Invoked Functional Expressions. It means:

Call immediately: Something that is called immediately.

Function expressions: We’ve looked at them so far!

If we understand the whole picture:

IIFE (Immediate Call function Expression) is a JavaScript function that runs immediately after it is defined. -MDN

So, we don’t need to explicitly call this function to call/run it. It runs immediately after the JavaScript file is called. IIFE looks like this:

(function(){function body})()Copy the code

If we look at the syntax itself, we have two pairs of closing parentheses. The first pair contains the logic to be executed, the second is usually what we include when we call the function, and the second bracket is responsible for telling the compiler that the function expression must be executed immediately.

Here is how to convert ordinary functions to IIFE

ConsoleName (){console.log('hello hahaha ')} consoleName() (function(){console.log('hello hahaha ')})()Copy the code

Note that we do not need explicit calls to IIFE. Furthermore, these are only anonymous functions because they do not require function names. You can name it if you want. They can even be arrow functions!

Of course, immediate execution also takes arguments, and here is a small chestnut:

ConsoleName (name){console.log('hello '+ name)} consoleName(' ha ha ha ') (function(name){console.log('hello ') '+name)})(" hahaha ")Copy the code

Characteristics/behavior of IIFE

  • IIFE follows its own scope just like any other function/variable in JavaScript. The name part of the immediate call can sometimes confuse new developers because they expect IIFE to execute regardless of function scope, which is wrong. For example, let’s look at the following example, where IIFE is defined in a function and is called immediately only when we call the parent function.

    function fn(){
	console.log("A");
	(()=>{
		console.log("B")
	})()
	console.log("C")
}
Copy the code

    The output is A, B, and C

  • Like other functions, IIFE can be named or anonymous, but even if IIFE does have a name, it is not possible to reference/call it.

  • IIFE has its own scope, meaning that variables you declare in function expressions will not be available outside the function.