在昨天的文章中，我們認識了JavaScript的五大基礎資料型態，並學會用運算子讓JavaScript幫我們處理加減乘除與邏輯比較。

但如果我們希望網頁能把算好的幾何數據「暫時記住」，以便在後續的排版或程式邏輯中反覆使用，我們就需要引入JavaScript最核心的東西：變數宣告。

你可以把變數想像成是一個個貼了標籤的專屬置物櫃。我們把資料放進櫃子裡，並貼上名字，以後只要喊出櫃子的名字，就能隨時取出裡面的資料，而在JavaScript的歷史演進中，一共出現了三種打造置物櫃的關鍵字：var、let 與 const。

三大宣告工具的幾何特性與本質差異

隨著JavaScript的標準（ECMAScript）在2015年迎來了ES6的重大變革，現代前端開發已經全面改變了變數的使用習慣，我們接下來將拆解它們的本質：

1.var（舊時代的傳統置物櫃）

• 特性：這是JS誕生之初就存在的關鍵字，它的限制非常寬鬆，允許你在同一個程式空間中重複宣告同名的變數。
• 缺陷：因為太寬鬆了，容易導致後面的程式碼不小心把前面的資料覆蓋掉，且它的幾何作用域範圍容易產生漏洞（這部分我們會在Day 28詳細拆解）。在現代開發中，已經全面棄用var。

2.let（現代的彈性置物櫃）

• 特性：ES6推出用來取代var的新一代關鍵字，它不允許在同一個作用域內重複宣告同名變數，如果嘗試這樣做，JavaScript會立刻噴出錯誤（SyntaxError），安全度極高。
• 使用場景：當你預期櫃子裡的資料未來會需要被修改、被重新賦予新值時，就使用let，例如：會員的登入狀態、遊戲的分數、商品的購買數量。

3.const（現代的鋼鐵保險箱）

• 特性：同樣是ES6推出的新關鍵字，代表常數（Constant），它就像一個被焊死的鋼鐵保險箱，在宣告的同時就必須放進初始資料，且放進去之後，絕對不允許被重新賦值。
• 使用場景：當你希望這個資料在整段程式運作過程中永遠保持不變、禁止被修改時，就使用const，例：圓周率3.14159、一秒=1000 毫秒、網站的API網址。

表格介紹

範例

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>Day22 變數宣告 var、let、const</title>
</head>
<body>

    <h1 style="text-align: center;">請打開Console觀察變數與防禦機制</h1>

    <script>
        // var的失控現象 
        var score = 100;
        var score = 200; // 允許重複宣告
        console.log("var 的分數為：" + score); // 印出200，舊資料消失了

        // 現代 let 的彈性與安全防護
        let playerAge = 18;
        playerAge = 19;  // 櫃子內容可以被更新（重新賦值）
        console.log("玩家年齡變更為：" + playerAge); // 印出 19

        // let playerAge = 25; // 拿掉註解會噴錯，SyntaxError: Identifier 'playerAge' has already been declared

        // 現代 const 的鋼鐵防禦 
        const PI = 3.14159;
        console.log("幾何圓周率為：" + PI);

        // PI = 3.14; // 拿掉註解會立刻噴錯，TypeError: Assignment to constant variable.
    </script>
</body>
</html>

當拿掉let playerAge = 25;的註解時

當拿掉PI = 3.14;的註解時

解析

當你嘗試在程式中刪掉let playerAge = 25; 或 PI = 3.14; 的註解時，你會發現控制台會亮起紅色的錯誤警示。

• 這是 JavaScript 大腦的主動防禦機制，透過let與const，瀏覽器在編譯階段就能幫我們擋下「不小心改到重要常數」或「重複命名導致資料覆蓋」的悲劇，讓程式碼的幾何結構變得無比穩固。

總結

今天我們成功搞懂了JavaScript中用來記住資料的三大置物櫃關鍵字，現代前端開發的核心非常簡單：「預設全部使用 const，只有當你明確知道這個變數的數值後續會被修改時，才改用let；至於var，就讓它留在歷史中吧。」

有了變數作為基石，我們的網頁大腦不僅能記住資料，還能開始進行更複雜的決策了。

明天（Day 23），我們將讓JavaScript擁有「判斷與抉擇」的能力，進入條件判斷式與迴圈控制（if-else、switch、for、while），去看看如何讓程式根據不同的狀況，走入不同的方向，明天見。