Walk into javascript humble foundations values and semicolons

  • 2021-07-24 09:42:12
  • OfStack

Value

Sometimes I wonder how the javascript parsing engine distinguishes the values of a variable, such as the following code.


var x = 'javascript'; //javascript
x = "hello"; // hello
x = 555; //555
x = null; //null
x = a; //a is not defined
x = true; //true

The number is assigned directly, because it has no diversity, and the number is the number. However, it is difficult to distinguish when the value is in English, because in a programming language, English may be either a string or another variable referenced. Therefore, how to distinguish between variables and strings is particularly important. Programming languages often enclose strings in quotation marks, so as to distinguish variables from strings. Some languages, such as java, also distinguish between single quotation marks and double quotation marks. Single quotation marks enclose a character, while double quotation marks enclose a string. However, javascript does not distinguish between characters and strings, but treats them all as strings, so there is no difference between single quotation marks and double quotation marks in javascript.

Although quotation marks can be used to distinguish variables from strings, values may often be one keyword. For example, in the above code, I assigned x to null, so how do these programming languages distinguish variables from keywords?


null = 123;
console.log(null); //Uncaught ReferenceError: Invalid left-hand side in assignment
undefined = 456;
console.log(undefined); //undefined

Above, I assigned another value to null and undefined respectively. As a result, the assignment to null reported an error, and the assignment to undefined did not report an error, but it was unsuccessful. Maybe for null and undefined, they are values. Variables are looking for values. When we talk about how javascript distinguishes variables from keywords, it may eventually become how javascript distinguishes variables from values.

Semicolon

In some JS plug-ins, you often see one line of code like the following


;(function(){
 .........
})();

There is a semicolon at the front of the code, so what is this semicolon for?

We know that a semicolon represents the end of a piece of code, But the problem is that javascript allows you not to write semicolons, so there is a problem. Whether the code ends or not is not decided by you but by the program, and the program is not omnipotent. Often it is just a rule. If the code you write does not conform to its rules, the final result will be somewhat unsatisfactory.

The following are javascript resolution rules for omitted semicolons


var a
=
1 + 2
console.log(a) //3

The javascript parser parses the above code into


var a = 1 + 2;
console.log(a); //3

If javascript does not add a semicolon after 2, it will not be parsed. It can also be said that if it cannot be parsed, javascript parser will try to add 1 semicolon to it, and if it still cannot be parsed, it will report an error. Another example is the following 1 code


var a = 10;
var b = 5;
var c = a + b
(a + b).toString()
// b is not a function

It says that b is not a function, which means that the above code is likely to be parsed into the following code


var a = 10;
var b = 5;
var c = a + b(a + b).toString();

It treats () as a function call. It can also be understood that javascript parser will match as much as possible, but there are several exceptions, they are retrun, break, continue. When javascript parser parses these keywords, it will not take the content after the line break as its own, but directly add semicolons before the line break. Let's take a look at the following code


function test(){
 return 
 123;
}
console.log(test()); //undefined

It doesn't return 123, which means it adds a semicolon directly after retrun.

Looking back, why do plug-in developers add a semicolon to line 1 of the code?

Since it is a plug-in, it is naturally for others to use, right, but the key problem is that you don't know how the people who use this plug-in write its code, which seems to be quite fallacious. What does its code have to do with us?

If the user's code affects our code, how does it affect it? For example, we are writing 1 piece of code like the following


<script src="test.js"></script>
<script src="zmz.js"></script>

The first script is written by the user himself, and the second script is an imported plug-in. How does the browser parse these two scripts? Let's test 1

test.js


var a
a

zmz.js


null = 123;
console.log(null); //Uncaught ReferenceError: Invalid left-hand side in assignment
undefined = 456;
console.log(undefined); //undefined
0

If you run it, you will find that there is no error, which means that the javascript parser will not parse with the code in the next file because the previous file does not have a semicolon.

That's not the problem, but maybe you just read a book about HTTP. Wow, merging files can reduce the number of requests, so these two scripts are merged into one. Shake 1 becomes the following


null = 123;
console.log(null); //Uncaught ReferenceError: Invalid left-hand side in assignment
undefined = 456;
console.log(undefined); //undefined
1

Do you think this is not wrong? If we put a semicolon at the beginning of 1 in the plug-in, this kind of thing can't happen.


null = 123;
console.log(null); //Uncaught ReferenceError: Invalid left-hand side in assignment
undefined = 456;
console.log(undefined); //undefined
2

So don't think of a semicolon as just to end a piece of code, it can also be used to isolate a piece of code from others.


Related articles: