JS Execute function immediately

I believe you will often encounter the following two types of writing:

(function() {...}) () and (function() {...} ())

What does it mean to write like this? What difference does it have?

Prior to this, we need to understand several concepts:

函数声明、函数表达式、匿名函数

function declaration: function fnName() {...} ;
functiondeclare a function with a keyword, and then execute a function name called a function declaration.

function expression: var fnName = function() { ... } ;
functiondeclaring a function with a keyword, but not naming the function, and finally assigning an anonymous function to a variable called a function expression, is the most common form of function expression syntax.

anonymous functions: function() { ... } ;
Using function keywords to declare a function, but not to name the function, so called anonymous function, anonymous function is a function expression, the anonymous function has many functions, assigning a variable to create a function, assigning an event to become an event handler or create a closure, and so on.

The difference between a function declaration and a function expression is that
1. The JavaScript engine parses the JavaScript code by "function declaration promotes" The function declaration on the current execution environment (scope), and the function expression must wait until the JavaScript engine executes to its row before parsing the function expression from the top and the next line.

2, the function expression can be called immediately after the function, function declaration can not, can only be called in FnName () Form.

Knowing the basic concepts of these functions, look back (function(){ ... }()) and (function() { ... })() the two immediately execute the function of the notation, initially I thought is a parenthesis wrapped anonymous function, and in the following parentheses immediately call the function, then do not know why the parentheses, and then understand that the function body after the parentheses can be immediately called, This function must be a function expression and cannot be a function declaration.

(function(a) {Console.log (a); //use the () operator to print out the 123}) (123);(function(a) {Console.log (a); //use the () operator to print out the 1234} (1234));!function(a) {Console.log (a); //Use the! operator to print out the 12345} (12345);+function(a) {Console.log (a); //print out the 123456 using the + operator} (123456);-function(a) {Console.log (a); //use the-operator to print out the 1234567} (1234567);varfn =function(a) {Console.log (a); //Use the = operator to print out the 12345678} (12345678);

You can see the output and add it in front of the function! , +,-even commas can play the function immediately after the effect of execution, and (),! , + 、-、 =, and so on, all function declarations are converted into function expressions, eliminating the ambiguity of the JavaScript engine recognition function expressions and function declarations, telling the JavaScript engine that this is a function expression, not a function declaration, you can add parentheses after it, and immediately execute the code of the function.

Parentheses are the safest thing to do, because! , +,-et operators also operate on the return values of functions, sometimes causing unnecessary hassles.

But what is the use of such a notation?

There is no concept of private scope in JavaScript, if you declare some variables in global or local scope on a multi-person project, you may be accidentally overwritten with a variable of the same name by someone else, depending on the characteristics of the scope chain of the JavaScript function, You can use this technique to mimic a private scope, use an anonymous function as a "container," inside the container to access external variables, and the external environment to access variables inside the "container," so the (function(){ ... })() internally defined variables do not collide with external variables, commonly known as "anonymous wrapper" or " Namespaces ".

jquery uses this approach, wrapping jquery code in (function(window,undefined){ ...jquery代码...})(window) , and when calling jquery code in the global scope, can protect the jquery internal variables.

JS Execute function immediately