函数 — 拆成一个个有名字的小机器

1.什么是函数——接收输入、交回结果的机器

第1讲我们把程序看作输入 → 处理 → 输出。函数就是把这个结构切出一小块并起个名字。想想自动售货机就容易明白：投进钱、按下按钮（输入），不必知道里面发生了什么，饮料（结果）就出来了。做好一台，就能一次又一次地使用同一台售货机。

没有函数的话，每次要用同一个计算都得复制代码。一旦计算规则变了，就要找出所有复制过的地方逐一修改，漏掉一处，结果就会彼此不一致。做成函数后，规则只存在于一个地方，修改时也只改那里。而且像 vatOf(price) 这样，光看名字就知道它做什么，代码读起来就像句子。

创建函数叫“定义”，使用函数叫“调用”。只定义的话什么也不会发生，要在名字后面加上括号，像 vatOf(10000) 这样调用，函数体才会执行。注意，不加括号只写 vatOf，只是指向函数本身，并不会执行。

function vatOf(price) {
  return price * 0.1;
}
console.log(vatOf(10000));
console.log(vatOf(25000));

1000
2500

2.参数与返回值

函数名后面括号里的 price 叫作参数，是函数内部使用的“空格的名字”。调用时放进去的实际值 10000 叫作实参。调用时，实参装进参数里，然后执行函数体。参数有多个时用逗号隔开，实参按书写顺序依次放入。顺序放反了不会报错，却会得出离谱的结果，所以顺序很重要。

return 把结果交回调用的地方，并在那一刻结束函数。return 下面的行不会执行。没有 return，或者只写不带值的 return;，函数就返回 undefined。实参放少了，缺的参数也会是 undefined，用在计算里就会出现第2讲见过的 NaN。JavaScript 在这些情况下也不会报错，所以要自己检查。

也可以预先定好没有实参时使用的值。在参数后面加上 = 值，就成了默认值。下面的代码里不传 rate 时就用 0.1。默认值适合“通常就是这个值”的设置，但给必须传入的值加默认值，万一漏传也察觉不到，所以要分情况使用。

function rectArea(w, h) {
  return w * h;
}
console.log(rectArea(3, 4));
console.log(rectArea(3));

function tax(price, rate = 0.1) {
  return price * rate;
}
console.log(tax(20000));
console.log(tax(20000, 0.05));

12
NaN
2000
1000

3.`return` 与 `console.log`——最常见的混淆

刚学函数时最容易混淆的，是“返回”和“打印到屏幕”的区别。两者看起来都能看到结果，做的事却完全不同。console.log 是把值写到屏幕上给人看，程序无法接着使用那个值。return 是把值交给调用它的代码，接收方可以把它存进变量或放进别的计算。

下面代码里的 showDouble 只打印结果而不返回。所以把 showDouble(4) 存进变量时，屏幕上会打印 8，但变量里装的是 undefined，再加 1 就变成 NaN。可以把它想成：按计算器让答案显示在屏幕上，和把这个答案交给下一步计算，是两回事。

本页练习的评分也是同样的原理。评分器调用函数，把“返回的值”和期望值比较。如果在函数里只用 console.log 打印正确答案，屏幕上即使显示了正确的数字，评分也会失败。原则很简单：负责计算的函数用 return 返回，打印到屏幕的事放在调用函数的外面做。

function showDouble(x) {
  console.log(x * 2);
}
function double(x) {
  return x * 2;
}
const a = showDouble(4);
console.log('a 的值', a, a + 1);
const b = double(4);
console.log('b 的值', b, b + 1);

8
a 的值 undefined NaN
b 的值 8 9

4.箭头函数——另一种简短写法

函数也可以写成 const 名字 = (参数) => 表达式 的样子，这叫箭头函数。箭头右边只有一个表达式时，这个表达式的值会自动返回，所以不写 return。在把函数传给另一个函数时用得特别多，比如第6讲要学的 map、filter，在 AI 写的代码里也经常见到。

有一个陷阱要注意。箭头右边一旦用了花括号，就会被当作普通函数体，必须自己写 return。下面的 bad 在花括号里只写了表达式、漏了 return，结果返回 undefined。它不会报错，所以不打印结果的话很容易蒙混过去。记住：短的不加花括号，多行的花括号和 return 一起写。

