Like the sweet and salty dispute over zongzi, there is also a dispute between the semicolon party and the non-semicolon party at the front end. The semicolon party thinks that the front-end code must be semicolon, and the non-semicolon party thinks that it can not be semicolon when it is not necessary. This article will briefly discuss this problem with JavaScript.

Question origin

JavaScript does not require Semicolon Insertion at the end of each statement. In most cases, the JavaScript engine can identify the end position of a statement and automatically insert Semicolon Insertion. This process is called Automatic Semicolon Insertion (ASI). However, not all statements can omit semicolons, because ASI parsing rules can cause code exceptions in some cases.

We often see libraries that start with a semicolon, such as:

; (function () {}) ()Copy the code

If there is no front; An error occurs when this code is merged with other code:

var name = 3
(function () {}) ()// Because there is no semicolon, the above statement will be parsed into the following statement, resulting in an error
var name = 3(function () {}) ()Copy the code

If you don’t have a semicolon, be careful to add a semicolon to statements starting with + – [(/), and to place the semicolon at the beginning of the line.

The fact that semicolons are not required in the ECMAScript specification, the different habits of developers, and the inability of JavaScript to completely avoid semicolons have all converged to create a disagreement on this issue.

The difference between

Advanced JavaScript Programming (Version 4) contains the following description (see page 22) :

A semicolon at the end of a statement should be added even if it is not required. Remember to add a semicolon to help prevent problems with ellipsis, such as incomplete input. In addition, adding semicolons makes it easier for developers to compress code by removing empty lines (if there is no trailing semicolon, removing only empty lines will result in a syntax error). Semicolons can also help improve performance in some cases, as parsers try to fill in semicolons in the right places to correct syntax errors.

Where, “semicolon helps prevent problems caused by ellipsis” means that every line of code is added with a semicolon to avoid errors caused by the lack of a semicolon in some cases. At present, JavaScript code on the page almost needs to be compressed by tools such as Webpack, and whether the compressed code retains semicolons is generally configurable. Therefore, for non-semicolons, you can choose to include semicolons in the compressed code so that the parser performance is not affected.

Code specification

Semicolons are also restricted in different code specifications.

In the Google JavaScript Style Guide code specification, a semicolon is required.

A semicolon must be added to the Airbnb JavaScript Style Guide code specification:

// https://github.com/airbnb/javascript#semicolons
// https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/style.js
semi: ['error'.'always']
Copy the code

In the JavaScript Standard Style code specification, semicolons are not allowed:

// https://github.com/standard/standard/blob/master/RULES.md#semicolons
// https://github.com/standard/eslint-config-standard/blob/master/eslintrc.json
"semi": ["error"."never"]
Copy the code

The Airbnb JavaScript Style Guide and JavaScript Standard Style restrictions on semicolons are both based on ESlint Semi, but interestingly, the rules are the opposite, And both specifications are used by a large number of developers.

Daniel view

Should a semicolon be used after a JavaScript statement? In, brought together a number of front end big bull’s answer, we can do some reference.

Yu Bo believes that when in Rome, do as the Romans do is an attitude:

Look at the project, if it’s an unadded project, don’t add it, like Zepto if it’s an added project, add it, like jquery 4 space and 2 space, I’m used to both styles

Rain Creek is staunchly non-semicolon:

There is no should or shouldn’t, only you like it or not… Vue. Js code all without semicolons… Besides, at my urging prettier 1.0 now supports no semicolon option, the cost of migrating between styles is close to zero

The final summary

Although individual development habits and styles vary, they need to be consistent on the same project or agreed within the team. Formatting tools and editor plugins automatically handle semicolons, making it easy to unify code styles.

Reference documentation

  • 262. ecma-international.org/6.0/#sec-au…
  • Stackoverflow.com/questions/7…
  • Developer.mozilla.org/en-US/docs/…
  • Eslint.org/docs/rules/…
  • Google. Making. IO/styleguide /…
  • Github.com/standard/st…
  • www.zhihu.com/question/20…
  • Github.com/twbs/bootst…
  • Github.com/airbnb/java…
  • Slides.com/evanyou/sem…
  • 2 ality.com/2012/09/exp…
  • www.zhihu.com/question/26…

Follow public account