This video is available to students only

Exploring an AST

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

Exploring an Abstract Syntax Tree#

Manually exploring an AST is a helpful exercise in understanding the relevant subtree and its nodes which represent a given piece of code. Understanding the relevant nodes is the first step to being able to automatically or programmatically traverse an AST.

AST Explorer#

AST Explorer is one of the simplest ways to begin exploring real ASTs. It provides a UI on top of many tools, and a way to interactively explore ASTs. This helps make ASTs more digestible, by highlighting the relationship between the source code and specific nodes of the AST.

Screenshot of astexplorer.net

To give this a try, go to AST Explorer and paste in the example snippet of code in the code pane on the left.

There are a few views and settings AST Explorer provides. First, there are the language and parser settings. For this course, the language can always be set to JavaScript because all of the example code we're parsing is JavaScript.

Screenshot of astexplorer.net language and parser

The parser option will need to be changed throughout the course depending on the exact tool being looked at. For now, using @babel/parser is a good default, and many of the first lessons will use this as the parser. This setting controls which parser is used to generate the AST. The final AST can differ depending on which parser is selected.

Screenshot of astexplorer.net parsers
 

This page is a preview of Practical Abstract Syntax Trees

Start a new discussion. All notification go to the author.