> ## Content Index
> Fetch the complete content index at: https://blog.anthea.day/llms.txt
> Use this file to discover other available public pages before exploring further.

# React 初心者大補帖（1）：為什麼 const 可以在宣告前使用
- URL: https://blog.anthea.day/series-react-beginner-1/
- Published: 2025-05-23T02:13:21.000Z
- Updated: 2026-11-07T19:59:19.000Z
- Author: Anthea / 芫荽
- Tags: #Migrated-1792241843742, #Import 2026-10-17 12:57, Coding, React 初心者大補帖

在開發 React Component 或 Hook 時，常會看到像這樣的程式碼：

![](https://blog.anthea.day/content/images/2026/10/1-6jnxchwohkiff5tigpc78g.png)

這看起來像是違反了 JavaScript 的規則，因為你在宣告 someStrategy 之前就用了它，**但實際上這是合法的行為**，也是 JavaScript 的預期表現。

一般來說，我們會在學習 JavaScript 的過程中看到這件事情：在 JavaScript 中，使用 const 或 let 宣告的變數**不能在宣告之前被使用**，否則會拋出 ReferenceError，這段期間稱為 **TDZ（Temporal Dead Zone，暫時性死區）**。

也就是說，如果你在變數「初始化之前」就嘗試使用它，JS 會拒絕執行：

![](https://blog.anthea.day/content/images/2026/10/1-bjtp35sghak1bttkn4um8q.png)

所以我們直覺上會認為：

> *「變數宣告在下面，上面就不該能用了吧？」*

但實際上，在 React 函式（或 Hook）中這種結構是合法的，讓我們一起看下去吧。

---

### React 並沒有魔法

看起來在 React 中很神奇的事情，其實背後還是離不開 JavaScript 原本的行為。讓我們先來看看兩件事情的運作：Hoisting & 函式延遲執行（Deferred Execution）。

#### 1.模組層級的 Hoisting（提升）

在 ES Module 中，所有頂層的變數（const、let、var）、函式（function）在解析階段都會被「**提升（hoist）**」，意思是：JavaScript 會先掃描整個模組，把變數名稱、函式簽名都「先登記起來」。

不過 const/let 會處在 **Temporal Dead Zone（暫時性死區，TDZ）** 中，直到程式執行到那行才初始化。因此：

![](https://blog.anthea.day/content/images/2026/10/1-efylordr4buvhuafbpyz5q.png)

#### 2.函式是延遲執行（Deferred Execution）

在 JavaScript 中，**函式的「定義」和「執行」是兩回事**。

當 JS 解讀一段程式時，它會先記住你定義了哪些函式，但不會馬上執行它們，直到你主動「呼叫」它們為止。

舉個例子：

![](https://blog.anthea.day/content/images/2026/10/1-8zchgcowchl0orjnbcucsw.png)

在 React 裡也是一樣， `useHello` 是一個函式，它的內容直到被呼叫時才會執行。因此即使 strategy 使用了尚未「寫到」的 `helloStrategy` ，只要函式呼叫的時候 `helloStrategy`已經初始化完，就不會有問題。

---

綜合以上兩點，我們可以理解到 React 並沒有魔法，在 const 定義前先呼叫並使用 const 的值是 JavaScript 裡正常的行為，只是因為 **模組先執行、函式後呼叫** 所帶來的結果。

以上就是今天的觀察到的美麗的誤會，我們下次再見 👋