ES6是 ECMAScript 2015 的簡稱，是 JavaScript 的重大版本更新。
從這個版本開始，語言變得更強大，也更容易閱讀與維護。

變數宣告方式：let 與 const

• 在 ES6 之前，只有 var 可以宣告變數。
  var 屬於「函式範疇（function scope）」，容易發生變數污染。
  因此 ES6 新增了兩種更安全的宣告方式：let 和 const。

let

屬於區塊範疇（block scope）。

• 不能重複宣告 相同名稱的變數。
• 能有效避免變數被意外修改或覆蓋。

let name = "Kenneth";
name = "Leo"; // 可以重新指派
let name = "John"; // 無法重複宣告

const

屬於區塊範疇（block scope）。

• 在第一次宣告並指派後，就不能再被修改。
• 宣告時必須同時給值，否則會出現錯誤。

const PI = 3.14; 
PI = 3.14159; //  無法重新指派

const city; //  必須同時賦值

const 與物件、陣列的例外情況

const fruitGroup = {
  dragonfruit: "火龍果",
  apple: "蘋果",
};

fruitGroup.banana = "香蕉"; // 仍可新增屬性

• 當 const 儲存的是「物件或陣列」時，
  無法改變變數的指向，但物件內部的屬性仍可被修改。
  因為 const 儲存的是「物件在記憶體中的位置」。

暫時性死區（Temporal Dead Zone）

• let 和 const 宣告的變數在程式執行時雖然會被「保留記憶體位置」，
  但在正式被指派值之前，變數不能被使用。
  這段「存在但不能用」的區間，被稱為 暫時性死區（TDZ）。

console.log(a); // ReferenceError
let a = 5;

• 這個特性雖然看似麻煩，
  卻能避免開發者依賴「變數提升」來寫程式，
  讓程式更可預期，也更容易維護。
• 有些團隊甚至建議：
  「能用 const，就不要用 let」，
  因為這樣可以避免變數被不小心修改。

遞迴（Recursion）

遞迴指的是「函式呼叫自身」。

• 結束條件（避免無限呼叫）
• 遞迴步驟（函式自己呼叫自己）

function sum(n) {
  if (n === 1) return 1;
  return n + sum(n - 1);
}

console.log(sum(5)); // 15

• 受到 stack（堆疊）限制，
  呼叫次數過多可能導致錯誤。

箭頭函式（Arrow Function）

• ES6 引入了 箭頭函式，讓函式宣告更簡潔，語法更直覺。
  這種語法又被稱為 Syntax Sugar（語法糖），意指「幫原本的語法包裝得更好讀」。

// 傳統寫法
function test(n) {
  return n;
}

// 匿名函式
const test = function(n) {
  return n;
};

// 箭頭函式
const test = (n) => {
  return n;
};

// 若只有一個參數可簡寫
const test = n => n;

語法糖實例

var arr = [1, 2, 3, 4, 5];

console.log(
  arr
    .filter(value => value > 1)
    .map(value => value * 2)
);
// [4,6,8,10]

• 箭頭函式讓整段程式更緊湊、可讀性也更高。
  如果用傳統寫法，會多出一堆 function 與大括號，

模組化：import 與 export

ES6 原生支援模組化語法。
export 用來匯出模組，import 用來引入模組。

匯出（Export）

// 方式一
export function add(a, b) {
  return a + b;
}
export const PI = 3.14;

// 方式二
function add(a, b) { return a + b; }
const PI = 3.14;
export { add, PI };

// 方式三（預設輸出）
export default function add(a, b) {
  return a + b;
}

匯入（Import）

// 對應方式一、二
import { add, PI } from './utils.js';
console.log(add(3,5), PI);

// 匯入預設
import add from './utils.js';

// 匯入全部
import * as utils from './utils.js';
console.log(utils.add(3,5), utils.PI);

• Node.js 無法直接執行 ES6 模組語法（import/export），
  可使用 babel-node 來執行。

模板字面值（Template Literal）

Template Literal 使用反引號（`）來包住字串。

• 可以直接插入變數（${}）
• 支援多行字串支援多行字符串
• 可讀性更高

function sayHi(name) {
  console.log(`Hello, ${name}, now is ${new Date()}`);
}

sayHi(`Nick`);

多行字串範例：

var str = `
hey
hi
yo
ya
`;
console.log(str);

先前寫法：

console.log('Hello, ' + name + ' now is ' + new Date());

現代寫法：

console.log(`Hello, ${name}, now is ${new Date()}`);

參考資料

• MDN Ｗeb Docs
• Udemy 2025網頁全端課程
• Lidemy課程
• ES6