In computer science, an abstract syntax tree (AST), or just syntax tree, is a tree representation of the high level source code.
The compilation process consists of translating the high level source code (e.g. Java, Python, C++, FORTRAN, etc.) into machine code. This process consists of 4 steps:
- Lexical Analysis
- Syntax Analysis
- Code Generation
- Code Optimisation
A list of tokens is generated during the lexical analysis of the compilation process.
An Abstract Syntax Tree (AST) is generated during the syntax analysis of the compilation process.
The following tool enables you to type/import some high level code (Javascript) in the first tab below and generate the list of tokens and the Abstract Syntax Tree corresponding to your code. You can see what the tree looks like using the JSON format (third tab) or as a visual representation (fourth tab).
Javascript Code:
Copy and paste your JavaScript code in the textarea below and press the “Generate Abstract Tree” button below to generate the list of tokens (lexical analysis) on tab 2 and the AST tree (syntax analysis) on tab 3 and tab 4.
Generate Abstract Syntax Tree
List of Tokens (JSON format)
The list of tokens is generated from the source code during the lexical analysis stage of the compilation. Notice how, during the lexical analysis, annotations and white spaces are discarded and are hence not included in the list of tokens.
List of Tokens
The list of tokens is generated from the source code during the lexical analysis stage of the compilation. Notice how, during the lexical analysis, annotations and white spaces are discarded and are hence not included in the list of tokens.
Abstract Syntax Tree (JSON format)
The Abstract Syntax Tree is generated using both the list of tokens (from the lexical analysis) and the source code. The AST is generated during the syntax analysis stage of the compilation. Any syntax error would be detected and a syntax error message would then be returned, stopping the compilation process.
Abstract Syntax Tree
Open AST in new windowDid you know?

Rear Admiral Grace Hopper, 1984
Grace Hopper had a key role in the development of computer science. She invented the concept of sub-routines to help programmers save time when writing code. Her work on developing high-level languages was also motivated by the need to be able to save time when writing programs, as writing low-level code can be extremely time consuming.
Women in STEM
Listen to what Megan Smith (U.S. Chief Technical Officer) said about Grace Hooper in 2014:
The first computer bug!
Nowadays, when we find an error in a computer program, we call this error a bug. While Grace Hopper was working on a Mark II Computer at Harvard University in 1947, her team discovered a moth stuck in a relay. The moth impeded the operation of the relay by creating a short-circuit. The problem was fixed by removing the moth (debugging the relay!). The following picture is a photo of the notes from Grace Hopper and her associates with a picture of the actual moth!

The first computer bug!