---
description: 🚧 施工中
---

# compilation

[JS]() ⟩ compile

{% hint style="success" %}
<mark style="color:yellow;">**3 stages of compilation：**</mark>

* [lexing](compile/lexing "mention"): <mark style="color:orange;">**source code**</mark> -> [token](grammar/token "mention")s.\
  (e.g.,  <mark style="color:blue;">`var a = 2;`</mark> -> <mark style="color:blue;background-color:green;">`var`</mark> , <mark style="color:blue;background-color:green;">`a`</mark> , <mark style="color:blue;background-color:green;">`=`</mark> , <mark style="color:blue;background-color:green;">`2`</mark> , <mark style="color:blue;background-color:green;">`;`</mark> )
* [parsing](compile/parsing "mention"): [token](grammar/token "mention")s -> <mark style="color:orange;">**AST**</mark> (<mark style="color:yellow;">**abstract syntax tree**</mark>).
* [code-generation](compile/code-generation "mention"): <mark style="color:orange;">**AST**</mark> -> <mark style="color:orange;">**executable code**</mark>.
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
JavaScript code is <mark style="color:purple;">**compiled**</mark> first, and then <mark style="color:yellow;">**execute**</mark>. (not interpreted line by line)
{% endhint %}

{% hint style="info" %}
while [scope](scope "mention")s are <mark style="color:yellow;">**identified**</mark> during [compile](compile "mention"), they're <mark style="color:red;">**not**</mark> actually <mark style="color:yellow;">**created**</mark> <mark style="color:red;">**until**</mark> [runtime](compile/runtime "mention") (each time a scope needs to run).
{% endhint %}

{% hint style="warning" %}
<mark style="color:purple;">**compilation**</mark>&#x20;

* <mark style="color:red;">**doesn't**</mark>**&#x20;**<mark style="color:yellow;">**do anything**</mark> in terms of <mark style="color:yellow;">**reserving memory**</mark> for [scope](scope "mention")s and [variable](variable "mention")s, <mark style="color:red;">**none**</mark> of the program has been <mark style="color:yellow;">**executed**</mark> yet.
* creates a <mark style="color:yellow;">**map**</mark> of all the [lexical-scope](scope/lexical-scope "mention")s of the program.&#x20;
{% endhint %}

{% hint style="info" %}
<mark style="color:yellow;">**runtime**</mark>

* all the [scope](scope "mention")s (aka, "<mark style="color:purple;">**lexical environments**</mark>") and [id](grammar/token/id "mention")s ([variable](variable "mention")s) for each scope are created at <mark style="color:red;">**runtime**</mark>.
{% endhint %}
{% endtab %}

{% tab title="📗 參考" %}
* [ ] [ydkjs-scope-and-closures-v.2](../master/ref/book/you-dont-know-js-series-v.2/ydkjs-scope-and-closures-v.2 "mention") ⟩ [Ch. 1: What's the Scope?](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch1.md#chapter-1-whats-the-scope)
* [ ] Osman ⟩ [Javascript — How the Engine Compiles?](https://medium.com/@osmanakar_65575/javascript-how-the-engine-compiles-6df6d5c6439c)
{% endtab %}

{% tab title="🔴 主題" %}
* <mark style="color:yellow;">**stages of compilation：**</mark>
  * [lexing](compile/lexing "mention") <mark style="color:orange;">**- source code ->**</mark> [token](grammar/token "mention")s.
  * [parsing](compile/parsing "mention") <mark style="color:orange;">**-**</mark> [token](grammar/token "mention")s -> AST
    * [early-errors](err/compile/early-errors "mention") - errors on code <mark style="color:yellow;">**parsing**</mark> stage.
  * [code-generation](compile/code-generation "mention") <mark style="color:orange;">**- AST -> executable code.**</mark>
* <mark style="color:yellow;">**other topics**</mark>
  * [js-compiled](compile/js-compiled "mention") language.
  * [lhs](variable/access/lhs "mention")
  * [rhs](variable/access/rhs "mention")
  * [lhs-vs-rhs](variable/access/lhs-vs-rhs "mention")
  * [hoist](scope/hoist "mention")
{% endtab %}

{% tab title="🗺️ 圖表" %}
<img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FbOhtr4sbZOP3NTLHGCvF%2Ffile.drawing.svg?alt=media&#x26;token=bddd2d95-b3bd-4452-b75c-522a37703511" alt="3 steps of compilation" class="gitbook-drawing">
{% endtab %}

{% tab title="🚧" %}
* [ ] abstract syntax tree (AST)
* [ ] lexical environments
{% endtab %}
{% endtabs %}
