JavaScript 入門教學-01：從基本概念到常見陷阱完整攻略

這裡是學怎麼跟 JavaScript 打招呼，認識它的基本規則和容易踩的雷

JavaScript通常會搭配HTML, CSS 來架設可以互動的網站，我個人覺得JavaScript 蠻反直覺的，譬如打印的語法是console.log，以前在學都不知道是什麼意思。原來，console 是指某個封包.log 就是物件底下的方法，開了窗口做事。

ECMA 標準（ES6）(要舉例)

這裡是學什麼：認識 JavaScript 的「遊戲規則」。ECMAScript 就像 JS 的說明書，告訴你這語言怎麼寫。ES6 是 2015 年出的新版規則，加入了很多好用的寫法（像 let 和箭頭函式），學 JS 就從這裡開始！

白話解釋：想像 JS 是個廚房，ES6 教你怎麼用新款烤箱和刀具，做出更好吃的菜。

ECMA標準（ES6），全稱ECMAScript 2015，是JavaScript程式語言的第六個版本，由ECMA International組織於2015年6月發布，有這個框架後可以用在 React、Vue。這個版本有幾個特點，先舉出幾個：

• let 和 const：幾乎無處不在，因為它們取代了 var，提供更安全的變數作用域管理。const 用於不可變值，let 用於需要重新賦值的變數，避免 var 的提升問題。現在程式開發者會比較喜歡用 let 和 const.
• 想像你把東西放進盒子，let 是可以換內容的盒子，const 是鎖死的盒子，var 是破洞的盒子，東西會漏出去。用 let 和 const 比較安全！

1. 作用域（Scope）
2. • var：函數作用域（function scope），在整個函數內可access。明明console.log在if外面，但還是讀得到。
   • let 和 const：區塊作用域（block scope），只在 {} 區塊內有效（如 if、for 迴圈）。

if (true) {
  var a = 1;
  let b = 2;
  const c = 3;
}
console.log(a); // 1（房間裡到處都找得到）
console.log(b); // ❌ Error（b 只活在 if 裡）
console.log(c); // ❌ Error（c 只活在 if 裡）

