Some details about semicolons in JavaScript

Preface

Semicolons in JavaScript are optional, and whether or not to use them is primarily a matter of coding style. One style is to use semicolons to explicitly end statements, even if they are not required; another style is to avoid semicolons as much as possible and only add them when necessary. I personally don’t like adding semicolons, but of course there are many friends who like it. Whichever style you prefer, there are some details about semicolons in JavaScript that you need to know.

The role of semicolons in code

The main function of the semicolon is: as a statement assertion (EOS) to end a program statement, the purpose is to allow the parser to correctly parse the program. In many C-Style languages, a semicolon is used to explicitly end a line of statements, mainly to reduce the cost of language compiler development. But modern compilers are smart enough to handle multi-line statements well. Many languages ​​do not require explicit semicolon endings, such as Go, Scala, Ruby, Python, Swift, Groovy, etc.

Although JavaScript is a C-like language, it is different from C and Java. Semicolons are also optional in JavaScript, and it has an automatic semicolon insertion mechanism called Auto Semicolon Insertion (ASI).

JavaScript automatic semicolon insertion mechanism

JavaScript has a mechanism called Automatic Semicolon Insertion, or ASI for short. There is a clear statement about Automatic Semicolon Insertion in ECMA-262 - Automatic Semicolon Insertion:

Parse the program from left to right. When a token (offending token) that does not conform to any grammar production rule is encountered, a semicolon is automatically inserted in front of the offending token as long as one of the following conditions is met:

• At least one line terminator separates the offending token from the previous token.
• The offending token is }.
  

Parse the program from left to right, the tokens input stream has ended, and when the parser cannot parse the input token stream into a single complete ECMAScript program, a semicolon is automatically inserted at the end of the input stream.

Parse the program from left to right. When encountering a token that is allowed by some grammar production rules, but it is a restricted operation (Restricted Productions), when at least one newline character separates the restricted token from the previous token, a semicolon is automatically inserted before the restricted token.

However, the above rule has an additional precedence condition: if the result of parsing after inserting the semicolon is an empty statement, or if after inserting the semicolon it becomes one of the two semicolons in the head of the for statement, then no semicolon is automatically inserted.

Note: The above translation is a bit awkward. You can read it several times or read the original English text ECMA-262 - Automatic Semicolon Insertion

Automatic semicolon insertion

To summarize briefly, automatic semicolon insertion is based on line breaks. The parser will try to merge new lines into the current line. New lines will be treated as independent statements only when they comply with ASI rules.

The main automatic insertion rules are as follows:

1. When a new line is merged into the current line, it will constitute an illegal statement and cannot be parsed correctly. A semicolon will be automatically inserted.
2. When a new line starts with }, a semicolon is automatically inserted at the end of the code block.
3. When ending with a return statement, a semicolon is automatically inserted at the end of the line
4. When ending with a break statement, a semicolon is automatically inserted at the end of the line
5. When ending with a throw statement, a semicolon is automatically inserted at the end of the line
6. When ending with a continue statement, a semicolon is automatically inserted at the end of the line
7. Automatically insert a semicolon at the end of a line when ending with an ES6 yield statement
8. ++, -- The suffix expression is used as the beginning of a new line, and a semicolon is automatically inserted at the beginning of the line
9. Automatically insert a number at the end of the source code file
   

As shown above, if the semicolon is not added, running this code will result in an error.

Semicolons cannot be omitted

Usually, if a statement starts with (, [, /, +, -, it may be interpreted as part of the statement on the previous line. In practice, there are very few statements that start with /, +, -. However, statements that start with (, [ are very common, and I can usually defensively add a semicolon at the beginning of the line.

Earlier, we learned about automatic semicolon insertion. Now let's look at some examples.

let hey = 'hey'
['liu','liuxing'].forEach(console.log)

Think about it for one second. What is the result above? Running this code throws

Uncaught TypeError: Cannot read property 'forEach' of undefined

Based on rule 1, the above code will be parsed into the following code

let hey = 'hey'['liu','liuxing'].forEach(console.log)

It can be seen that using a statement starting with [ without a semicolon in front is likely to cause an error.

Let's look at another example code of a statement starting with (

const a = 1
const b = 2
const c = a + b
(a + b).toString()

Would you expect the code above to produce a value of "3"? But in fact it will throw an error b is not a function, because according to ASI rules, it will be parsed into the following code:

const a = 1;const b = 2;const c = a + b(a + b).toString()

We will not introduce the cases where /, +, - are used as the beginning of a statement one by one. This situation is relatively rare, so you can try it yourself. Just remember that when a statement starts with (, [, /, +, or -, you need to add a semicolon before the statement!

Next, let’s look at the use of return.

(() => {
  return
  {
    name: 'Liu Xing'
  }
})()

Your expectation is to return an object with name, but it returns undefined. This is because ASI automatically adds a semicolon to the return. This is where you need to wrap your lines correctly to ensure the code runs correctly. We can see that in addition to correct semicolons, we also need correct and reasonable line breaks to make the code structure clearer.

Summarize

We have learned about JavaScript's automatic semicolon insertion mechanism, and know when JavaScript will automatically add semicolons. We need to accurately add semicolons at the beginning of (, [, /, +, and -. The Automatic Semicolon Insertion mechanism provides us with two options, add or not add semicolons? It depends entirely on your or your team's preference. Now we also have tools such as prettier and Eslint to automatically unify the style.

This is the end of this article about semicolons in JavaScript. For more relevant JavaScript semicolon content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!