用 function 写的函数和箭头函数，在本课程涉及的范围内做的事情一样。细节上有些不同（例如处理 this 的方式），但入门阶段不必了解。没有哪一种更“好”，跟着合作的人或项目所用的写法走就行。

const add = (a, b) => a + b;
const square = (x) => x * x;
const bad = (x) => { x * x; };
const good = (x) => {
  const y = x * x;
  return y;
};
console.log(add(2, 3), square(4));
console.log(bad(4), good(4));

5 16
undefined 16

5.函数里的变量只在函数里——作用域

在函数里用 let 或 const 创建的变量，只在这个函数里可见。这叫作用域。函数结束后，里面的变量也随之消失，所以在外面使用这个名字会出现 ReferenceError。错误信息 is not defined 的意思是“在这里看不到这个名字”。信息的具体措辞在不同浏览器中可能略有差异。

这条规则一开始看起来不方便，但正因为有它，函数之间才不会互相干扰。好几个函数各自在内部使用 total 这个名字也不会混在一起。如果想在外面使用函数里算出的值，不要偷偷修改外面的变量，而要用 return 返回。在循环和条件语句的花括号里创建的 let、const 也一样，只在那对花括号里可见（这就是第4讲要把累加变量放在循环上方的原因）。

function makeTotal() {
  const inside = 100;
  return inside + 1;
}
console.log(makeTotal());
console.log(inside);

101
ReferenceError: inside is not defined

6.拆成小函数

把很长的计算写成一大块，很难找到哪里出了错。如果拆成多个“只做一件事”的小函数再组装起来，每个零件都能单独检验，名字本身也起到说明的作用。函数名用动词表明它做的事，如 getTotal、isAdult；返回真假的函数习惯以 is、has 开头。

找拆分点的问题是：“这一部分能用一句话说明吗？”像“把商品价格全部加起来”“根据合计决定运费”这样能成为一句话的，就是一个函数。说明里出现好几个“然后”，就说明还能再拆。不过，把一行的计算拆得过细反而难读，所以要按值得起名字的意义单位来拆。

function subtotal(prices) {
  let sum = 0;
  for (const p of prices) {
    sum += p;
  }
  return sum;
}
function shippingFee(sum) {
  return sum >= 50000 ? 0 : 3000;
}
function orderTotal(prices) {
  const sum = subtotal(prices);
  return sum + shippingFee(sum);
}
console.log(orderTotal([20000, 10000]));
console.log(orderTotal([30000, 20000]));

33000
50000

7.纯函数与易于测试的代码

输入相同就总是返回相同结果、也不修改外部变量或屏幕之类东西的函数，叫作纯函数。double(4) 什么时候调用都是 8。相反，下面的 addVisit 会修改外部变量 visits，所以同样的调用每次返回的值都不一样。这种函数的结果取决于“到目前为止发生过什么”，很难追查原因。

纯函数最大的优点是容易测试，因为只要有一张“这个输入对应这个结果”的表就够了。写好函数后，挑几个普通情况、边界值（0、空列表、恰好等于标准的值）和奇怪的输入，先写下期望值，再和结果比较。本页练习的评分方式正是如此，第10讲验证 AI 写的代码时也用同样的方法。

当然，不是所有函数都能是纯的。打印到屏幕、保存文件、发送到服务器，这些事的目的就是改变外部。诀窍是把计算单独拆成纯函数，把改变外部的事集中在边缘的少数几个地方。这样，容易出错的计算部分可以用表格检验，改变外部的部分很短，用眼睛检查也容易。

let visits = 0;
function addVisit() {
  visits++;
  return visits;
}
console.log(addVisit(), addVisit());

const nextCount = (n) => n + 1;
console.log(nextCount(0), nextCount(0));

1 2
1 1

const isAdult = (age) => age >= 19;
function check(input, want) {
  const got = isAdult(input);
  const ok = got === want;
  console.log(input, ok ? '通过' : '失败');
}
check(18, false);
check(19, true);
check(0, false);

18 通过
19 通过
0 通过