What is the usage of curly brackets in javascript

Usage of braces in JavaScript: 1. Used to organize compound statements; 2. Used to define an object, which in most cases must have paired properties and values; 3. Used to declare functions or functions Direct quantity; 4. Used as a syntax symbol for structured exception handling.

The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.

What are the uses of braces in JavaScript

The braces "{}" in Javascript have four semantic functions:

Semantics 1. Organize compound statements, This is the most common:

if( condition ) {
  //...
}else {
  //...
}
for() {
  //...
}

Semantic 2, object literal declaration:

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

The whole is an assignment statement, in which {name:'jack' ,age:23} is an expression.

Semantics 3, declare a function or function literal:

function f1(){
    //...
}
var f2 = function(){
    //...
}

The difference between f1 and non-f2 is that the former is in the syntax interpretation period and the latter is in the runtime. The difference is: if the code that calls the function is after the function definition, there is no difference; if the code that calls the function is before the function definition, f1 can still be called, but f2 will report an error, prompting that f2 is not defined.

Semantics 4, grammatical symbols for structured exception handling:

try {
    //...
}catch( ex ){
    //...
}finally{
    //...
}

There is a difference between the braces here and the conforming statement (Semantics 1). If in the braces There is only one statement. The curly braces can be omitted in if/else/for, etc., but try/catch/finally cannot be omitted.

I have been struggling with the following code for a long time:

function(){}() //匿名函数立即执行， 语法分析期报
{}.constructor //获取对象直接量的构造器，语法分析期报错

What is puzzling is why [].constructor is written like this but does not report an error. One is a constructor that wants to obtain the direct value of the object. One is just a constructor to get the array literal.

Of course, adding a variable to receive will not report an error, var c = {}.constructor;

In the same situation, such as: var fn = function(){}(), no error will be reported .

It is actually the "statement priority" of js that is causing trouble, that is, {} is understood as a compound statement block (semantic 1) rather than the semantics of an object literal (semantic 2) or a declared function (semantic 3).

function(){}(), curly brackets are understood as compound statements. Naturally, the syntax of the previous function() declaration function is incomplete, causing an error during syntax analysis. {}.constructor, the curly braces are understood as compound statements, and the curly braces are followed by the dot operator. If there is no reasonable object before the dot operator, an error will naturally be reported.

The fix is ​​well known: add a mandatory operator ()

(function(){})(), (function(){});//Force it to be understood as a function (semantics 3), "Function ()" means executing the function, that is, it is executed immediately after declaration. ({}).constructor //({}) forces the curly braces to be understood as object literals (semantic 2). "Object.xx" means obtaining the members of the object. Naturally, the subsequent dot operator can be executed normally.

function(){}(); The reason for the syntax error has nothing to do with the (); function call operator.

The essential reason is that function(){} effectively groups tokens according to the lexical analysis period. function is regarded as the first token element at the start position of this ExpressionStatement. This is not allowed by EMCA262. The reason why it is not allowed is very clear, that is, it is afraid of causing ambiguity between function expressions and function declarations. You can understand that the function keyword can never be at the first place in an ExpressionStaement.

Let’s take a look at the assignment statement f = function(){};

f : LeftHandSideExpression
= : AssignmentOperator

function(){}; At this time, it is regarded as the assignment expression part of the entire statement, which is AssignmentExpression. So it passed the grammar check reasonably and legally and became a function expression. FunctionExpression.

So at this time, even if you f = function(){}(); it is grammatically legal.

Related recommendations: javascript learning tutorial

The above is the detailed content of What is the usage of curly brackets in javascript. For more information, please follow other related articles on the PHP Chinese website!