How to View Abstract Syntax Tree Code With AST Explorer

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

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents
  • |

Lesson Transcript

  • [00:00 - 00:13] Manually exploring an AST is a helpful exercise in understanding the relevant subtree in 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.

  • [00:14 - 00:23] AST Explorer is one of the simplest ways to begin exploring real ASTs. It provides a UI on top of many tools in a way to interactively explore ASTs.

  • [00:24 - 00:45] 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, we'll go to ASTexplore.net and put in the same piece of sample code from the previous lesson.

  • [00:46 - 00:53] There are a few views in settings AST Explorer provides in the top menu. First, there are the languages.

  • [00:54 - 01:05] For this course, the language can always be set to JavaScript because all of the example code we're parsing is JavaScript. The parser option will need to be changed throughout the course depending on the exact tool being looked at.

  • [01:06 - 01:16] 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.

  • [01:17 - 01:24] The final AST can differ depending on which parser is selected. Remember to switch the parser to match the tool being used in later lessons.

  • [01:25 - 01:34] Otherwise the generated tree in AST Explorer can have subtle and confusing differences. Next to this parser option is a gear icon.

  • [01:35 - 01:46] Clicking this controls the options for the selected parser. For example, pasting in something like TypeScript code would require enabling the TypeScript plugin and disabling the Flow plugin.

  • [01:47 - 01:54] But the defaults are fine for this case. The left pane is the code editor.

  • [01:55 - 02:05] This is where any relevant code can be typed or pasted. Typically, it's easiest to keep the code as short as possible to keep the generated AST small so it's easier to explore.

  • [02:06 - 02:23] The resulting AST for the code snippet will be generated invisible on the right . Each node in the tree can be expanded or collapsed.

  • [02:24 - 02:33] Arguably the best feature is the ability to click on the source code to highlight the exact node in the tree view. Clicking the node in the tree view will also highlight the relevant code in the editor.

  • [02:34 - 02:53] For example, clicking 4 in the code editor will highlight the numeric literal node in the tree view. Or hovering over the numeric literal node with a value of 10 in the tree view will highlight the number 10 in the code editor.

  • [02:54 - 03:10] Alternatively, the entire generated tree can be viewed aesthetic JSON by togg ling the JSON tab to the right of the tree tab. The tree view also exposes several other settings.

  • [03:11 - 03:27] For example, the location data which defines the lines and columns where the code originally appeared in the source isn't frequently used. The hide location data option can be enabled to hide the state in the nodes to make it easier to explore.

  • [03:28 - 03:37] Hide entity keys will hide keys with undefined values. These settings aren't necessary but can make it easier to focus on the important pieces.

  • [03:38 - 03:45] Take a moment to explore ASTs generated for other code. For example, maybe paste a snippet of code from one of your projects.

  • [03:46 - 03:56] Or consider pasting a snippet of code from an open source repo. Otherwise, maybe try different types of syntax such as spread syntax, knowledge coalescing or optional chaining.

  • [03:57 - 04:08] AST explores a helpful tool when trying to understand the AST for a given piece of source code. Keep it handy to paste in any pieces of code that come up through the course and remember to double check the settings.

  • [04:09 - 04:18] We now have a base understanding of what an AST is and how to manually explore one. The next lesson will cover some of the tooling that exists in the JavaScript ecosystem for working with ASTs.