函式 function 與箭頭函式
函式的角色就像「一個小工廠」，輸入東西，經過加工，輸出結果。

傳統函式宣告

function greet(name) {
  return "Hello, " + name;
}

console.log(greet("Sunny")); // Hello, Sunny
console.log(greet("小明"));  // Hello, 小明

function greet(name) → 建立一個名字叫 greet 的函式
name 是「參數 (parameter)」
return → 回傳值

參數與預設值

function add(a, b = 10) {
  return a + b;
}

console.log(add(5));     // 15 (b 預設是 10)
console.log(add(5, 3));  // 8

函式表達式 (Function Expression)
函式也可以存在變數裡。

const square = function(x) {
  return x * x;
};

console.log(square(4)); // 16

箭頭函式 (Arrow Function, ES6)
箭頭函式是一種更簡短的寫法。

基本寫法

const greet = (name) => {
  return `Hello, ${name}`;
};

console.log(greet("Sunny"));

省略寫法

如果只有一行 return → 可以省略 {} 和 return
如果只有一個參數 → 可以省略 ()

const double = x => x * 2;
console.log(double(5)); // 10

函式的作用域 (Scope)
變數在函式裡面宣告，只能在該函式內使用。

function test() {
  let msg = "Hello";
  console.log(msg); // OK
}
console.log(msg); // ❌ 錯誤，外面讀不到

🔹和網頁結合：按鈕呼叫函式
範例 1：onclick 呼叫函式

<button onclick="sayHello()">點我</button>

<script>
function sayHello() {
  alert("Hello Sunny!");
}
</script>

👉 按下按鈕時，會呼叫 sayHello() 函式，跳出提示框。

範例 2：箭頭函式 + 事件綁定

<button id="btn">點我</button>

<script>
const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  alert("這是箭頭函式的事件處理！");
});
</script>

👉 用箭頭函式搭配 addEventListener，更現代也更推薦。

範例 3：帶參數的函式

<button onclick="sayHi('Sunny')">打招呼</button>

<script>
function sayHi(name) {
  alert("Hi, " + name + "!");
}
</script>

👉 可以傳入參數，讓函式更彈性。