Babel Node Types

babel-types.md

Babel Node Types

In learning Babel, I found the learning curve pretty difficult. I made this document to better understand the node types I’d be working with. These are my notes I’ve collected.

Table of Contents

1. Global
   1. Children
2. Core Node Types
   1. ArrayExpression
   2. ArrowFunctionExpression
   3. BlockStatement
   4. BinaryExpression
   5. CallExpression
   6. ConditionalExpression
   7. ExpressionStatement
   8. FunctionDeclaration
   9. FunctionExpression
   10. IfStatement
   11. Literal
   12. LogicalExpression
   13. ObjectExpression
   14. Property
   15. ReturnStatement
   16. VariableDeclaration
   17. VariableDeclarator
3. Module Node Types
   1. ExportDefaultDeclaration
   2. ExportNamedDeclaration
   3. ExportSpecifier
   4. ImportDeclaration
   5. ImportDefaultSpecifier
   6. ImportNamespaceSpecifier
   7. ImportSpecifier

Global

Children

The following properties can be found on all node types, so they’re omitted from following entries:

Name	Type	Description
start	number	Starting character, starting with 0, if entire script was on a single line
end	number	Ending character position "
range	[number]	Array containing start and end values ([start, end])
loc.start.line	number	Line number, starting from 1, where expression starts
loc.start.column	number	Column number, starting from 0, where expression starts
loc.end.line	number	Line number, starting from 1, where expression ends
loc.end.column	number	Column number, starting from 0, where expression ends

Core Node Types

These are separated from the Module Node Types because these compose the core JavaScript language itself, and aren’t concerned with JavaScript modules.

ArrayExpression

["apple", "banana", "carrot"];

Children

Name	Type	Description
elements	[NodeType]	Array (surprise!) of its contents.

Notes

• Calling Array() is not an ArrayExpression but actually a CallExpression.

ArrowFunctionExpression

x => x + 2;

Children

Name	Type	Description
params	[NodeType]	Arguments passed to the function
body	[NodeType]	Body of the function

See also

• FunctionDeclaration

BinaryExpression

Self-containing logical comparison that can be evaluated in one operation.

BinaryExpressions grouped together with a && or || become a LogicalExpression.

BinaryExpressions are typically found inside IfStatements or ConditionalExpression

int < 2;

Children

Name	Type	Description
left	NodeType	Everything before operator.
operator	string	Comparison operator such as ===, !== or <
right	NodeType	Everything after operator.

BlockStatement

JavaScript block demarcated by curly braces as part of a ArrowFunctionExpression, FunctionDeclaration, or [IfExpression][ie].

function count(n) {
  // BlockStatement
}

Name	Type	Description
body	[NodeType]	Contents of the block statement

CallExpression

Your bread-and-butter function invocation.

encodeURIComponent("/search?q=Sonic The Hedgehog");

Children

Name	Type	Description
callee	Identifier	Identifier of the function being called
arguments	[NodeType]	Arguments passed to the function

ConditionalExpression

More commonly known as a ternary statement. Not to be confused with IfStatement (even though both serve identical purposes).

status === "ok" ? 200 : 500;

Children

Name	Type	Description
test	BinaryExpression|LogicalExpression	The expression between () to test
consequent	NodeType	The “if” part of the expression
alternate	NodeType	The “else” part of the expression

ExpressionStatement

???

FunctionDeclaration

Function declaration.

function addTwo(x) {}

Children

Name	Type	Description
id	Identifier	Name of the function
generator	boolean	Is this a generator function?
expression	boolean	Is this an expression?
async	boolean	Is this an async function?
params	[NodeType]	Arguments passed to function
body	BlockStatement|[NodeType]	Body of the function

See Also

• ArrowFunctionExpression

FunctionExpression

???

Identifier

A variable reference, function reference, JavaScript constructor, or undefined itself.

Object;
undefined;
const cookies = "a"; // `cookies` is the Identifier
const addTwo = x => x + 2; // `addTwo` is the Identifier

Children

Name	Type	Description
name	string	The name of the identifier, or undefined

IfStatement

Syntax wrapping a logical comparison such as BinaryExpression or LogicalExpression.

if (process.env.NODE_ENV) === 'production') {
  // consequent
} else {
  // alternate
}

Children

