What is a JavaScript AST?

You type characters. Tools do not read those characters the way you do. A parser turns the file into a tree of nodes: a function, its parameters, a return, a binary plus, two identifiers.

That tree is the AST — the abstract syntax tree. Linters, formatters, bundlers, and compilers all start from some version of it.

Abstract means some surface details are dropped. Spacing and most comments usually do not appear as first-class structure. Two programs that mean the same thing can share a similar tree even if they look different on screen.

When people argue about style, they are often arguing about the string. When tools argue about correctness, they are looking at the tree.

Many early bugs come from misunderstanding nesting: where a function body ends, which expression is the left side of an assignment, or how arguments group inside a call. The AST makes those relationships visible.

Operator precedence stops being a rumor when you can see that a + b * c is a plus whose right child is a multiply, not a multiply of a sum.

Teachers can ask students to name three node types before they Run. The exercise turns passive reading into a hunt.

Open the JavaScript editor with the starter snippet. Switch to the AST tab. Click FunctionDeclaration, then BinaryExpression. The editor highlight is the point — tree language mapped back to your characters.

Change + to * or add a second argument. The new nodes are the lesson. This is the unique reason to use Code Arena when you are not just chasing output.

If the source cannot parse, fix the SyntaxError first. There is no useful tree until the parser succeeds.

• Program — the file root
• FunctionDeclaration — a named function
• CallExpression — a call with ()
• BinaryExpression — operators such as +
• Identifier — a name

The diagram is a teaching view, not the TypeScript compiler API or a Babel plugin pipeline. Use it to build intuition. Use those tools when you need transforms, lint rules, or full project analysis.

The interactive AST panel currently targets JavaScript. For TypeScript, recreate the runtime shape in the JS editor or treat types as erased when you reason about execution.