/Babel-Types-Cheat-Sheet

Babel Types Cheat Sheet

This cheat sheet provides a quick reference for common Babel AST node types in the @babel/types package.

There are AST node types (written in Uppercase) that represent various elements of JavaScript, and node creation functions (written in lowercase) that generate those types programmatically.

Example:

  • Node Type: FunctionDeclaration represents a function declaration in the AST.
  • Node Creation Function: functionDeclaration(id, params, body) generates a FunctionDeclaration node.

1. General Structure

Node Type Description
Program The root of the AST (entire program).
Code:
import { x } from 'my-module'; function myFunc() { return x; }
AST:
{ type: 'Program', body: [ImportDeclaration(...), FunctionDeclaration(...)] }
BinaryExpression Binary operation (e.g., +, -).
Code:
x + 10;
AST:
{ type: 'BinaryExpression', operator: '+', left: Identifier('x'), right: NumericLiteral(10) }
LogicalExpression Logical operation (&&, `
MemberExpression Property access (obj.prop or obj[prop]).
Code:
obj.prop;
AST:
{ type: 'MemberExpression', object: Identifier('obj'), property: Identifier('prop'), computed: false }
AssignmentExpression Assignment (= or +=).
Code:
x = 42;
AST:
{ type: 'AssignmentExpression', operator: '=', left: Identifier('x'), right: NumericLiteral(42) }
VariableDeclaration Variable declaration (const, let, var).
Code:
const x = 10;
AST:
{ type: 'VariableDeclaration', kind: 'const', declarations: [VariableDeclarator(Identifier('x'), NumericLiteral(10))] }
VariableDeclarator A single variable declarator.
Code:
const x = 10;
AST:
{ type: 'VariableDeclarator', id: Identifier('x'), init: NumericLiteral(10) }

2. Imports

Node Type Description
ImportDeclaration Represents an import statement.
Code:
import { x } from 'my-module';
AST:
{ type: 'ImportDeclaration', specifiers: [ImportSpecifier(Identifier('x'), Identifier('x'))], source: StringLiteral('my-module') }
ImportSpecifier Named import (import { x }).
Code:
import { x } from 'my-module';
AST:
{ type: 'ImportSpecifier', imported: Identifier('x'), local: Identifier('x') }
ImportDefaultSpecifier Default import (import x).
Code:
import x from 'my-module';
AST:
{ type: 'ImportDefaultSpecifier', local: Identifier('x') }
ImportNamespaceSpecifier Namespace import (import * as x).
Code:
import * as x from 'my-module';
AST:
{ type: 'ImportNamespaceSpecifier', local: Identifier('x') }

3. Exports

Node Type Description
ExportNamedDeclaration Named export.
Code:
export const x = 10;
AST:
{ type: 'ExportNamedDeclaration', declaration: VariableDeclaration('const', [VariableDeclarator(Identifier('x'), NumericLiteral(10))]), specifiers: [] }
ExportDefaultDeclaration Default export.
Code:
export default myFunc;
AST:
{ type: 'ExportDefaultDeclaration', declaration: Identifier('myFunc') }
ExportSpecifier Named export specifier.
Code:
export { x };
AST:
{ type: 'ExportSpecifier', local: Identifier('x'), exported: Identifier('x') }
ExportAllDeclaration export * from statement.
Code:
export * from 'my-module';
AST:
{ type: 'ExportAllDeclaration', source: StringLiteral('my-module') }

4. Functions

Node Type Description
FunctionDeclaration Function declaration.
Code:
function myFunc(x) { return x; }
AST:
{ type: 'FunctionDeclaration', id: Identifier('myFunc'), params: [Identifier('x')], body: BlockStatement([ReturnStatement(Identifier('x'))]) }
FunctionExpression Function expression.
Code:
const myFunc = function(x) { return x; }
AST:
{ type: 'FunctionExpression', id: null, params: [Identifier('x')], body: BlockStatement([ReturnStatement(Identifier('x'))]) }
ArrowFunctionExpression Arrow function expression.
Code:
const myFunc = (x) => x + 1;
AST:
{ type: 'ArrowFunctionExpression', params: [Identifier('x')], body: BinaryExpression('+', Identifier('x'), NumericLiteral(1)) }
ReturnStatement Return statement.
Code:
return x;
AST:
{ type: 'ReturnStatement', argument: Identifier('x') }
CallExpression Function call expression.
Code:
myFunc(5);
AST:
{ type: 'CallExpression', callee: Identifier('myFunc'), arguments: [NumericLiteral(5)] }

5. Statements

Node Type Description
IfStatement if statement.
Code:
if (x > 10) { log('greater'); } else { log('less or equal'); }
AST:
{ type: 'IfStatement', test: BinaryExpression('>', Identifier('x'), NumericLiteral(10)), consequent: BlockStatement([ExpressionStatement(CallExpression(Identifier('log'), [StringLiteral('greater')]))]), alternate: BlockStatement([ExpressionStatement(CallExpression(Identifier('log'), [StringLiteral('less or equal')]))]) }
ForStatement for loop.
Code:
for (let i = 0; i < 10; i++) { console.log(i); }
AST:
{ type: 'ForStatement', init: VariableDeclaration('let', [VariableDeclarator(Identifier('i'), NumericLiteral(0))]), test: BinaryExpression('<', Identifier('i'), NumericLiteral(10)), update: UpdateExpression('++', Identifier('i')), body: BlockStatement([ExpressionStatement(CallExpression(MemberExpression(Identifier('console'), Identifier('log')), [Identifier('i')]))]) }
WhileStatement while loop.
Code:
while (x > 0) { x--; }
AST:
{ type: 'WhileStatement', test: BinaryExpression('>', Identifier('x'), NumericLiteral(0)), body: BlockStatement([ExpressionStatement(UpdateExpression('--', Identifier('x')))]) }
BlockStatement Block of statements ({ ... }).
Code:
{ log('test'); }
AST:
{ type: 'BlockStatement', body: [ExpressionStatement(CallExpression(Identifier('log'), [StringLiteral('test')]))] }
ExpressionStatement Wraps an expression as a statement.
Code:
log('test');
AST:
{ type: 'ExpressionStatement', expression: CallExpression(Identifier('log'), [StringLiteral('test')]) }

6. Literals

Node Type Description
StringLiteral String literal.
Code:
'Hello';
AST:
{ type: 'StringLiteral', value: 'Hello' }
NumericLiteral Numeric literal.
Code:
42;
AST:
{ type: 'NumericLiteral', value: 42 }
BooleanLiteral Boolean literal (true/false).
Code:
true;
AST:
{ type: 'BooleanLiteral', value: true }
NullLiteral Null literal.
Code:
null;
AST:
{ type: 'NullLiteral' }