When you write code, you see a sequence of characters on a screen. But a computer doesn't see it that way. To understand and execute your instructions, it first needs to translate that text into a more structured format. This structured representation is called an Abstract Syntax Tree, or AST.

Think of an AST as a sentence diagram for your code. Just as a diagram breaks down a sentence into its grammatical parts—nouns, verbs, adjectives—an AST breaks down code into its fundamental components and shows how they relate to each other. It's a hierarchical tree that represents the code's structure, ignoring things like commas, whitespace, and parentheses, which is why it's called "abstract."

The process of creating this tree is called parsing. A program called a parser reads your code, character by character, and builds the tree. Let's take a simple line of JavaScript:

To a human, this is a variable declaration. The parser converts this idea into a tree structure that a machine can navigate.

Every AST is made up of nodes. A node is a single object in the tree that represents a piece of the code. In our example above, VariableDeclaration, Identifier, and Literal are all types of nodes.

Each node has properties that provide more detail. For example, the Identifier node has a name property with the value "x". The Literal node has a value property of 5. This detailed, structured format is what makes ASTs so powerful.

Let's consider a slightly more complex example: a simple math expression.

The AST for this expression perfectly captures the order of operations. The multiplication is the top-level operation, so it becomes the root of the tree. One of its children is the number 2. The other child isn't a number—it's the result of another operation, the addition of 3 and 4. The tree's structure naturally enforces that the addition must be evaluated before the multiplication.

ASTs are fundamental to what compilers, linters, and code formatters do every day. By converting code into a tree, these tools can analyze and manipulate it programmatically.

For example, a code linter (a tool that checks for stylistic or programmatic errors) can traverse the AST to find patterns that violate its rules. A code formatter like Prettier walks the tree and reprints it according to a consistent style guide, adding or removing whitespace as needed.

Perhaps most powerfully, ASTs allow for code transformation and refactoring. A tool could walk the tree, find every instance of an old function name, and replace it with a new one. Or it could perform more complex upgrades, like converting old syntax to a newer version automatically. This is far more reliable than just doing a simple text search-and-replace, because the AST understands the code's actual structure and meaning.

By representing code as a structured tree, we unlock the ability to analyze, verify, and transform it with precision and confidence.

Ready to check your understanding?

Understanding ASTs gives you a deeper insight into how the tools you use every day actually work under the hood.