Abstract Syntax Tree in Javascript

Transcript

1. Abstract Syntax Tree in Javascript

2. Name @brn (ꫬꅿ⨳ⵃ) Occupation ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص، Company Cyberagent ،سذؙأةآؔ AI Messenger

   OSS Contributor of V8 Blog http://abcdef.gets.b6n.ch/ Twitter https://twitter.com/brn227 GitHub https://github.com/brn

3. What is AST?
   ASTהכJavascriptךفؚٗٓي׾ػ٦أ׃׋穠卓欰䧭ׁ׸׷ 圓俑׾邌植׃׋加圓鸡ךֿה
   

4. if (x) { x = 100 }

5. IF CONDITION THEN BLOCK EXPRESSION STATEMENT ASSIGN VAR PROXY (X)

   LITERAL (100) if (x)
   
   {
   
   x = 100
   
   

6. Why need it?
   فؚٗٓيך㶵꬗׾׉ךתת⢪ֲךכꨇ׃ְկ javascript׾㹋遤ׅ׷׋׭חכ圫ղזؿؑ٦ؤָ֮׷կ غ؎ز؝٦س欰䧭ծCFG欰䧭ծIR欰䧭ծ剑黝⻉ծetc…

7. How do I create it?
   فؚٗٓىؚٝ鎉铂חכ㛇劤涸חכ俑岀ָ㶷㖈ׅ׷կ JavascriptכEcmaInternationalָ➬圫׾תה׭גⰕꟚ׃גְ׷կ

8. None

9. Grammars
   ׉ך⚥ח俑岀ָ㹀纏ׁ׸גְ׷ل٦آָ֮׷ךד׉ֿ׾⿫撑ׅ׷ֿ הדػ٦؟٦׾剅ֻֿהָדֹ׷կ
   

10. None

11. But…
    ֿך俑岀㹀纏כ㛇劤涸ח׉ךתת⢪ֲךכꨇ׃ְկ

12. Javascript become too complex
    Javascriptך俑岀כַז׶醱꧟חז׏גֹגֶ׶ծ秪磏ח׉ךתת ػ٦أׅ׷ֿהַָז׶ꨇ׃ְկ
    

13. var a = /aaa|bbb/! b / 2 = 0;! !

    // Is it easy?! b = / 2 = 0 /! ת׆כ剣せז姻鋉邌植ַ׵
    

14. var a = (x, y) => x + y;! var

    a = (x, y);! ! var a = x => x;! var a = x;! ،ٗ٦ꟼ侧
    
15. None

16. var {a: b, b: c} = {b: 1, c: 2};!

    ({a: b, b: c});! ! [a, b, c] = [0, 1, 2];! [a, b, c];! ⴓⶴ➿Ⰵ
    

17. Parser has many state
    穠㽷Parserכ㣐ꆀך朐䡾׾⥂䭯׃זָ׵갹䓸׏גػ٦أׅ׷׃ַז ְկ
    

18. AST Usage
    蕱⸤׃ג⡲׶♳־׋ASTכוֲ⢪׻׸גְ׷ךַ
    

19. In V8
    ASTַ׵Scope׾欰䧭׃׋׶ׅ׷ ׁ׵ח剑穄涸חBytecode׾欰䧭׃ג㹋遤ׅ׷ YieldװAsync٥Awaitך圓俑׾JavascriptךStateMachineח㢌䳔ׅ ׷

20. In Babel
    AST׾㢌䳔׃ג剑倜ךJavascriptַ׵植㖈ךJavascriptפ㢌䳔ׅ׷

21. In istanbul
    AST׾㢌䳔׃גぐ؝٦س꟦ח鸐麓׃׋⽩׾➰ֽ׷؝٦س׾㙵׭鴥׬

22. Try and play AST
    Esprima׾⢪ֲֿהד知⽃חAST׾欰䧭ׅ׷ֿהָדֹ׷ ת׋ https://github.com/estools חػ٦أ׃׋׶AST׾Query׃׋׶ׅ׷خ٦ָٕ尶㿊֮׷ךד鑐׃ ג׫׷ה葺ְ

23. Summary
    AST׾鍗׷ה鸐䌢ךفؚٗٓيדכꨇ׃ַ׏׋ֿהָ葿ղדֹ׷״ ֲחז׷ 嚂׃ְךד僽ꬊ♧㔐ֻ׵ְכ鑐׃ג׫׷הְְה䙼ֲ