Course overview

Introduction

What is an Abstract Syntax Tree? Visualizing Code Like a Compiler

How to View Abstract Syntax Tree Code With AST Explorer

The Best JavaScript AST Tools - ESLint, Babel, Terser, and More

Environment setup

Understanding Abstract Syntax Trees (AST)

How to Generate a JavaScript AST With Babel Plugins

Traversing an AST With Babel Traverse

Add Type Safety and Prevent Runtime Errors With AST

Working with Abstract Syntax Trees

Practical code audits

How to Audit Your Code With AST Programming

How to Add a Component and Update an AST

When to Use Abstract Syntax Tree Tooling to Refactor at Scale

Code Audits

How to Mutate an AST and Automatically Replace Code Components

How to Create Codemods Using jscodeshift

How to Unit Test jscodeshift Transforms With ts-jest

Codemods

How to Ensure Codebase is Up to Date With Linting Rules

How to Use ESLint to Create AST Rules With Babel Traverse

How to Test Custom ESLint Linting Rules With AST

Linting

node.js

In this course, we'll start with the fundamentals of abstract syntax trees (ASTs) and learn the basic mental models. This general AST knowledge can be translated to almost any tool that works with ASTs.

## Why this course?

Understanding and using ASTs unlocks the ability to make sweeping changes in a safe and reliable way in any size codebase.

## Course topics

Throughout this course, we'll have converted source code into ASTs, traversed, mutated, and generated ASTs. With these concepts we'll then explore several practical applications including things like code audits (static analysis), code transformations (codemods), and linting.

### Module 1

We'll learn the fundamentals of abstract syntax trees. 

- What is an AST?
- How to explore an AST
- Examples of JavaScript tools that work with ASTs

### Module 2

We'll learn how to work with ASTs.

- How to turn code into an AST
- How to programmatically navigate any AST 
- How to leverage TypeScript to prevent runtime errors

### Module 3

We'll learn how to statically analyze, or "audit" code to understand the state of the codebase using abstract syntax trees.

- An introduction to an example codebase and refactor
- Understanding the state of the current codebase
- When to use an AST-based tool versus doing something manually

### Module 4

We'll learn how to transform, or "codemod" code from one state to another using abstract syntax trees.

