Course overview

Introduction

Understand the basics of an AST and how it relates to real-world code

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

Looking at an example code snippet and how it relates to the resulting AST

How to View Abstract Syntax Tree Code With AST Explorer

An overview of the tooling available in the web frontend (JavaScript) ecosystem that rely on ASTs

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

A quick overview of the basic environment setup used throughout this course

Environment setup

Understanding Abstract Syntax Trees (AST)

Exploring tools to convert (or parse) JavaScript into a real AST

How to Generate a JavaScript AST With Babel Plugins

Programmatically traverse an AST and visit arbitrary nodes

Traversing an AST With Babel Traverse

Add Type Safety and Prevent Runtime Errors With AST

Working with Abstract Syntax Trees

A practical example of needing to perform a code audit (static analysis) to understand the current state of a codebase

Practical code audits

Create a custom script to audit a codebase

How to Audit Your Code With AST Programming

Introduce a shared Button component to replace all existing button elements

How to Add a Component and Update an AST

A rough formula to determine when to use AST-based tooling

When to Use Abstract Syntax Tree Tooling to Refactor at Scale

Code Audits

Transforming code in place by mutating an AST

How to Mutate an AST and Automatically Replace Code Components

Using jscodeshift to make the same code transformations with less boilerplate

How to Create Codemods Using jscodeshift

Create tests for jscodeshift transforms for a faster feedback loop

How to Unit Test jscodeshift Transforms With ts-jest

Codemods

Implement a linting rule to prevent the code we just transformed from being reintroduced in the future

How to Ensure Codebase is Up to Date With Linting Rules

Use ESLint to create the same linting rule for the code with less boilerplate

How to Use ESLint to Create AST Rules With Babel Traverse

Testing custom ESLint linting rules to verify they work as expected

How to Test Custom ESLint Linting Rules With AST

Linting

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

This course is designed to provide a concrete understanding of the theory and practical uses of "abstract syntax trees" (ASTs).

Before we explore the practical uses, we need to gain a conceptual understanding of ASTs. At a high level, an 

intermediate representation of source code as a tree structure

 starts with a root. The root can then point to other values, and those values to others, and so on. This begins to create an implicit hierarchy, and also happens to be a great way to represent source code in a way computers can easily interpret.

Each one of these values (circles in the tree) are referred to as 

. The relationships between nodes are often described with terms like 

 is shown at the top, however if it's flipped, with the root node at the bottom and heading upwards, it starts to look like an actual tree with all its branches forking out.

Tree data structures are common in computer science and have many practical applications, such as searching and sorting data. There are also many different types of trees with different constraints. For example, a 

For the purpose of working with ASTs, the important aspect is understanding how a tree can be used to represent data and the relationships between nodes.

Some of the most prominent uses of ASTs are in compilers. A compiler accepts source code as input, and then outputs another language. This is often from a high-level programming language to something low-level, like machine code.

In the frontend web ecosystem, this includes tools like 

. These tools compile many modules into a bundle, and perform other optimizations such as transpiling from modern JavaScript to an older version, or minifying the code by renaming variables and functions to shorter names. Although they are a little different to conventional compilers, they follow many of the same fundamental steps.

---
title: What is an Abstract Syntax Tree? Visualizing Code Like a Compiler
description: Understand the basics of an AST and how it relates to real-world code
privateVideoUrl: "https://fullstack.wistia.com/medias/f4mkdzaypj"
code: https://gitlab.com/fullstackio/books/newline-course-apps/spencer-miskoviak-practical-abstract-syntax-trees-app/-/tree/main/code/module_02/lesson_02.01/App/src
---

# What is an Abstract Syntax Tree?

This course is designed to provide a concrete understanding of the theory and practical uses of "abstract syntax trees" (ASTs).

