Exploring AST

How to write your custom ESLint rule or Babel.js plugin

Programming is an art

Code is a text

But...

Machines don't understand the text. They need to operate on some different form.

What do these have in common?

/[a-z][A-Z]\.\\(+)/i

RegExp

AST

Abstract Syntax Tree

Parser

Parser

class Tree {
  constructor() {
      this.love = () => console.log(this)
  }

  whoLovesTheTree() {
      return "Piotr"
  }
}

Parser

[{"type":{"label":"class","keyword":"class","beforeExpr":false,"startsExpr":true,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null},"value":"class","start":0,"end":5,"loc":{"start":{"line":1,"column":0},"end":{"line":1,"column":5}}},{"type":{"label":"name","beforeExpr":false,"startsExpr":true,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null},"value":"Tree","start":6,"end":10,"loc":{"start":{"line":1,"column":6},"end":{"line":1,"column":10}}},{"type":{"label":"{","beforeExpr":true,"startsExpr":true,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null},"start":11,"end":12,"loc":{"start":{"line":1,"column":11},"end":{"line":1,"column":12}}},{"type":{"label":"name","beforeExpr":false,"startsExpr":true,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null},"value":"constructor","start":15,"end":26,"loc":{"start":{"line":2,"column":2},"end":{"line":2,"column":13}}},{"type":{"label":"(","beforeExpr":true,"startsExpr":true,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null},"start":26,"end":27,"loc":{"start":{"line":2,"column":13},"end":{"line":2,"column":14}}},{"type":{"label":")","beforeExpr":false,"startsExpr":false,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null},"start":27,"end":28,"loc":{"start":{"line":2,"column":14},"end":{"line":2,"column":15}}},{"type":{"label":"{","beforeExpr":true,"startsExpr":true,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null},"start":29,"end":30,"loc":{"start":{"line":2,"column":16},"end":{"line":2,"column":17}}},{"type":{"label":"this","keyword":"this","beforeExpr":false,"startsExpr":true,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null,"updateContext":null},"value":"this","start":35,"end":39,"loc":{"start":{"line":3,"column":4},"end":{"line":3,"column":8}}},{"type":{"label":".","beforeExpr":false,"startsExpr":false,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null,"updateContext":null},"start":39,"end":40,"loc":{"start":{"line":3,"column":8},"end":{"line":3,"column":9}}},{"type":{"label":"name","beforeExpr":false,"startsExpr":true,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null},"value":"love","start":40,"end":44,"loc":{"start":{"line":3,"column":9},"end":{"line":3,"column":13}}},{"type":{"label":"=","beforeExpr":true,"startsExpr":false,"rightAssociative":false,"isLoop":false,"isAssign":true,"prefix":false,"postfix":false,"binop":null,"updateContext":null},"value":"=","start":45,"end":46,"loc":{"start":{"line":3,"column":14},"end":{"line":3,"column":15}}},{"type":{"label":"(","beforeExpr":true,"startsExpr":true,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null},"start":47,"end":48,"loc":{"start":{"line":3,"column":16},"end":{"line":3,"column":17}}},{"type":{"label":")","beforeExpr":false,"startsExpr":false,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null},"start":48,"end":49,"loc":{"start":{"line":3,"column":17},"end":{"line":3,"column":18}}},{"type":{"label":"=>","beforeExpr":true,"startsExpr":false,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null,"updateContext":null},"start":50,"end":52,"loc":{"start":{"line":3,"column":19},"end":{"line":3,"column":21}}},{"type":{"label":"name","beforeExpr":false,"startsExpr":true,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null},"value":"console","start":53,"end":60,"loc":{"start":{"line":3,"column":22},"end":{"line":3,"column":29}}},{"type":{"label":".","beforeExpr":false,"startsExpr":false,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null,"updateContext":null},"start":60,"end":61,"loc":{"start":{"line":3,"column":29},"end":{"line":3,"column":30}}},{"type":{"label":"name","beforeExpr":false,"startsExpr":true,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null},"value":"log","start":61,"end":64,"loc":{"start":{"line":3,"column":30},"end":{"line":3,"column":33}}},{"type":{"label":"(","beforeExpr":true,"startsExpr":true,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null},"start":64,"end":65,"loc":{"start":{"line":3,"column":33},"end":{"line":3,"column":34}}},{"type":{"label":"this","keyword":"this","beforeExpr":false,"startsExpr":true,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null,"updateContext":null},"value":"this","start":65,"end":69,"loc":{"start":{"line":3,"column":34},"end":{"line":3,"column":38}}},{"type":{"label":")","beforeExpr":false,"startsExpr":false,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null},"start":69,"end":70,"loc":{"start":{"line":3,"column":38},"end":{"line":3,"column":39}}},{"type":{"label":";","beforeExpr":true,"startsExpr":false,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null,"updateContext":null},"start":70,"end":71,"loc":{"start":{"line":3,"column":39},"end":{"line":3,"column":40}}},{"type":{"label":"}","beforeExpr":false,"startsExpr":false,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null},"start":74,"end":75,"loc":{"start":{"line":4,"column":2},"end":{"line":4,"column":3}}},{"type":{"label":"name","beforeExpr":false,"startsExpr":true,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null},"value":"whoLovesTheTree","start":79,"end":94,"loc":{"start":{"line":6,"column":2},"end":{"line":6,"column":17}}},{"type":{"label":"(","beforeExpr":true,"startsExpr":true,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null},"start":94,"end":95,"loc":{"start":{"line":6,"column":17},"end":{"line":6,"column":18}}},{"type":{"label":")","beforeExpr":false,"startsExpr":false,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null},"start":95,"end":96,"loc":{"start":{"line":6,"column":18},"end":{"line":6,"column":19}}},{"type":{"label":"{","beforeExpr":true,"startsExpr":true,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null},"start":97,"end":98,"loc":{"start":{"line":6,"column":20},"end":{"line":6,"column":21}}},{"type":{"label":"return","keyword":"return","beforeExpr":true,"startsExpr":false,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null,"updateContext":null},"value":"return","start":103,"end":109,"loc":{"start":{"line":7,"column":4},"end":{"line":7,"column":10}}},{"type":{"label":"string","beforeExpr":false,"startsExpr":true,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null,"updateContext":null},"value":"Piotr","start":110,"end":117,"loc":{"start":{"line":7,"column":11},"end":{"line":7,"column":18}}},{"type":{"label":";","beforeExpr":true,"startsExpr":false,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null,"updateContext":null},"start":117,"end":118,"loc":{"start":{"line":7,"column":18},"end":{"line":7,"column":19}}},{"type":{"label":"}","beforeExpr":false,"startsExpr":false,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null},"start":121,"end":122,"loc":{"start":{"line":8,"column":2},"end":{"line":8,"column":3}}},{"type":{"label":"}","beforeExpr":false,"startsExpr":false,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null},"start":123,"end":124,"loc":{"start":{"line":9,"column":0},"end":{"line":9,"column":1}}},{"type":{"label":"eof","beforeExpr":false,"startsExpr":false,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null,"updateContext":null},"start":125,"end":125,"loc":{"start":{"line":10,"column":0},"end":{"line":10,"column":0}}}]

AST

AST EXPLORER

Thank you

AST

By Przemek Suchodolski

Made with Slides.com

AST

  • 272

More from Przemek Suchodolski