Meaning of brackets in javascript, which is easy to confuse

Parentheses
Five semantics of parentheses in JavaScript
Semantics 1: parameter table for function declaration
Function func (arg1, arg2 ){
//...
}
Semantic 2, which can be used together with some statements to achieve certain restrictions
// Used with for in
For (var a in obj ){
//...
}
// Used with if
If (boo ){
//...
}
// Used with while
While (boo ){
//...
}
// Use do {with do while {
//...
}
While (boo)
Note: when used with if, while, And do while, parentheses implicitly convert the expression result to a Boolean value. See the ubiquitous implicit type conversion.
Semantic 3, used together with new for passing values (real parameters)
// Assume that the class Person has been defined. It has two fields: name and age)
Var p1 = new Person ('jack', 26 );
Syntax 4, used as the call operator for functions or object methods (if a parameter is defined, it can also be passed as semantic 3)
// Assume that the function func has been defined.
Func ();
// Assume that the object obj has been defined and the func method is available.
Obj. func ();
The typeof operator is mentioned here. Some people prefer to use it like this.
Note that the parentheses after typeof are not semantic 4 (not function call), but the semantics 5 mentioned later. I use typeof without parentheses. For details, refer to the multiple call methods of the named function.
Semantic 5: forced expression operation www.2cto.com
Function strToJson (str) {// Force operator () is added to both sides of the string in eval ()
Var json = eval ('+ str + ')');
Return json;
}
For semantics 5, you are most familiar with using eval to parse JSON
Another example is anonymous function self-execution.
(Function (){
//...
})();
Note that in the code above, 1st pairs of parentheses are semantic 5, and 3rd pairs are semantic 4.

Braces
Brackets in JavaScript have four meanings.

Semantic 1: Organizes compound statements, which is the most common

If (condition ){
//...
} Else {
//...
} (){
//...
}

Semantics 2: Object Direct Volume Declaration

Var obj = {name: 'jack', age: 23 };

It is a value assignment statement, where {name: 'jack', age: 23} is an expression.

Semantics 3: declaring the direct quantity of a function or function

Function f1 (){
//...
}
Var f2 = function (){
//...
}

The difference between f1 and f2 is that the former is in the syntax interpretation period and the latter is in the runtime period. The difference is: if the code that calls this function is defined after the function, there is no difference. If the code that calls this function can still be called by f1 before the function is defined, f2 will report an error, the prompt f2 is undefined.

Syntax 4: syntax symbols for structured exception handling
Try {
//...
} Catch (ex ){
//...
} Finally {
//...
}

The braces here are different from the conforming Statement (semantic 1). if there is only one statement in the braces, the braces such as if/else/for can be omitted, however, try/catch/finally cannot be omitted.

The following code is even N long

Function () {} () // immediate execution of anonymous functions. syntax analysis reports
{}. Constructor // The constructor that gets the direct object quantity. An error is reported during the syntax analysis period.

What is puzzling is why []. constructor does not report an error when writing this code. One is a constructor that wants to get the direct amount of objects, and the other is a constructor that gets the direct amount of arrays.

Of course, no error will be reported if a variable is added for receiving.

The same situation is shown in figure

Var fn = function () {} (), and no error is reported.

In fact, js statements take precedence. That is, {} is interpreted as a composite statement block (semantic 1) rather than a direct object volume (semantic 2) or a declared function (semantic 3).

Function () {} (), braces are understood as compound statements. The syntax of the previously declared function () is incomplete, which leads to errors in the syntax analysis period.

{}. Constructor. Braces are considered as compound statements. Braces are followed by dot operators. If there are no reasonable objects before the dot operators, an error is also reported.

Solution: Add a forced operator ()

(Function () {}) (), (function () {}); // force it to be understood as a function (semantic 3), and "function ()" indicates executing the function, the statement is executed immediately.

({}). Constructor // ({}) forces braces to be understood as the object's direct quantity (meaning 2), "object. xx indicates that the object member is obtained. Naturally, the vertex operator following the object can be executed normally.

Brackets
JavaScript Brackets have four Semantics

Syntax 1: declare an array

Var ary = []; // declare an empty array
Var ary = [1, 3]; // declare an array and assign the Initial Value

Semantics 2: retrieve array members

Var ary = [1, 2, 3]; var item = ary [0];

Semantics 3: Define object members (you can not follow the identifier rules)

Var obj = {};
// Add an attribute name for obj. name is a valid identifier, which can be defined by obj. name.
Obj ['name'] = 'jack ';
// Add an attribute 2a for obj. 2a is not a legal identifier (cannot begin with a number) and cannot be defined through obj.2a
Obj ['2a '] = 'test ';

Semantics 4: Get object members

Var obj = {name: 'jack'}; obj ['2a '] = 'test ';
Obj ['name']; // --> jack
Obj ['2a ']; // --> test (cannot be obtained through obj.2a)

From 0 + 0 + 0 +... = 1