今天是JavaScript學習紀錄的Day2！
在介紹完環境與框架後，我們要進一步認識「變數」跟「型別」～

今日的目標：

• 了解var、let、const的差別
• 變數作用域、變數提升（Hoisting）與暫時性死區（TDZ）
• JS七種原始型別與 Object 型別

1.變數宣告 : var、let、const

變數是什麼呢？
其實變數就是幫一段資料取名字，在 JavaScript 的歷史裡，宣告變數有三種方式：var、let、const。
我們會用他來「存放資料」，就像是個命名好的「箱子」，裡面可以裝任何東西，
這些資料可以放進去、拿出來、改掉或固定。

但要注意的是，不是所有「箱子」都可以接受這些更動喔！
我們可以把他們想像成是有不同脾氣的「箱子」，最主要的差異在於「作用域」與「是否可重新賦值」。

var：舊時代的變數宣告

• 早期只有 var，它的作用範圍是「整個函式」而不是「區塊」。
• 總體來說不太推薦使用，因為會容易造成預期外的錯誤。

宣告在函式內：在「區塊 {}」外也有效

if (true) {
  var x = 10;
}
console.log(x); // 10，因為var不是區塊作用域，在「區塊 {}」外也有效。

宣告在函式外：變成全域變數，會掛到 window 物件上（這就是全域變數）。

var a = 1;
console.log(window.a); // 1

let：區塊級變數

• let 是 ES6 新增的，用來取代 var。

宣告在函式內：只在宣告所在的「區塊 {}」中有效

if (true) {
  let y = 20;
}
console.log(y); // ReferenceError，因為 y 只存在 if 區塊內

宣告在函式外：
雖然像「全域變數」一樣也能在整個檔案裡使用，但並不等於「全域變數」喔！它是會被定義在外層作用域，不會掛到 window 物件上。

let b = 2;
console.log(window.b); // undefined

const：不可變常數

• const 與 let 的作用域相同（範例可參考上方let區塊）
• 差別在於 const 必須在宣告時「初始化」，而且不能再被重新賦值！
  因此常用於設定不會改變的值，例如設定檔、API URL、數學常數等。
  ➡️ 註：「初始化」的意思是
  當你用 const 宣告變數時，一定要馬上給它一個初始值，不能只宣告不賦值。let 可以先宣告，再賦值 ; 但const 一定要「宣告 + 賦值」同時完成。

正確
const pi = 3.14159; // 有賦值
錯誤
const x; // SyntaxError: Missing initializer in const declaration

• const不能再被重新賦值

const PI = 3.14159;
PI = 3.25; // TypeError：不能重新指定

• 注意：const 陣列或物件的「內容物」仍然可以改動，只是「參考位址」不能變！

const fruits = ["apple", "banana"];
fruits.push("mango"); // 可以改內容
// fruits = ["pear"]; 不能把陣列整個換掉

2.變數提升（Hoisting）與 暫時性死區（TDZ）

通常我們在程式執行前會先宣告變數，但如果我們先執行程式再宣告變數，就會造成「變數提升」！
「變數提升」意思是：變數宣告會在程式執行前被搬到作用域頂端，這就是「提升」。
但要注意的是，不同的宣告方式行為不同。

var 的變數提升

• var 會被提升，而且初始化為 undefined。

console.log(a); // undefined
var a = 10;

• 實際上 JavaScript 背後會這樣處理：

var a;        // 宣告被提升＋初始化undefined
console.log(a);
a = 10;       // 賦值留在原地

let / const 的提升

• let 和 const 只會提升「宣告」，但不會初始化。
• 在宣告前存取會造成錯誤，這段區域稱為「暫時性死區（TDZ, Temporal Dead Zone）」。

console.log(b); // ReferenceError
let b = 20;

暫時性死區（TDZ, Temporal Dead Zone）

• TDZ 指的是：從 作用域開始 到 變數宣告完成 之間的這一段程式區域，你不能使用該變數。
• 在 TDZ 裡使用變數會丟出 ReferenceError。

{
  console.log(x); // ReferenceError
  let x = 5;
  console.log(x); // 5
}

綜合變數提升與TDZ概念，以上這段程式我們可以這樣理解～

• 程式編譯階段：
  JavaScript 引擎已經「看見」let x 這個宣告，只做「宣告提升」，但不初始化。
  所以在這個 block 裡，x 變數已經存在，但還在 TDZ。

• 程式執行階段 (runtime)：
  跑到第一行 console.log(x) 時嘗試存取 x，但它還在 TDZ → ReferenceError。
  當執行到 let x = 10 這一行 → 引擎才真正初始化變數，x 綁定到 10。
  之後再呼叫 console.log(x); → 印出 10。

3.JavaScript七種原始型別與 Object 型別

根據 ECMAScript 標準，JavaScript 共有 7 種原始型別 (Primitive Types)，再加上一個 Object：

• Boolean：布林值（只有true / false）
• Null：刻意清空的值
• Undefined：變數已宣告但未賦值
• Number：數字（整數與浮點數）
• BigInt：可表示極大整數
• String：字串（文字資料）
• Symbol：獨一無二的值

let isStudent = true;    // Boolean
let empty = null;        // Null
let notSet;              // Undefined
let big = 123456789n;    // BigInt
let id = Symbol("uid");  // Symbol
let name = "小明";       // String
let age = 18;            // Number

• Object 型別
  除了原始型別之外，其他像是陣列、函式、日期、物件，都屬於 Object（物件型別）。

let person = { name: "小明", age: 18 };
let hobbies = ["coding", "music"];

今天結束了！明天的 Day 3，我們就要讓這些資料真正動起來囉～