![Example abstract syntax tree](https://d2uusema5elisf.cloudfront.net/courses/practical-abstract-syntax-trees/module_02/lesson_02.01/public/assets/example-ast.png)

Before we explore the practical uses, we need to gain a conceptual understanding of ASTs. At a high level, an [abstract syntax tree](https://en.wikipedia.org/wiki/Abstract_syntax_tree) is an **intermediate representation of source code as a tree structure**. What does that mean? 🤔

### Tree (data) structure

A [tree data structure](https://en.wikipedia.org/wiki/Tree_(data_structure)) starts with a root. The root can then point to other values, and those values to others, and so on. This begins to create an implicit hierarchy, and also happens to be a great way to represent source code in a way computers can easily interpret.

![tree data structure example](https://d2uusema5elisf.cloudfront.net/courses/practical-abstract-syntax-trees/module_02/lesson_02.01/public/assets/tree-data-structure.png)

Each one of these values (circles in the tree) are referred to as **nodes**. The relationships between nodes are often described with terms like **child node**, **parent node**, **sibling node**, and so on.

By convention, the **root node** is shown at the top, however if it's flipped, with the root node at the bottom and heading upwards, it starts to look like an actual tree with all its branches forking out.

![tree data structure with root at the bottom](https://d2uusema5elisf.cloudfront.net/courses/practical-abstract-syntax-trees/module_02/lesson_02.01/public/assets/tree-data-structure-by-tree.png)

Tree data structures are common in computer science and have many practical applications, such as searching and sorting data. There are also many different types of trees with different constraints. For example, a [binary tree](https://en.wikipedia.org/wiki/Binary_tree) is a tree with at most two child nodes.

For the purpose of working with ASTs, the important aspect is understanding how a tree can be used to represent data and the relationships between nodes.

## ASTs and compilers

Some of the most prominent uses of ASTs are in compilers. A compiler accepts source code as input, and then outputs another language. This is often from a high-level programming language to something low-level, like machine code.

![compiler input and output](https://d2uusema5elisf.cloudfront.net/courses/practical-abstract-syntax-trees/module_02/lesson_02.01/public/assets/compiler-input-output.png)

In the frontend web ecosystem, this includes tools like [webpack](https://webpack.js.org) or [parcel](https://parceljs.org). These tools compile many modules into a bundle, and perform other optimizations such as transpiling from modern JavaScript to an older version, or minifying the code by renaming variables and functions to shorter names. Although they are a little different to conventional compilers, they follow many of the same fundamental steps.

Spencer Miskoviak

What is an AST? This course is designed to provide a concrete understanding of

the theory and practical uses of abstracts and text trees, or ASTs. Before we

explore the practical uses, we need to gain a conceptual understanding of ASTs.

At a high level, an abstract syntax tree is an intermediate representation of

source code as a tree structure. But what does that actually mean? Let's break

each part of the statement down. To start, let's look at the tree data

structure. A tree data structure starts with a root node. The root can then

to other values, and those values to others, and so on. This begins to create

an implicit hierarchy, and also happens to be a great way to represent source

in a way computers can easily interpret. Each one of these values, or circles

the tree, are referred to as nodes. The relationships between nodes are often

described with terms like child node, parent node, sibling node, and so on. By

convention, the root node is shown at the top. However, if it's flipped, with

root node at the bottom, and the rest of the tree heading upwards, it starts to

look like an actual tree, with all its branches forking out. Tree data

are common in computer science, and have many practical applications, such as

searching and sorting data. There are also many different types of trees with

different constraints. For example, a binary tree is a tree with at most two

child nodes. For the purpose of working with ASTs, the important aspect is

understanding how a tree can be used to represent data in the relationships

between nodes. Some of the most prominent uses of ASTs are in compilers. A

accepts source code as input, and then outputs another language. This is often

from a high-level programming language to something low-level, like machine

code. In the front-end web ecosystem, this includes tools like Webpack or

Parcel. These tools compile many modules into a bundle and perform other

optimizations such as transpiling from modern JavaScript to an older version,

minifying the code by renaming variables and functions to shorter names.

Although they are a little different to conventional compilers, they follow

of the same fundamental steps. Compilers are commonly broken down into two

the front-end and back-end. The front-end is responsible for scanning and

parsing the source code, while the back-end is responsible for producing the

output. One benefit of making this distinction is the ability to combine a

different front-end and back-end, depending on the input language being

compiled in the desired output language. Additionally, breaking this process

into distinct steps makes it easier to reason about. In order for this to work,

the front-end and back-end need some form of protocol or an intermediate

representation of the input. Typically, the output of the front-end is an

syntax tree. The AST represents the source code in a tree structure, hence a

syntax tree. It's considered abstract because at this point it has abstracted

a way syntax that is irrelevant when represented by a tree, since it can

imply things like hierarchy. While ASTs can seem complex, most of the

is in generating them from source code. Fortunately, there are many great tools

in the JavaScript ecosystem that can handle generating ASTs. For the remainder

of this course, it won't be critical to know the nuances of compilers or all

different types of tree data structures or the complexities of generating ASTs.

However, understanding what ASTs are will unlock a whole new set of practical

skills. For example, some common applications of ASTs include counting

how many times a function variable component or prop is used in source code

or transforming code from one syntax to another or enforcing rules for syntax

or other static analysis, for example, disallowing unused variables. Once

with abstracts and text trees, many of these concepts can be carried from one

tool to another as they will be built on many of the same fundamentals. Now

we have a base understanding of what ASTs are and how they work, what does a

basic AST look like in practice? Let's take the following line of JavaScript as

an example input. This code can then be represented by the following abstracts

and text tree on the right. You'll notice there is a single root node. Here

that's the addition operator. In practice, the root node represents the

entire file, but for the purpose of this example, unnecessary nodes have been

omitted. Each child node, for example, the numeric literal 2, has one unique

parent. This can be said for all other nodes in the tree except the root.

the tree structure implies hierarchy, which means syntax such as parentheses

can be omitted. For example, to evaluate this tree, the multiplication must

before the addition. Looking at a visual AST like this can be a helpful way to

understand the structure. However, this isn't the true representation of what

AST will be when working with it in later lessons. A more common format is to

represent this abstract syntax tree in a JSON format. Using the same example

code, a simplified JSON structure representing the AST can be seen on the

right, most tooling that relies on ASTs operate on a JSON structure like this.

As the tree becomes larger and more complex, it can become harder to visualize

the structure. Take a moment to relate the visual representation and this JSON

format of the same tree. Visualizing source code in a tree structure like this

is one technique that can be helpful when reasoning about ASTs. Here, the

statement is considered a binary expression node with three primary

properties, left, operator, and right. The left node is then a numeric literal

node representing the value 2. The right node however is yet another binary

expression node again with the properties left, operator, and right. However,

time, this nested binary expressions left and right nodes are both numeric

literals representing the values 4 and 10. Now that we can sexually understand

ASTs, the next lesson will cover what they look like in more depth.