The problem background

A few days ago the team had just unified the code specification through ESLint + Prettier +StyleLint. I’ve set the esLint fix to be executed on save via the editor and accidentally found an error…

But I didn’t need a semicolon in my team’s code, which I thought was pretty. I wanted to know the root cause of prettier’s error so I went on.

The function of the semicolon

A semicolon is also an execution statement, called a null statement. Semicolons are used to break sentences. Each semicolon marks the end of a program statement.

Zhihu has a cute code.

for(var i=1; i<=5; i++) { console.log(i) } for(var i=1; i<=5; i++); { console.log(i) }Copy the code

It should be easy to see

The first paragraph prints 1,2,3,4,5

The second piece of output is 6

The second “for” loop is added; After that, the code block after the for loop has nothing to do with the for loop. The code in the for loop, on the other hand, is all executed in an empty statement; The above.

Let’s look at the next piece of code

Var a = 4 var b = [1,2,3] [a] console.log(b)Copy the code

[1,2,3] [1,2,3]

It used to be that when the code was parsed, it became

Var a = 4 var b = [1,2,3][a] console.log(b)Copy the code

There is no line break to truncate the code.

It seems that adding and removing semicolons everywhere is risky. But why do I get an error without a semicolon in some places and without a semicolon in others? When querying the problem, Automatic Semicolon Insertion (ASI Automatic Semicolon Insertion) was found. This concept is described below.

Rules for adding semicolons

Every JavaScript statement should have a semicolon except the following.

  • Loop statements: for, while

  • Branch statements: if, switch, try

  • Function declarations (not function expressions)

In addition to these special statements, all statements should be semicolons, so our team rules are not wrong 😱😱😱? Wait, then it’s ASI.

ASI

Automatic insertion semicolon mechanism… When the code is parsed, the parser inserts the semicolon we forgot.

Not really!! (clap clap clap clap clap clap clap clap clap clap clap clap clap clap clap clap clap clap clap clap clap clap clap clap clap clap clap clap clap clap clap 👏👏👏)

There is no such thing as a semicolon in an abstract syntax tree. The insertion of semicolons is just a concept, meaning that the parser will use the newline as a basis for breaking sentences in addition to semicolons to ensure correct parsing, rather than actually inserting a semicolon (of course, when you compress your code locally, emMM should actually insert semicolons).

But ASI does not recognize all newlines as component numbers, but rather by following the rules.

Insert rule of ASI

The main premise, the program of ASI:

  • In exchange for behavioral basis. (You must have a line break.)

  • The JS parser tries to merge statements into the same line for parsing. Only when ASI rules are met, semicolons (;) are added to separate sentences.

1, the new line merged with the current line constitutes an illegal statement, automatically inserted semicolon.

If (true) a = 1 console.log(a) if(true) a = 1; console.log(a);Copy the code

This code explains the outline clearly.

A newline character must exist. If (true) a = 1 console.log(a) is an error.

Try to line up. It is not parsed into the following code.

if(true);
a = 1;
console.log(a);
Copy the code

Because the second line merged with the first line does not constitute an illegal statement.

2. Insert semicolons after continue, return, break, throw.

The line breaks following these statements are automatically inserted with semicolons.

Return 123; 123;Copy the code

This way of writing returns a lonely. That’s why it’s nice to have a () wrapped around your return when you return a lot of code.

The suffix expression starts a new line, and a semicolon is automatically inserted at the beginning of the line

Var a = 1 var b = 2 a ++ b ++b;Copy the code

If you want to write plus plus b that’s fine, but if you want to write a++. It turns out that b increases by itself. That’s why most code rules don’t recommend you use ++ –, but +=1,-=1.

4. When an disallowed line terminator or “} “occurs, a semicolon is inserted before it.

Function (){a = 1} function(){a = 1; }Copy the code

Next we need to know when ASI will not be triggered

Just a word

The new line begins with (, [, /, +, -, *, %,,.)

Since these symbols start, according to the first rule of ASI above, this line and the previous line will not form an illegal statement. For example [] is recognized as an attribute. () is recognized as a function execution statement.

The solution is to manually add a semicolon at the beginning of a new line.

Does ASI affect the efficiency of the code

There should be a little bit of impact when parsing, implementation is the same, no impact. But now projects are packed and compressed locally. So for the most part, don’t worry about these issues and just follow the team’s specifications.

So should we add a semicolon or not?

All this has nothing to do with the code specification, but with the ASI mechanism. Add a semicolon to see personal preferences, second look at team requirements. There is no right or wrong specification, but you should understand ASI.

The reference list

  • www.cnblogs.com/fsjohnhuang… ^_^ fat son John

  • Developer.mozilla.org/zh-CN/docs/…

Personal public account