A “lexical structure” is a set of rules in a programming language that dictate how programs are written in that language.

Today I’ll introduce you to the lexical structure of JavaScript.

The coverage is as follows:

  • annotation
  • Case discrimination, Spaces, and newlines
  • What is a literal
  • What is Unicode and what does it do
  • Are there any reserved words
  • What is the identifier
  • Optional semicolons, really

annotation

JavaScript supports two types of comments: single-line comments (//) and multi-line comments (/**/).

// This is a single line comment /* this is a multi-line comment */ * this is a multi-line comment */Copy the code

Case discrimination, Spaces, and newlines

case

JavaScript is case sensitive. This means that for is not the same as for or for

The blank space

JavaScript ignores Spaces between tokens in programs. Line breaks are also largely ignored.

One might ask the Spaces between tokens in the program, tokens what is this? A token is a keyword, variable name, number, function, or other entity. Let’s look at the following example:

Keywords, functions

for(var i = 0; i< 5; i++){ console.log(i); } for (var i = 0; i< 5; i++){ console.log(i); } for (var i = 0; i< 5; i++){ console.log(i); } function a(){console.log(" console.log ")} function a(){console.log(" console.log ")} a(); Function a (); Function a (); / / I'm a functionCopy the code

Not only are functions ignored when declared and keywords used, but functions are also ignored when called.

Many of us are used to writing functions with a space, but we never knew it was part of “lexical structure”.

Now, what’s the point? Are there usage scenarios? Look at this one down here

<a-input-password v-model="form.passWord" :maxLength="20" @change="(e, val) => handleInputChange(e, 'passWord')" @pressEnter="handleSubmit" ><a-icon slot="prefix" type="lock" /></a-input-password> <a-input-passwordv-model="form.passWord":maxLength="20"placeholder=" @change="(e,val)=>handleInputChange(e,'passWor ') d')"@pressEnter="handleSubmit"><a-icon slot="prefix" type="lock"/></a-input-password>Copy the code

I believe you all like the previous way of writing, right? This is the scenario we don’t even know about. This also shows that newline characters are largely ignored.

Number, variable name

var a = 1 ; console.log(a); // 1 var b = 2, c = 3; console.log(b,c); / / 2, 3Copy the code

In fact, people use it all the time but they don’t know what they’re using.

What is a literal

As the name suggests, directly through some data values that appear on the program. Such as:

  • 10
  • null
  • undefined
  • true
  • false
  • ‘Hello,’
  • ‘hello,’

What is the Unicode

Unicode is a fairly common word but what is it? What’s the use? So let’s talk about it.

Because computers deal only with numbers, and Unicode specifies a number to store letters or other characters, Unicode provides a unique number for each character, regardless of platform, program, or language.

Let’s look at escape sequences

JavaScript defines escape sequences, so ASCII characters can be used to represent Unicode characters.

The usage starts with \u and is followed by four hexadecimal digits (including uppercase or lowercase literals A to F) or one to six hexadecimal digits enclosed in A pair of curly braces. I think a lot of people don’t understand what this is, so let’s look at an example.

The Unicode escape sequence for the character “e” is \u00E9. Then look at

Unicode escape sequences can appear in JavaScript string literals, regular expression literals, and identifiers (not in language keywords). Let’s look at examples

let \u00E9 = 1; let \u{E9} = 1; The console. The log (e); / / 1Copy the code

That is, we can use Unicode escape sequences for variable names, regular expression literals, and identifiers.

If you don’t understand, I think you can try these lines on the browser console, which is very quick and easy.

Ok, the scene problem, I suggest you personally knock on this code. I wish you all a happy day

console.log("\u{1F600}"); / / "😀"Copy the code

This is the closest we can get, so remember that when you need some special notation.

Unicode normalization

How can there be normalization? Unicode allows multiple encodings to represent the same character in programs other than ASCII characters. Let’s look at examples:

const \u{e9} = 1; const e\u{301} = 2; The console. The log (e); / / 1 console. The log (e); Console. log(c\u{301}); / / levelCopy the code

So now you can see the normalization, right? Although the computer can distinguish them, but our actual development if there is a difficult to distinguish, after all, look the same, just like two computers look the same, the heart is not the same, it will inevitably mistake it.

Reserved words

In JavaScript, some identifiers are reserved words and cannot be used to name variables, constants, functions, or classes.

Let’s make a distinction here. After all, there are absolutes and non-absolutes.

Must not be used (but can be used as an object property)

  • if
  • while
  • for

To be used in a completely ungrammatical mood

  • from
  • of
  • get
  • set

In fact, the simplest way is not to use the following reserved word

What is the identifier

A sequence of characters in code that identifies a variable, function, or attribute. The variables we normally define, the functions we declare, the properties we add.

The identifier can contain only letters or numbers or underscores (‘_’) or dollar matches (‘$’), and cannot start with a number.

Optional semicolons, really?

Why optional semicolons? This is because JavaScript automatically recognizes the end of a statement, but the lack of a required semicolon can reduce the readability and neatness of your code and sometimes lead to errors.

Such as:

{
  let a = 1
  let b = 2
}

let a = 1letb = 2   // SyntaxError: Invalid or unexpected token
Copy the code

This works fine without a semicolon in braces, and it follows the rules, but when code is written on the same line it causes an error

Sometimes it can lead to misunderstandings

// let a a = 3 console.log(a) // 3 // let a; a = 3; console.log(a);Copy the code

There are also situations that can lead to accidents

// Let y = x + f(a+b).toString()Copy the code
// True intention return true; // error interpreting newline as semicolon return; true;Copy the code

Therefore, a semicolon should be added proactively to indicate the end of the statement, rather than relying on automatic JavaScript recognition.

This article is all about the things you do all the time in development, but have you noticed that there are some things that we just know how to use, but we don’t know what’s behind it.

If it helps you move your finger to 👍.