Home > Web Front-end > JS Tutorial > The difference between adding semicolons and not adding semicolons in JS code

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

青灯夜游
Release: 2020-11-24 17:54:44
forward
4237 people have browsed it

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)
})()
Copy after login

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

Uncaught TypeError: 1 is not a function
Copy after login

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() { /* */ })()
Copy after login

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)
})()
Copy after login

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)
Copy after login
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
Copy after login
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())
Copy after login
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
Copy after login
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.
  2. 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)
    Copy after login
    New lines begin with
  1. , -, *, % Initially, most of these situations will affect the operation results, so they should be merged into one line.
  2. var a = 2
    var b = a
    +a
    Copy after login
    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.
  2. var a = 2
    var b = a
      .toString()
    console.log(typeof b)
     
    var a = 1
    ,b = 2 // b 同样会被 var 声明
    Copy after login
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() { })()
Copy after login
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!

Related labels:
source:segmentfault.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template