- How to make changes to an AST
- How to change ASTs with [jscodeshift](https://github.com/facebook/jscodeshift)
- How to test a code transform

### Module 5

We'll learn how to write rules, or "lint" code using abstract syntax trees.

- How to create rules for code
- How to create custom rules with [ESLint](https://eslint.org)
- How to test a rule

In this course, you'll learn the fundamentals of abstract syntax trees, what they are, how they work, and dive into several practical use cases of abstract syntax trees to maintain a JavaScript codebase.

Practical Abstract Syntax Trees

JavaScript tools that work with abstract syntax trees

How to parse, traverse, and generate abstract syntax trees

Practical skill set for maintaining large JavaScript codebases

In the previous lesson, we wanted to log all of the numeric values in the source code. The resulting script may have looked something like the following.

const { parse } = require("@babel/parser");

const code = "2 + (4 * 10)";

const ast = parse(code);

console.log(ast.program.body[0].expression.left.value); // 2
console.log(ast.program.body[0].expression.right.left.value); // 4
console.log(ast.program.body[0].expression.right.right.value); // 10

What would happen if the order of operations was swapped in the source to do the addition first, then multiplication?

Changing the order of operations will result in a different AST.

. Compare this tree diagram with the previous lesson.

Each type of node only defines properties relevant to what it represents. For example, a 

 property to indicate either addition or multiplication. However, a 

 property since it represents only a number, but it does have a 

Each property can have several different types of values. For example, the 

 property is always a number. Whereas the 

 properties are always another node. As seen in this example, the 

 properties can be more than one type of node (

The parser script made assumptions about the structure of the tree and the types of nodes. It assumed the first 

Looking at the tree above, we can see this is no longer the case. Now, 

console.log(ast.program.body[0].expression.right.left.value);
// TypeError: Cannot read property 'value' of undefined

To make our script more flexible, we need a way to "generically" visit a specific type of node in the tree, wherever in the hierarchy it may be.

 package offers the functionality to programmatically visit nodes anywhere in the tree that represent a numeric literal.

First, add the package in the existing project.

# Install the @babel/traverse package as a dependency
npm i @babel/traverse

---
title: Traversing an AST With Babel Traverse
description: Programmatically traverse an AST and visit arbitrary nodes
privateVideoUrl: "https://fullstack.wistia.com/medias/vcrygdf9ri"
---

# Traversing an AST

In the previous lesson, we wanted to log all of the numeric values in the source code. The resulting script may have looked something like the following.

```javascript { actualFilename=./protected/babel-parser-demo/previous-parser.js endChar=298 endLine=10 startChar=0 startLine=1 statedFilename=parser.js url=https&#x3A;//gitlab.com/fullstackio/books/practical-ast-and-codemods/module_02/lesson_02.02/protected/babel-parser-demo/previous-parser.js }
const { parse } = require("@babel/parser");

const code = "2 + (4 * 10)";

const ast = parse(code);

console.log(ast.program.body[0].expression.left.value); // 2
console.log(ast.program.body[0].expression.right.left.value); // 4
console.log(ast.program.body[0].expression.right.right.value); // 10
```

What would happen if the order of operations was swapped in the source to do the addition first, then multiplication?

```javascript { actualFilename=./protected/babel-parser-demo/parser-runtime-error.js endLine=3 startLine=3 statedFilename=parser.js url=https&#x3A;//gitlab.com/fullstackio/books/practical-ast-and-codemods/module_02/lesson_02.02/protected/babel-parser-demo/parser-runtime-error.js#L3 }
const code = "(2 + 4) * 10";
```

Changing the order of operations will result in a different AST.

![generated AST visualization](https://d2uusema5elisf.cloudfront.net/courses/practical-abstract-syntax-trees/module_02/lesson_02.02/public/assets/generated-ast-visualized-operations-swapped.png)

Previously, `4` and `10` were multiplied first, then added to `2`. Now, `2` and `4` are added first, then multiplied with `10`. Compare this tree diagram with the previous lesson.

This time, the first `BinaryExpression` has another `BinaryExpression` on the `left`, and a `NumericLiteral` on the `right`. Additionally, the `operator` is now a multiplication sign (`*`).

Each type of node only defines properties relevant to what it represents. For example, a `BinaryExpression` has an `operator` property to indicate either addition or multiplication. However, a `NumericLiteral` does not have an `operator` property since it represents only a number, but it does have a `value` property (which a `BinaryExpression` does not).

Each property can have several different types of values. For example, the `NumericLiteral` `value` property is always a number. Whereas the `BinaryExpression` `left` and `right` properties are always another node. As seen in this example, the `left` and `right` properties can be more than one type of node (`NumericLiteral` or another `BinaryExpression`).

The parser script made assumptions about the structure of the tree and the types of nodes. It assumed the first `BinaryExpression` had another `BinaryExpression` in the `right` property. That `BinaryExpression` had a `NumericLiteral` in the `left` property.

Looking at the tree above, we can see this is no longer the case. Now, `expression.right` will return a `NumericLiteral` instead of a `BinaryExpression`. Accessing the `left` property will return `undefined` since `left` doesn't exist on a `NumericLiteral` node. Finally, trying to access `value` of `undefined` will throw a runtime error.

```javascript { actualFilename=./protected/babel-parser-demo/parser-runtime-error.js endLine=9 startLine=8 statedFilename=parser.js url=https&#x3A;//gitlab.com/fullstackio/books/practical-ast-and-codemods/module_02/lesson_02.02/protected/babel-parser-demo/parser-runtime-error.js#L8 }
console.log(ast.program.body[0].expression.right.left.value);
// TypeError: Cannot read property 'value' of undefined
```

To make our script more flexible, we need a way to "generically" visit a specific type of node in the tree, wherever in the hierarchy it may be.

The [`@babel/traverse`](https://babeljs.io/docs/en/babel-traverse) package offers the functionality to programmatically visit nodes anywhere in the tree that represent a numeric literal.

## Programmatically visiting nodes

First, add the package in the existing project.

Programmatically traverse an AST and visit arbitrary nodes

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Practical Abstract Syntax Trees

Module 1: Introduction

Introduction:

Start Here

Introduction: (2:27)

Course overview

Module 2: Understanding Abstract Syntax Trees (AST)

Lesson 1: (5:55)

What is an Abstract Syntax Tree? Visualizing Code Like a Compiler

Lesson 2: (4:21)

How to View Abstract Syntax Tree Code With AST Explorer

Lesson 3: (1:46)

The Best JavaScript AST Tools - ESLint, Babel, Terser, and More

Lesson 4: (1:03)

Environment setup

Module 3: Working with Abstract Syntax Trees

Lesson 1: (6:29)

How to Generate a JavaScript AST With Babel Plugins

Lesson 2: (7:33)

Traversing an AST With Babel Traverse

Lesson 3: (9:31)

Add Type Safety and Prevent Runtime Errors With AST

Module 4: Code Audits

Lesson 1: (2:35)

Practical code audits

Lesson 2: (15:29)

How to Audit Your Code With AST Programming

Lesson 3: (2:32)

How to Add a Component and Update an AST

Lesson 4: (1:43)

When to Use Abstract Syntax Tree Tooling to Refactor at Scale

Module 5: Codemods

Lesson 1: (21:13)

How to Mutate an AST and Automatically Replace Code Components

Lesson 2: (10:03)

How to Create Codemods Using jscodeshift

Lesson 3: (5:55)

How to Unit Test jscodeshift Transforms With ts-jest

Module 6: Linting

Lesson 1: (8:44)

How to Ensure Codebase is Up to Date With Linting Rules

Lesson 2: (5:31)

How to Use ESLint to Create AST Rules With Babel Traverse

Lesson 3: (4:31)

How to Test Custom ESLint Linting Rules With AST

Traversing an AST With Babel Traverse