函数与作用域

这一课你将能做到

1. 声明函数并用参数接收输入、用 return 给出结果
2. 解释什么叫「作用域」（变量在哪可见），并能指出一段代码里谁能看见谁
3. 看懂箭头函数的基本写法，知道和普通函数在调用方式上的一点差别

为什么要学

把「评级」「校验年龄」复制粘贴三次，改规则就要改三处。
函数把一段逻辑打包，起个名字，需要时调用——这是编程最重要的习惯之一。

作用域则决定「名字在哪能用」。搞不清就会出现：外面改不到里面的变量、或者误用全局变量互相踩脚。

先建立图像

函数像榨汁机：
  输入（参数：苹果） → 处理 → 输出（return：果汁）
不写 return，默认得到 undefined（「没明确送出东西」）

作用域人话：变量的「可见范围」。
在函数里用 const/let 声明的变量，外面一般拿不到——这是好事，避免名字打架。

外层：site
  └─ 函数 greet 内：message
       greet 可读 site（往外找）
       外层不能读 message（进不去）

跟着做

步骤 1：函数声明

// 函数声明：有名字，可被调用
function add(a, b) {
  return a + b; // 把结果送出去
}
console.log(add(2, 3)); // 5
console.log(add);       // 函数本身（还没调用）

记住：add 是函数值；add() 才是调用并执行。

步骤 2：函数表达式与箭头函数

const add2 = function (a, b) {
  return a + b;
};

const add3 = (a, b) => {
  return a + b;
};

// 只有一句返回时可以更短：
const add4 = (a, b) => a + b;

console.log(add2(1, 2), add3(1, 2), add4(1, 2));

初学：三种都能算；团队项目里箭头函数很常见。
注意：箭头函数没有自己的 this（进阶话题）；DOM 回调里用箭头通常更省心。

步骤 3：作用域演示

const site = "CodeRoadMap"; // 外层

function greet(name) {
  const message = "欢迎，" + name; // 只在函数里
  return message + " @ " + site;   // 里面可以读外面的 site
}

console.log(greet("同学"));
// console.log(message); // 打开会报错：外面没有 message

你应看到欢迎语；若取消注释最后一行，会得到 ReferenceError——这正好说明作用域在起作用。

步骤 4：默认参数与提前校验

function labelScore(score, unit = "分") {
  if (!Number.isFinite(score)) {
    return "无效分数";
  }
  return `${score}${unit}`;
}

console.log(labelScore(95));        // 95分
console.log(labelScore(95, " pts")); // 95 pts
console.log(labelScore(NaN));       // 无效分数

默认参数减少「调用方漏传」时的尴尬；无效输入仍应用卫语句拦住。

步骤 5：接到按钮（把函数当积木）

保存为 js-functions.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>函数</title>
</head>
<body>
  <input id="a" type="text" value="2" />
  <input id="b" type="text" value="3" />
  <button type="button" id="sum">相加</button>
  <p id="out"></p>
  <script>
    const add = (x, y) => x + y;

    function readNumber(id) {
      return Number(document.getElementById(id).value);
    }

    document.getElementById("sum").addEventListener("click", () => {
      const x = readNumber("a");
      const y = readNumber("b");
      const out = document.getElementById("out");
      if (!Number.isFinite(x) || !Number.isFinite(y)) {
        out.textContent = "请输入有效数字";
        return;
      }
      out.textContent = "结果：" + add(x, y);
    });
  </script>
</body>
</html>