# lexing

[JS](..) ⟩ [concepts](../concept) ⟩ [compiler]() ⟩ lexing stage

{% hint style="success" %}
:u6307: synonyms： <mark style="color:purple;">**tokenizing**</mark>/<mark style="color:purple;">**lexing**</mark> stage

<mark style="color:yellow;">**1st stage**</mark> of compilation： turns <mark style="color:yellow;">**source code**</mark> into [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> )
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="info" %}
the <mark style="color:yellow;">**difference**</mark> between <mark style="color:orange;">**tokenizing**</mark> and <mark style="color:purple;">**lexing**</mark> is：\
<mark style="color:purple;">**Lexer**</mark> is basically a <mark style="color:orange;">**tokenizer**</mark>, but it usually attaches <mark style="color:yellow;">**extra context**</mark> to the [token](../grammar/token "mention")s (this token is a number, that token is a string literal, etc.) \
:point\_right::green\_book: [Osman](https://medium.com/@osmanakar_65575/javascript-how-the-engine-compiles-6df6d5c6439c)
{% endhint %}
{% 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="🔴 主題" %}
* [token](../grammar/token "mention")
{% 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 %}
{% endtabs %}
