Introduction to the difference between JavaScript code with and without semicolons

javascriptThe column introduces what is the difference between adding and not adding semicolon in the code

##Recommendation (free): javascript (Video)

This issue has been discussed in many articles, and is also divided into ESlint specifications based on whether to add a semicolon or not. Between the two camps, as for whether to add semicolons or not, the key is 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 can make some codes without adding semicolons. It can also run normally, such as the following example:

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

Since

in the code belongs to a unary expression, it can only be placed on the left side of the expression or the right side of Variables, if there is no ASI mechanism, the code will be converted into error statements such as var b = 1 b. But fortunately, with ASI, semicolons will be automatically added during actual operation, so the above error will not occur. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var b = 1; ++b; console.log('b', b); // 2</pre><div class="contentsignin">Copy after login</div></div>

The relationship between return and semicolon

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

return

to return value, what is the result of the operation? <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function fn() {   return    '小明' } console.log(fn())</pre><div class="contentsignin">Copy after login</div></div>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. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function fn() {   return;   '小明'; } console.log(fn()); // undefined</pre><div class="contentsignin">Copy after login</div></div>

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 happened in some places. It does not play its role (such as the immediate function introduced at the beginning of this article), resulting in errors in the code; even some codes will not make errors, but the execution results of your code will be thousands of miles away from expectations.

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

Rules that will not automatically add semicolons

are various below

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). <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// 运行错误 (function() { })() (function() { })()   // 正确 ;(function() { })() ;(function() { })()</pre><div class="contentsignin">Copy after login</div></div>

Summary

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

But I prefer stricter specifications, maybe because I am switching from back-end to front-end Yes, I’m 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.

The above is the detailed content of Introduction to the difference between JavaScript code with and without semicolons. For more information, please follow other related articles on the PHP Chinese website!