In IIFE, function expressions are anonymous. If we write them as named function expressions, then we have one more variable in the global scope. How can we guarantee that we will not pollute the global variable?

Usually when we talk about IIFE, we talk about its uses, modularity, closures, etc., but we don’t talk about how it can be modularized and why it doesn’t pollute global variables.

In this paper, although it is said in IIFE, but will not be too much of the introduction to the use of it, or its practical significance, after all, in the standard has been ES6 today to discuss the significance is not big, more is to discuss the cause of the writing itself was founded on grammar, why can replace it before the block-level scope, and involved in the points.

Reading to determine

Consider the following code

(function a(){
    console.log('run a'); }) ();console.log(a);
Copy the code

So this code is running in strict mode, so here’s the result, a can’t print, it’s going to give you an error.

Confused about the results? Perhaps this article will help you solve some of your doubts.

The establishment of the IIFE

IIFE can be thought of as consisting of two parts. The first part defines a function expression, and the second part of the parenthesis indicates that the function is run. Let me give you a specific example.

(function a(){
    console.log('run a'); }) ();Copy the code

The first half of the parentheses in the above code defines a function expression, followed by parentheses to indicate the syntax for running the function. Of course, there are other ways to write IIFE, such as enclosing a function expression in parentheses.

Since the standard says that function keyword starts with a function declaration, to make it a function expression, we need to add something, such as a +, void, – operator at the beginning of function, but our goal is not to have this line start with function, Function (){}() is run as an expression, not as a function declaration. Look at the following example:

console.log(+function s(){return 1} ())/ / 1
console.log(+function a(){})    // NaN
Copy the code

Function (){}() = function(){}() = function(){}() = function(){}();

Causes that do not pollute the global scope

The reason IIFE does not pollute global variables is the nature of function expressions.

Named function expression

When we create functions using function expressions and want to use the current function inside the function body, we can use named function expressions. The function name will only be used as an internal variable in the function body. In other words, a named function created using an expression does not produce a variable in the scope of the declared function, as does a declared function. Instead, it produces the variable inside the named function, and the variable is read-only and cannot be assigned.

var a = function c() {
    c = 'test';
    console.log(c); / / ƒ (c) {
                    // c = 'test';
                    // console.log(c);
                    // } 
}
a();
console.log(c); // c is not defined
Copy the code

It is understood that IIFE does not pollute global variables by taking advantage of the nature of functional tables, which are written in such a way that syntactically the interpreter can recognize the expression and then execute it. When we see the nature of this, we do not need to memorize the various ways of writing it, we can write a lot of our own.

conclusion

Ultimately, IIFE is a product of a full understanding of language features and combined with the needs of The Times. The features here are more of a functional expression feature, but also a combination of syntactic features. Demand is of course the so-called front-end “slash-and-burn” era of people’s exploration of componentization.

Remember the argument that the development of the front end is simply a transfer of ideas that have been practiced in other languages for years, so the front end is considered untechnical and even superior. But what I want to say is that thought is not the property of a language or a domain. Just because a young thing is practicing an idea practiced by others does not mean it is copied. After all, the practice of the same idea can generate completely different sparks under different needs. It also expresses that there are a lot of unique and interesting things in the front end. The emergence of this segmentation field is just the product of the needs of The Times. Everyone is serving the needs, so there is no need to produce the so-called sense of superiority or inferiority.