1. 變數提升（Hoisting）(白話文：偷看？）
2. • var：會被提升到作用域頂部，宣告前可存取（值為 undefined）。
   • let 和 const：不會

console.log(x); // undefined（偷偷先宣告但沒值）
var x = 5;

console.log(y); //  Error
let y = 10;

1. 重新賦值
2. • var 和 let：允許重新賦值。
   • const：不可重新賦值，但物件或陣列的內容可修改（因為它鎖定的是參考而非內容）。

let name = "Tom";
name = "Jerry"; // 可以跑出 Jerry

const age = 30;
age = 31; // 會出現TypeError: Assignment to constant variable.

const person = { name: "Alice" };
person.name = "Bob"; // OK（可以改內容）但不能把整個{}改掉。

JS 宣告變數， var 與 let / const 差異

此圖由AI Grok生成

Global Scope, Local Scope, Block Scope

這裡是學什麼：學東西在程式裡的「活動範圍」，像是家裡還是房間。

白話解釋：Scope 是東西能被看到的範圍。全域（global scope）像放在客廳的東西，全家都能用；區域（local scope）像放房間的東西，只有房間裡能用；區塊（block scope）像抽屜裡的東西，只有特定小地方能用。學這個就像知道東西放哪才安全！

1. Global Scope（全域作用域）：變數定義在程式最外層，任何地方都能存取，像「客廳的東西」。
2. Local Scope（區域作用域）：變數定義在函數內，只有該函數內可存取，像「房間的東西」。
3. Block Scope（區塊作用域）：變數定義在 {} 區塊內（如 if、for），只有區塊內可存取，像「抽屜的東西」。

**補充說明:這裡的 function 是按按鈕的感覺，讓程式會比較有組織、可以重複使用。

想像一下你每天都要做一樣的事（像吃早餐、報時、顯示歡迎詞），你不會每次都重寫整段程式碼和 console.log，只要「按按鈕」就好。

let globalToast = "客廳吐司"; //在全域的狀態，都可以使用
function eat() {
  console.log(globalToast); // 客廳吐司
}
eat();
console.log(globalToast); // 客廳吐司

function makeBreakfast() {
  var roomToast = "房間吐司";//變數藏在function
  console.log(roomToast); // 房間吐司 只能在function裡面
}
makeBreakfast();
console.log(roomToast); // ReferenceError: roomToast is not defined

if (true) {
  var varToast = "var吐司"; // 逃到房間或客廳
  let letToast = "let吐司"; // 鎖在抽屜 
  const constToast = "const吐司"; // 鎖在抽屜
  console.log(letToast, constToast); // let吐司 const吐司
}
console.log(varToast); // var吐司 (var 會適用全域)
console.log(letToast); // ReferenceError

只有包在{}裡的才能顯現，因為變數被包住，所以後面的console.log就找不到reference

七種基本資料型別 vs. 物件（Primitive Data Type & Object, call by value, call by reference）

這裡是學什麼：學 JS 裡的「東西」分兩種：基本資料（像數字、字串）和物件（像陣列）特別注意在JS 沒有像python有字典的功能。還要知道它們怎麼被「複製」（基本資料是影印，物件是共用）。 這個概念有點複雜，我會另外寫文章解釋。

白話解釋：基本資料型別（像 number、string、null）是獨立的便條紙，寫了就不能改；物件（像 {} 或 []）是共享的筆記本，改了大家都能看到。call by value 像影印便條紙，call by reference 像給筆記本的連結。

• 基本資料型別：傳值（Call by Value），複製值，獨立儲存。
• • 複製值到新變數，修改新變數不影響原值。
• 物件：傳參考（Call by Reference），複製參考位址，共享記憶體。
• • 複製記憶體位址，修改物件屬性會影響所有參考該物件的變數。

七種基本資料型別

1. Number：數字（整數、浮點數），例如 42 或 3.14。
2. String：字串，例如 "Hello"。
3. Boolean：布林值，true 或 false。
4. Undefined：未定義，例如未初始化的變數。
5. Null：空值，表示「無」。
6. Symbol（ES6 引入）：唯一標識符，例如 Symbol("id")。
7. BigInt：大整數，例如 12345678901234567890n。

物件（Object）

• 包括物件（{}）、陣列（[]）、函數（function）等。
• 儲存參考位址，修改會影響所有指向該物件的變數。

Object跟Number是常用的資料型別(此圖由AI生成)

JS 的 Bug：typeof(null) is object

這裡是學什麼：認識 JS 的「怪脾氣」。比如 typeof null 說它是 object，但你看前面null 明明就是一個，這是 JS 早年的錯誤，留到現在。還有其他容易搞亂的坑。

null 是基本資料型別（Primitive Type），不是物件， typeof 會誤報。

console.log(typeof null); // "object" 這是錯的不要理他

JS 的 Bug : Coercion（為何 string 是 primitive 卻有 .toUpperCase() 方法）

這裡是學什麼：學 JS 怎麼「雞婆幫你轉東西」，還有為什麼簡單的字串（string）也能用 .toUpperCase() 這種招數。

白話解釋：Coercion 是 JS 擅自把東西換成另一種格式（像把數字變字串），有時幫你，有時害你。

1. 雞婆轉換文字和數字

console.log("1" + 1); // "11"（字串拼接）

console.log("1" - 1); // 0（轉為數字運算）

• 原因：+ 偏好字串拼接，而 - 強制轉為數字。
• 提醒讀者使用 parseInt 或 Number() 明確轉型，Number() 記得要大寫

let str = "1";
console.log(Number(str) + 1); // 2

JS bug ：浮點數精準的問題，居然會算錯!!

var sum = 0.1 + 0.2;
console.log(sum); // 0.30000000000000004
console.log(sum.toFixed(1)); // "0.3"

JS 的 Bug : hoisting

這裡是學什麼：學 JS 怎麼「偷跑」。它會把你的 var 或函式提到程式前面，但有時會讓你抓狂。 白話解釋：hoisting 像 JS 在開工前把你的工具（var ）先擺好，但沒放東西進去，所以你可能用到空的工具，程式就出錯。

var 的提升可能隱藏錯誤，建議用 let 或 const 讓程式更安全。

console.log(a); // undefined（var 提升）
var a = "吐司";

console.log(b); // ReferenceError（TDZ）
let b = "麵包";

咦，那undefined 跟 ReferenceError差在哪裡?

undefined 是「正常狀態」(偵測到有值，但不知道是誰)，而 ReferenceError 是「錯誤狀態」。

以上為第一部分 JavaScript 的簡介，因為我覺得 JS 是個很麻煩的語言，所以我用 Grok AI 協助我學習跟產生圖表。