Name	Type	Description
test	BinaryExpression|LogicalExpression	BinaryExpression or LogicalExpression to evaluate.
consequent	NodeType	The “if” part of the expression
alternate	NodeType	The “else” part of the expression (”else if“ is an alternate that contains a nested IfStatement as a child)

Literal

Any Boolean, Number, String, RegExp, or Symbol; or null.

Objects and arrays are ObjectExpressions nad ArrayExpressions, respectively.

true
2
'mary'

Children

Name	Type	Description
value	any	Literal value in its original type (typeof may be necessary here)
raw	string	Literal value converted to a string

LogicalExpression

Complex logic that must be evaluated in multiple stages (as opposed to BinaryExpressions that are a single operation).

In other words, LogicalExpressions are essentially BinaryExpressions joined with && or ||.

typeof a === "string" && a.length > 0;

LogicalExpression will only have a left and a right. Stringing multiple expressions together will result in a nested structure like so:

a > 0 && a < 100 && a % 2 === 0

|       LE       |     BE     |
|  BE  |    BE   |

LE: LogicalExpression
BE: BinaryExpression

Children

Name	Type	Description
left	NodeType	Everything before operator.
operator	string	&& or ||
right	NodeType	Everything after operator.

ObjectExpression

Object declaration.

Like ArrayExpression, note that calling Object() is actually a CallExpression.

{ ca: 'Canada', mx: 'Mexico', se: 'Sweden', usa: 'United States' }

Children

Name	Type	Description
properties	[Property]	Array of all the object Propertys (similar to Object.entries).

Property

Child of ObjectExpression.

Children

Name	Type	Description
key	string	Object key
value	NodeType	Object value. May be anything allowed such as a Literal or FunctionDeclaration.

ReturnStatement

return foo;

Children

Name	Type	Description
argument	ConditionExpression|Identifier|Literal	The thing being returned

VariableDeclaration

Wrapper around variable assignment. Parent of VariableDeclarator.

Whether one variable is being assigned or multiple, you’ll have to check declarations to evaluate all the same.

var one = "one";
let two = 2,
  three = 3;
const four = 4.0;

Children

Name	Type	Description
kind	string	'var', 'let', or 'const'.
declarations	[VariableDeclarator]	Array of VariableDeclarators.

See also

• VariableDeclarator

VariableDeclarator

Variable assignment. Child of VariableDeclaration.

Children

Name	Type	Description
id	Identifier	Name the variable will reference.
init	ArrayExpression|Identifier|Literal|ObjectExpression	Initial value of the variable.

See also

• VariableDeclaration

Module Node Types

Many Node types such as import, export, require(), and module exist outside the core JavaScript language and are used in working spec ES Modules or CommonJS found in Node.js systems.

These are separated from Core Node Types above because JavaScript modules are a rapidly-changing/convoluted extension of the language that aren’t always a part of normal AST operations. And because these are my notes and I do what I want.

ExportDefaultDeclaration

ExportNamedDeclaration

ExportSpecifier

export {
  myFunction // ExportSpecifer
};

Children

Name	Type	Description
local	Identifier	Local reference being exported.
exported	Identifier	If you renamed the export using as, its final exported name.

ImportDeclaration

import traverse from "@babel/traverse";
import { Button } from "./components/Button";

Children

Name	Type	Description
specifiers	[ImportDefaultSpecifier|ImportNamespaceSpecifier|ImportSpecifier]	Local references being imported.
source	Literal	Pathname of imported module, as a Literal.
importKind	string	I think this is always value. I don’t know why.

ImportDefaultSpecifier

Used only when importing the default export of another module. Otherwise, use ImportSpecifier.

Unlike ImportSpecifier, there’s no import child as you decide what to name it on import.

import axios from "axios"; // `axios` is the ImportDefaultSpecifier

Children

Name	Type	Description
local	Identifier	Local reference for the import.

ImportNamespaceSpecifier

Used when importing multiple identifiers from module through a splat (*), and assigning a new namespace.

import * as React from "react"; // `* as React` is the ImportNamespaceSpecifier

Children

Name	Type	Description
local	Identifier	Namespace specified for the mass import.

ImportSpecifier

The typical specifier for identifying import references.

import { Query } from "react-apollo"; // `Query` is the ImportSpecifier

Children

Name	Type	Description
imported	Identifier	Original reference name from the remote module
local	Identifier	If you renamed the import, its local reference (if you didn’t, this is indentical to imported).