Parsing the ambiguity of curly braces "{}" in JavaScript

Source: Internet
Author: User

There are four semantic functions of the curly braces in JS

Semantic 1, the organization of compound statements, which is the most common

Copy the Code code as follows:

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

Semantics 2, Object Direct Volume declaration

Copy the Code code as follows:

var obj = {
Name: ' Jack ',

The whole is an assignment statement, where {name: ' Jack ', age:23} is an expression.

Semantics 3, declaring a function or function direct amount

Copy the Code code as follows:

Function F1 () {
var F2 = function () {

The difference between F1 and non-F2 is that the former is in the grammatical interpretation period, the latter in the running period. The difference is that if the code calling the function is after the function definition, then there is no difference; if the code calling the function is before the function definition, then F1 can still be called, and F2 will error, prompting F2 undefined.

Semantic 4, Syntax notation for structured exception handling

Copy the Code code as follows:

try {
}catch (ex) {

There is a difference between the curly brace and the conforming statement (semantics 1), if there is only one statement in the curly braces, the curly braces can be omitted in the if/else/for, but try/catch/finally cannot be omitted.

The following code tangled even n long

Copy the Code code as follows:

function () {} ()//Anonymous functions immediate execution, parsing period
{}.constructor//Get the constructor of object's direct amount, parse period error

It is puzzling why [].constructor writes without error, a constructor that wants to get the direct amount of the object, and a constructor that gets the direct amount of the array.

Of course, add a variable to receive will not error

var c = {}.constructor;

The same situation as

The var fn = function () {} () does not error.

In fact, JS's "statement precedence" in the mischief, that is, {} is understood as a compound statement block (semantics 1) instead of the object direct amount (semantics 2) or the semantics of the Declaration function (semantics 3).

function () {} (), the curly brace is interpreted as a compound statement, and the function () in front of nature declares that the syntax of the functions is incomplete resulting in a parsing period error.
{}.constructor, curly braces are interpreted as compound statements, the braces are followed by dot operators, and there is no reasonable object before the dot operator.

Fixes are well known: Add a mandatory operator ()
(function () {}) (), (function () {}),//force it to be understood as a function (semantics 3), "functions ()" means executing the function, which is executed immediately after the declaration.
({}). constructor//({}) forces the braces to be interpreted as the direct amount of the object (semantics 2), "object. xx" means to get the member of the object, and the point operator after nature can execute normally.

Parsing the ambiguity of curly braces "{}" in JavaScript

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.