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)

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

Uncaught TypeError: 1 is not a function

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

() 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

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)

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>

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

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

, 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>

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:

• Remember that the semicolon will not be added automatically. Rules for semicolons, when semicolons are not automatically inserted, add them manually

are various below

automatically add semicolon rules:

(
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)

   Copy after login

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

   Copy after login

,
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 声明

   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). <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>

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!