Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Parsing Javascript

Parsing Javascript

The document provides an in-depth look at the process of parsing in Javascript. It explains parsing as the transformation of a programming language described in strings into a structured state. Key topics include the flow of parsing (reading source code, converting Unicode sequences and escapes, tokenization, etc.), dealing with Javascript escapes, lexical analysis, syntax analysis using Backus-Naur Form (BNF), top-down and bottom-up parsing methods, and challenges in parsing regular expressions, template literals, destructuring assignments, and arrow functions. The document also discusses pre-parsing in browsers and testing for custom parsers, highlighting the complexity and intricacies involved in parsing Javascript.

「Parsing Javascript」は、Javascriptのパース(解析)プロセスについて詳細に説明しています。この文書は、文字列で記述されたプログラミング言語を構造化された状態に変換するパースの流れ(ソースコードの読み込み、Unicodeシーケンスとエスケープの変換、トークン化など)、Javascriptエスケープの扱い、字句解析、Backus-Naur Form(BNF)を使用した構文解析、トップダウンとボトムアップのパース方法、正規表現、テンプレートリテラル、分解代入、アロー関数のパースの難しさについて述べています。また、ブラウザでのプリパースやカスタムパーサーのテストについても触れており、Javascriptのパースにおける複雑さと繊細さを強調しています。

Transcript

  1. Who Name 青野健利 GitHub @brn Twitter @brn227 What Dev Lead

    at 株式会社AI Shift Contributor of V8 Javascript Engine
  2. 各種Escapeのdecode What is parsing Javascriptには以下のEscape Sequenceがあるので Decodeして文字列化しておく 1. Unicode Sequence

    2. Hex Escape 3. Ascii Escape 4. Octal Literal 5. Binary Literal "\u0056" 0xFFFFFF "\x12" 0777 0b0000001
  3. BNF What is parsing <expression> ::= <term> | <expression> "+"

    <term> | <expression> "-" <term> <term> ::= <factor> | <term> "*" <factor> | <term> "/" <factor> <factor> ::= <number> | "(" <expression> ")" <number> ::= <digit> | <number> <digit> <digit> ::= "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" このBNFは単純な算術演算("2*(3+4)" や “5-3/2”のような)を表している
  4. BNF What is parsing 多くのプログラミング言語はBNFによる文法の定義を持っている Ecmascriptも例外ではなく ECMA262の仕様書のAppendix A Grammar Summary

    というページが存在し、そこにBNFで文法が定義されている https://262.ecma-international.org/14.0/#sec-grammar-summary
  5. 左端導出 What is parsing const a = "Hello World" 7BSJBCMF%FDMBSBUJPO.PEJ

    fi FS*EFOUJ fi FS&YQS PNJU  .PEJUJ fi FSlDPOTUzclMFUz *EFOUJ fi FS$IBS PNJU 
  6. const a = "Hello World" 7BSJBCMF%FDMBSBUJPO const a = "Hello

    World" .PEJUJ fi FS const a = "Hello World" .PEJUJ fi FS *EFOUJ fi FS lDPOTUz const a = "Hello World" .PEJUJ fi FS *EFOUJ fi FS lDPOTUz $IBS PNJU  B
  7. const a = "Hello World" .PEJUJ fi FS *EFOUJ fi

    FS lDPOTUz $IBS PNJU  B &YQS PNJU  const a = "Hello World" .PEJUJ fi FS *EFOUJ fi FS lDPOTUz $IBS PNJU  B &YQS PNJU  4USJOH-JUFSBM 0NJU  l)FMMP8PSMEz
  8. const a = "Hello World" .PEJUJ fi FS *EFOUJ fi

    FS lDPOTUz $IBS PNJU  B &YQS PNJU  4USJOH-JUFSBM 0NJU  l)FMMP8PSMEz 7BSJBCMF%FDMBSBUJPO
  9. 右端導出 What is parsing const a = "Hello World" 7BSJBCMF%FDMBSBUJPO.PEJ

    fi FS*EFOUJ fi FS&YQS PNJU  .PEJUJ fi FSlDPOTUzclMFUz *EFOUJ fi FS$IBS PNJU 
  10. const a = "Hello World" .PEJUJ fi FS 4 const

    a = "Hello World" .PEJUJ fi FS 3 *EFOUJ fi FS 4 lDPOTUz const a = "Hello World" .PEJUJ fi FS 3 *EFOUJ fi FS 3 lDPOTUz $IBS PNJU  B < DPOTU 4 4FYQFDUFE> <.PEJ fi FS  B 4 4FYQFDUFE> <.PEJ fi FS *EFOUJ fi FS 4>
  11. const a = "Hello World" .PEJUJ fi FS 3 *EFOUJ

    fi FS 3 lDPOTUz $IBS PNJU  B &YQS PNJU  4 const a = "Hello World" .PEJUJ fi FS 3 *EFOUJ fi FS 3 lDPOTUz $IBS PNJU  B &YQS PNJU  3 4USJOH-JUFSBM PNJU  3 l)FMMP8PSMEz <.PEJ fi FS *EFOUJ fi FS 4> <.PEJ fi FS *EFOUJ fi FS &YQS>
  12. const a = "Hello World" .PEJUJ fi FS 3 *EFOUJ

    fi FS 3 lDPOTUz $IBS PNJU  B &YQS PNJU  3 4USJOH-JUFSBM PNJU  3 l)FMMP8PSMEz <7BSJBCMF%FDMBSBUJPO>
  13. ({a = 1}) = {a} ObjectLikeLiteral { Property { has_assignment

    = true Identifier {a} } } ({a = 1}) = {a} ObjectLikeLiteral { Property { has_assignment = true Identifier {a} } } Validationを実施 has_assignmentは許可される
  14. ({a = 1}) ObjectLikeLiteral { Property { has_assignment = true

    Identifier {a} } } ({a = 1}) ObjectLikeLiteral { Property { has_assignment = true Identifier {a} } } Validationを実施 has_assignmentは許可されないので エラー
  15. ArrowFunctionがつらい Parsing Javascript (a, b, c = 1) => {}

    (a, b, c = 1) この2つを左からParseして別の構文木として作り上げる必要がある そのため、Ecma262では CoverCallExpressionAndAsyncArrowHead というExpressionとArrowFunction両方をカバーするための文法規則が導入されている
  16. PreParsingとは PreParsing function A() { alert(1) } function B ()

    { alert(2) } document.addEventListener("#target", "click", () => { A() B() }) 関数AとBはParseされずに document.addEventListenerがParseされる AとBはclickが発生したタイミングでParseされる