> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/js/compile/lexing.md).

# lexing

[JS](/web/js.md) ⟩ [concepts](/web/js/concept.md) ⟩ [compiler](/web/js/compile.md) ⟩ 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](/web/js/grammar/token.md)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](/web/js/grammar/token.md)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&amp;token=bddd2d95-b3bd-4452-b75c-522a37703511" alt="3 steps of compilation" class="gitbook-drawing">
{% endtab %}

{% tab title="🔴 主題" %}

* [token](/web/js/grammar/token.md)
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] [YDKJS: Scope & Closures (v.2)](/web/master/ref/book/you-dont-know-js-series-v.2/ydkjs-scope-and-closures-v.2.md) ⟩ [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 %}