Re-learn the front-end learning notes -- do you want a semicolon in JavaScript?

Keywords: Javascript Mobile

Note Notes

The front-end of re-education is a column run by Cheng Shaofi (former head of mobile phone Taobao front-end) in Geek time. Reconstruct your front-end knowledge system 10 minutes a day The author mainly collates some key notes and insights of the learning process, complete can join the winter column to learn [original Winter voice], if there is any infringement, please contact me, e-mail: kaimo313@foxmail.com.

I. Rules for automatic insertion of semicolons

1.1. Three Rules

  • If you need a newline character and the next symbol is not grammatical, try inserting a semicolon.
  • If there is a newline character and the grammar stipulates that there is no newline character here, the semicolon is inserted automatically.
  • At the end of the source code, if the complete script or module structure cannot be formed, the semicolon will be inserted automatically.

1.2. Examples

//There is a newline character at the end of the first line, and it is illegal for the void keyword to be followed by 1. According to the first rule, the newline character is inserted before the void.
let a = 1
void function(a){
    console.log(a);
}(a);
// According to the no Line Terminator here rule, A is followed by a semicolon.
var a = 1, b = 1, c = 1;
a
++
b
++
c
// a ==> 1  b,c ==> 2

1.3. Example no Line Terminator here rule demonstration

UpdateExpression[Yield, Await]:
    LeftHandSideExpression[?Yield, ?Await]
    LeftHandSideExpression[?Yield, ?Await][no LineTerminator here]++
    LeftHandSideExpression[?Yield, ?Await][no LineTerminator here]--
    ++UnaryExpression[?Yield, ?Await]
    --UnaryExpression[?Yield, ?Await]

1.4, IIFE (immediate functional expression)

(function(){
    console.log(1);
})()
(function(){
    console.log(2);
})()

// No semicolon, output results
// 1   Uncaught TypeError: (intermediate value)(...) is not a function

(function(){
    console.log(1);
})();
(function(){
    console.log(2);
})()

// Add semicolons, output results
// 1  2

// As for this problem, I have been searching for tens of minutes at that time. Because I had changed lines and commentaries before, I didn't understand them at that time, like the following.
(function(){
    console.log(1);
})()

// Handle... business
(function(){
    console.log(2);
})()

1.5. Notes with line breaks

// Comments with newline characters are also considered to have newline characters, and return s are also required by the [no Line Terminator here] rule, where semicolons are inserted automatically.
function f(){
    return/*
        This is a return value.
    */1;
}
f();

// undefined

II. No Line Terminator here Rule

The no Line Terminator here rule indicates that this position in its structure cannot be inserted into a newline character.

2.1. continue statement with label

// You cannot insert a newline after continue.
outer:for(var j = 0; j < 10; j++)
    for(var i = 0; i < j; i++)
        continue /*no LineTerminator here*/ outter

2.2,return

function f(){
    return /*no LineTerminator here*/1;
}

2.3. Post-auto-increasing and post-auto-decreasing operators

i/*no LineTerminator here*/++
i/*no LineTerminator here*/--

2.4, throw and Exception

throw/*no LineTerminator here*/new Exception("error")

2.5, async keywords

// You can't insert newline characters after that.
async/*no LineTerminator here*/function f(){

}
const f = async/*no LineTerminator here*/x => x*x

2.6. Arrow function

// You can't insert a newline before the arrow of the arrow function
const f = x/*no LineTerminator here*/=> x*x

2.7,yield

// After yield, line feeds cannot be inserted
function *g(){
    var i = 0;
    while(true)
        yield/*no LineTerminator here*/i++;
}

3. Noticeable situations in not writing semicolons

3.1. Statements beginning with parentheses

(function(a){
    console.log(a);
})()/* There is no semicolon inserted automatically. */
(function(a){
    console.log(a);
})()

3.2. Statements starting with arrays

var a = [[]]/* There is no semicolon inserted automatically. */
[3, 2, 1, 0].forEach(e => console.log(e))

3.3. Statements that begin with regular expressions

// Regular Edge Division Number
var x = 1, g = {test:()=>0}, b = 1/* There is no semicolon inserted automatically. */
/(a)/g.test("abc")
console.log(RegExp.$1)

3.4. Statements starting with Template

// Without an automatic semicolon insertion, function f is considered to be Template and will be executed.
var f = function(){
  return "";
}
var g = f/* There is no semicolon inserted automatically. */
`Template`.match(/(a)/);
console.log(RegExp.$1)

Personal summary

Like winter, it is also a semicolon party.

Posted by twsowerby on Thu, 06 Jun 2019 12:27:44 -0700