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 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.
To give this a try, go to AST Explorer and paste in the example snippet of code in the code pane on the left.
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.