The Art of Abstrax Syntax Tree on Javascript

Nicolas Restrepo

Sr Frontend in Zemoga and coo-organizer of Bogota.js

@nic_restrepo

How javascript works?

Parsers & The abstract syntax tree

Title Text

V8 - Chrome

SpiderMonkey - Firefox

Chackra - Edge

JavaScriptCore - Safari

TOKENS ?

var foo = 3 * 3;

[
  {
    "type": "Keyword",
    "value": "var" 
  },
  {
    "type": "Identifier",
    "value": "foo"
  },
  {
    "type": "Punctuator",
    "value": "="
  },
  {
    "type": "numeric",
    "value": "3"
  },
  {
    "type": "Punctuator",
    "value": "*"
  },
  {
    "type": "numeric",
    "value": "3"
  },
  {
    "type": "Punctuator",
    "value": ";"
  }
]

(SyntaxError) 😩

acorn

esprima

espree

So what is the AST? 🤔

is a tree representation of the abstract syntactic structure of source code written in a programming language. Each node of the tree denotes a construct occurring in the source code.

https://en.wikipedia.org/wiki/Abstract_syntax_tree

DEMO, AST (ESLINT RULES) 🚀

THANKS !!! 👨🏼‍💻