函数内可直接使用值，为何还要用return？如何正确使用return？

问题场景 #

你尝试了两个实现逻辑相似的函数：

带return的版本 #

function getWaterBottle(money) {
  console.log(`You Can Buy "${parseInt(money / 1.5)}" Bottles Of Water`)
  
  return money % 1.5;
}

getWaterBottle(4)

用console.log替代return的版本 #

function getWaterBottle(money) {
  console.log(`You Can Buy "${parseInt(money / 1.5)}" Bottles Of Water`)

  console.log(`The change is ${money % 1.5}`) // 替代return的写法
}

getWaterBottle(4)

你的疑问：使用return关键字和不使用它有什么区别？以及该如何、何时正确使用return？

核心区别 #

1. 是否产生可复用的结果 #

• 带return的函数会将指定值作为函数的返回结果，调用函数时可以把这个结果赋值给变量，或者直接用于后续逻辑。比如：

  const change = getWaterBottle(4);
  // 之后可以用change做其他操作，比如判断能不能再买一瓶
  if (change >= 1.5) {
    console.log("You can buy one more bottle!");
  }
  

• 用console.log替代的函数，只是把内容打印到控制台，函数调用后不会输出任何可被后续代码使用的值，你没法直接拿到找零的数值。

2. 是否控制函数执行流程 #

• return会立即终止函数的执行，return语句之后的代码都不会被运行。比如：

  function test() {
    return "done";
    console.log("这句话永远不会打印");
  }
  

• console.log只是输出内容，不会影响函数的执行流程，函数会继续跑完所有代码。

3. 函数职责的单一性 #

• 带return的函数可以专注于计算/处理逻辑，把“结果展示”的工作交给外部代码，符合单一职责原则，复用性更强。比如你之后想在网页上显示找零，而不是控制台，直接拿返回值去渲染就行，不用改函数内部。
• 直接在函数里用console.log，会让函数同时承担“计算”和“输出”两个职责，耦合度高，后续修改展示方式时必须改动函数本身。

正确使用return的时机 #

• 需要函数输出结果供后续使用时：比如计算数值、处理数据（比如格式化字符串、过滤数组）、生成对象等场景，必须用return返回结果。
• 需要提前终止函数执行时：比如参数不符合要求，或者满足某个条件后不需要继续执行后续代码，可以用return（不带值时返回undefined）。例如：

  function getWaterBottle(money) {
    if (money < 0) {
      console.log("Invalid money amount");
      return; // 提前终止，不执行后面的计算
    }
    console.log(`You Can Buy "${parseInt(money / 1.5)}" Bottles Of Water`)
    return money % 1.5;
  }
  

• 遵循单一职责原则时：让函数只做计算/处理，把输出、交互等逻辑放在函数外部，用return传递结果。

不需要return的场景 #

当函数只做副作用操作，不需要返回任何结果时，可以不用return（函数默认返回undefined）。比如：修改DOM元素、打印日志、发送网络请求、修改全局变量等操作。

内容的提问来源于stack exchange，提问作者Ameen Shamsan