Javascript anonymous functions and their code pattern principles_javascript skills

This article will not delve into what an anonymous function is and the advantages it brings. Let’s first throw out a commonly used anonymous function:
(function(){alert('yo')})()
Many Students know how to use this kind of anonymous function, but they may not understand why the anonymous function can be called by writing like this. Maybe you know that the following parentheses execute the previous function, but you don't know what the previous parentheses mean! This article will take you to understand the code pattern principles of anonymous functions.
OK, let’s take a look at more anonymous function calling patterns first:

Copy the code The code is as follows:

(function(){alert(1);}())
(function(){alert(2);})()
void function(){alert(3);}( )

The above 3 are correct and functionally equivalent.
Let’s look at the wrong way of writing:
4.
function(){alert('yo')}()
The above code will throw a syntax error. Why is this? ? With this question, let’s take a look at the answer given by Qin Ge:
1. Function literal: First declare a function object, and then execute it.
2. Priority expression: Since Javascript executes expressions from the inside to the outside of the parentheses, you can use parentheses to force the execution of the declared function.
3.void operator: Use the void operator to perform a single operand that is not surrounded by parentheses.
Okay, regardless of whether the answer is correct or not, let’s put these aside and look at the syntax of function declaration and the syntax of function expression:
1. Function declaration:

Copy code The code is as follows:

function name([param[, param[, ... param]]]) {
statements
}

The function name name here cannot be omitted. If the function name is omitted, an error will be reported.
This also reasonably explains why writing directly
function(){alert('yo')}
will make an error? Because the compiler treats it as a function declaration and the function name does not appear in the code, the result is predictable.
2. Function expression:

Copy code The code is as follows:

function [name ]([param] [, param] [..., param]) {
statements
}

The function name name can be omitted. Omitting name is a so-called anonymous function. To clarify: if you need to create an anonymous function, you must give a function expression rather than an explicit declaration of the function
Now we can make a more accurate explanation:
123 Anonymous function code pattern is nothing more than parentheses Or void tells the compiler to interpret function(){} as a function expression. There is no such complicated principle of priority and void operator. This is nothing more than a simple syntax conversion.
As you can imagine, as long as it conforms to the syntax of function expressions, we can create N anonymous function code patterns, such as

Copy code The code is as follows:

!!function(){
alert('yo');
}()
function(){
alert(' yo');
}()

Blah on and on...
There is no deeper mystery, it’s just the difference between function declaration and expression. If you haven’t Understand, maybe you are overthinking and overcomplicating things.
We currently do not have special professional training arrangements and courses for learning Javascript. The improvement of coding ability depends on your own daily practice and accumulation. However, the more this happens, the easier it is to ignore the most basic knowledge and end up complicating simple problems, which is not advisable. Some students even learn Javascript with the attitude of being able to use it, without going into the details. They know it but don’t know why. In fact, their abilities are not improved much in the end... which is even more undesirable!
Extended reading:
What do parentheses surrounding a JavaScript function declaration mean?