Unlocking JavaScript Power: A Deep Dive into AST and Babel

Abstract Syntax Tree (AST)

An AST is a tree‑like representation of source code where each node describes a syntactic construct (e.g., Identifier, VariableDeclaration). Nodes are identified by a type field and carry location metadata such as start, end and loc (line/column).

ESTree Specification

JavaScript tooling commonly adopts the ESTree spec as a lingua franca for ASTs. ESTree defines core node types ( Identifier, Literal, Expression, etc.) and common properties ( type, start, end, loc, leadingComments, innerComments, trailingComments, extra).

Typical Node Types

File – top‑level container

Program – holds the program body

Directive – e.g., "use strict" Comment – source comments

Statement – executable statements

Expression – expression nodes

Literal – literal values

Identifier – variable, function or property names

Declaration – variable/function/import/export declarations

Specifier – import/export specifiers

AST Example

JavaScript snippet:

function test(args) {
  const a = 1;
  console.log(args);
}

The corresponding AST contains a FunctionDeclaration node whose body includes a VariableDeclaration (with a VariableDeclarator for a) and an ExpressionStatement for the console.log call. The VariableDeclarator node has an id (an Identifier named a) and an init (a NumericLiteral with value 1).