The javascript column introduces the difference between the code with or without a semicolon
Recommended (free): javascript (video)
This issue has been discussed in many articles. In the ESlint specification, it is divided into two camps because of adding or not adding a semicolon. The key is to understand the impact of semicolon on JavaScript. You can First 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 it said that the number 1 is not a function, this kind of error is difficult to find the cause, often in the wrong line of code. This error must be the above code is regarded as 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 syntax for calling a function, so an error of 1 is not a function will be generated. To avoid this error, you need to use a semicolon:
var a = 1 // 随便把分号放在哪里，只要能隔开就行
;(function() {
console.log(2)
})()
ASI 自动加入分号
ASI is the abbreviation of "Automatic Semicolon Insertion". It will automatically insert semicolons into the code with some broken lines during runtime. This mechanism can make part of the code run normally without adding semicolons, such as the following example:
var b = 1
++b
console.log('b', b)
Since ++ in the code is 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 to an error statement such as var b = 1 ++ b. Fortunately, there is ASI, which will automatically add a semicolon during actual operation, so the above error will not occur.
var b = 1;
++b;
console.log('b', b); // 2
return 与分号的关系
Let's look at another example. The following code writes the value to be returned after a blank line after return. What is the result of the operation?
function fn() {
return
'小明'
}
console.log(fn())
Because of the ASI amendment, a semicolon is added to the end of return, so the return is separated from the expected return value. As a result, the content of return is empty, and the final result can only be undefined.
function fn() {
return;
'小明';
}
console.log(fn()); // undefined
How to deal with semicolons
Originally, ASI was kindly used to correct code snippets that did not include a semicolon, but it did not play its role in some places (such as the immediate function introduced at the beginning of this article), resulting in errors in the code; Some code will not go wrong, but will make your code execution results and expected.
The way to solve the ASI problem is as follows:
In any case, you must add a semicolon, and it’s up to you to decide the code division.
Remember the rule that a semicolon will not be automatically added. When a semicolon will not be automatically inserted, manually add
it. The rule will not be automatically added to a semicolon.
The following rules will not automatically add semicolons:
The new line of code starts with (, [, / characters. In such cases, Uncaught TypeError will usually occur directly, which will cause the code to fail 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)
The new line starts with +, -, *, %. Most of these situations will affect the calculation result, so it should be merged into one line.
var a = 2
var b = a
+a
New lines start with, or.. This usage often appears, mainly to avoid the separation of the code being too long. This situation will not affect the operation, and if used properly, it will make the code 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 to the front of "Semicolon will not be automatically added". For example, () itself will not automatically add a semicolon. You can add; to the front when there is such a requirement (ESLint Standard JS specification uses this method to avoid errors).
// 运行错误
(function() {
})()
(function() {
})()
// 正确
;(function() {
})()
;(function() {
})()
to sum up
Some people think that not adding a semicolon can make the code look cleaner and concise, and in most cases there will be no errors, so many people do not add a semicolon when typing the code.
But I prefer stricter specifications, perhaps because I am used to switching from the back end to the front end. As for how to choose, as long as you understand the restrictions on the operation, no matter which style is quite good, as long as you like it.
This article comes from the JavaScript section of PHP Chinese website : https://www.php.cn/course/list/17.html