Most of the time, we just need to focus on the business. How to use it is our main task, but if we study deeply, we will find that there is a specialized noun Abstract Syntax Tree, or AST, that we can never get around. So we’re going to try it today.

What is AST

In computer science, an abstract Syntax tree, or Syntax tree for short, is an abstract representation of the syntactic structure of source code. It represents the syntactic structure of a programming language as a tree, with each node in the tree representing a structure in the source code. —- Wikipedia

As you can see from the above, AST is a description of the syntax structure of a computer language. That is to say, JavaScript, Java, Python, Html, and even Css all need to go through AST, so it is important to see AST. This is just to give you a sense of how important the AST is, but we need to look at what it is.

The AST is actually an object for us. It does not record every detail of the real Syntax of the source language (for example, omits the delimiter). Hence the name “Abstract”. It is also called a parse tree because it contains all the information about the original syntax because the code is translated and parsed directly.

Why parse the source code into a generic object? Languages have a lot of syntax, but computers can’t read the code we write, so they need a common data structure to describe it, and AST is that thing. At the same time, because AST is real and logical, we can also do some articles and flower work on AST 🙂

2. How is AST generated

Let’s take a look at the Javascript parsing process.

First, ‘zhang SAN’ wrote the following code in vscode using his lifelong learning

const name = 'Joe';
function getTitle(){
  return 'Outlaw maniac' ;
};
Copy the code

In order to understand what Sam is saying, you need to parse this line of code. Parse takes place in two steps.

Lexical analysis: Parsing is the process of converting a char stream into a token stream. It splits every word in the code. For example, const name = ‘token stream’ is split into const name, =, ‘token stream’, You can check it out on Esprima: Parser.

Syntax analysis: After parsing the token stream, we can generate an AST by parsing the token. For example, const is a Declaration parameter, which is marked as Declaration, and so on, gradually converting into an AST. The AST can be viewed online through the AST Explorer.

Parses are tools used to parse source code into AST. Many parsers, such as Babel Parser, ESLint Parser, typescript Parser, etc., are based on estree standards with additional extensions. Then Acorn came along with faster parsing and support for plug-in extensions, so they started refactoring based on Acorn. So Babel and ESLint can now be customized by writing plug-ins.

3. AST structure

Now that we know the AST parsing process, let’s take a look at the structure of the AST, using Babel parsing as an example:

This is an AST structure with const name = ‘Sam’. As you can see from the top, the whole object is wrapped in Program, which is the node of the whole Program, and it has a body parameter that holds the child content of the Program

VariableDeclaration: declaration statement type, functional declaration, ExpressionStatement, etc. Start, end: indicates the location of the current content in the entire document flow. Loc: show the current content in line and column number range: said position, ditto leadingComments: comments list, annotation information will display here declarations: declarative statements showing the parameters of the statement information, kind: declared type...Copy the code

Since AST is an abstraction of source code, the source code contains identifiers, literals, expressions, statements, etc. There are corresponding mappings for AST, such as identifiers – > identifiers, literals – > literals, etc. For details, see the above website.

What is the use of AST

What is the use of AST? You probably use them every day, like Eslint, like Babel, and Typescript. Eslint has a lot of plugins that normalize code, and those plugins make changes to the AST to make things work. OK, so how do you modify the AST? Take hold.

Somebody, show me the map

Yes, it’s the same image, but now we’re going to focus on the middle part, where the Transform shines, where we modify the AST, and where the various Eslint and Babel plugins come alive. Since source code can be parsed into the AST, the AST can also generate source code, so we can modify the AST according to the specification, then we can get the desired effect, as for how to modify this time will not elaborate, if interested later I can write Eslint and Babel plug-in writing.

Five, to sum up

AST is very important, is we to the principle of the path, not very hard, but the various definitions is more, see more check will be able to understand, to understand and learn how to use the AST, you will find so many are using the principle of tool is obvious, even we can also write your own plugins, and even the parser, wish you all a happy ~

Hold on, I have one last word

Time is fair, because it gives everyone 24 hours.