The difference between adding semicolons and not adding semicolons in JS code

This issue has been discussed in many articles. In the ESlint specification, it is also divided into two camps based on whether to add a semicolon or not. As for whether to add a semicolon or not, the key is You need to understand the impact of semicolons on JavaScript. Before you start, you can take a look at the following interview question:

Can this code run normally?

var a = 1
(function() {
  console.log(2)
})()

If you run this code, the following error will appear:

Uncaught TypeError: 1 is not a function

What the hell! 1 is not a function? We did not intend to run the number 1. Why is the number 1 not a function? This kind of error is difficult to find and often circles around the problematic line of code. This error must be because the code above is considered to be the same line at runtime. The concept is as follows:

var a = 1(function() { /* */ })()

Therefore the () of the immediate function is appended to 1, which is a The syntax for calling a function, so the error 1 is not a function will occur. If you want to avoid this error, you need to use a semicolon:

var a = 1 // 随便把分号放在哪里，只要能隔开就行
;(function() {
  console.log(2)
})()

ASI automatically adds a semicolon

ASI is the abbreviation of "Automatic Semicolon Insertion". During runtime, semicolons will be automatically inserted into some broken lines of code. This mechanism allows some codes to run normally without adding semicolons. For example, the following example:

var b = 1
++b
console.log('b', b)

Since

in the code belongs to a unary expression, it can only place variables on the left or right side of the expression. If there is no ASI mechanism, the code will be converted into an error statement like var b = 1 b. But fortunately, with ASI, semicolons will be automatically added during actual operation, so the above error will not occur.

var b = 1;
++b;
console.log('b', b); // 2

The relationship between return and semicolon

Let’s look at another example. In the following code, write the value to be returned after a blank line after

return. Then ask to run What happens in the end?

function fn() {
  return 
  '小明'
}
console.log(fn())

Due to the modification of ASI in this program code, a semicolon will be added after

return, so return is separated from the expected return value. The content of the result return is a null value, and the final result can only be undefined.

function fn() {
  return;
  '小明';
}
console.log(fn()); // undefined

How to deal with semicolons

Originally ASI was out of good intentions and was used to correct code fragments that did not include semicolons, but it did not play its role in some places. (For example, the immediate function introduced at the beginning of this article), resulting in errors in the code; even some codes will not cause errors, but the execution results of your code will be thousands of miles different from expected.

The way to solve the ASI problem is as follows:

In any case, you must add a semicolon. It is completely up to you to decide the split of the code.
• Remember that the semicolon will not be added automatically. Rules for semicolons, when semicolons are not automatically inserted, add them manually

will notrules for semicolons to be automatically added

The following are various

will not automatically add semicolon rules:

The code for the new line is from
1. (、[、/ characters start, this kind of situation will usually directly cause Uncaught TypeError, resulting in the code being unable to run.

var a = 1
var b = a
(a + b).toString()

var a = 1
[1,2,3].forEach(bar)
 
(function() { })()
(function() { })()
 
var a = 1
var b = a
/test/.test(b)

New lines begin with
1. , -, *, % Initially, most of these situations will affect the operation results, so they should be merged into one line.

var a = 2
var b = a
+a

New lines start with
1. , or .. This usage often occurs, mainly to avoid the separation of the code being too long. This situation will not affect Run, if used properly, the code will be easier to read.

var a = 2
var b = a
  .toString()
console.log(typeof b)
 
var a = 1
,b = 2 // b 同样会被 var 声明

If you encounter a situation where you need to add a semicolon, in addition to adding a semicolon at the end of the statement, you can also add the semicolon at the end of the statement. " Semicolon will not be automatically added" at the front, for example

() itself will not automatically add a semicolon. If you have such a need, you can add ; to the front (ESLint Standard The JS specification uses this method to avoid errors).

// 运行错误
(function() { })()
(function() { })()
 
// 正确
;(function() { })()
;(function() { })()

Summary

Some people think that not adding semicolons can make the code look cleaner and more streamlined, and in most cases it does not Errors will occur, so many people do not add semicolons when typing code.

However, I prefer stricter specifications, maybe because I moved from the back end to the front end and am used to it. As for How to choose? As long as you understand the operating restrictions, no matter which style is good, as long as you like it.

For more programming-related knowledge, please visit:

Introduction to Programming!!

The above is the detailed content of The difference between adding semicolons and not adding semicolons in JS code. For more information, please follow other related articles on the PHP Chinese website!