JavaScript中sum为何要定义为IIFE函数？这段代码的运行逻辑是什么？

代码运行逻辑 #

这段代码的执行流程可以拆解为以下步骤：

1. 外层的匿名函数通过末尾加()的方式构成IIFE（立即执行函数表达式），代码执行到这一行时会立刻运行这个外层函数
2. 外层函数执行后没有做其他操作，直接返回内部定义的、接收x/y/z三个参数的sum函数
3. 外层变量const sum被赋值为这个返回的内部函数，之后调用sum(1,2,3)本质就是调用这个内部求和函数
4. 内部函数执行时，先把三个入参组装成数组args，调用reduce方法从初始值0开始累加所有元素，最终返回结果6，打印到控制台。

这里使用IIFE的原因 #

首先明确：这个简化示例里的IIFE其实没有实际作用，完全可以直接把内部函数赋值给sum变量，运行效果完全一致，写法更简洁：

const sum = function(x, y, z) {
  const args = [x, y, z];
  return args.reduce((a, b) => a + b, 0);
};

实际开发中这种IIFE嵌套返回内部函数的写法，通常是为了利用IIFE的作用域特性实现以下需求：

• 隔离私有变量：如果逻辑中有不需要暴露到外部的辅助变量，可以定义在外层IIFE内部，只会在IIFE执行时存在，不会污染全局作用域，外部也无法直接访问，内部函数可以通过闭包调用这些变量
• 预计算固定值：如果求和逻辑依赖一些固定的配置、常量，可以在IIFE执行阶段就计算完成，后续每次调用sum都不需要重复计算，提升性能
• 避免全局命名冲突：在ES6模块化普及之前，这种写法是常用的模块化封装手段，可以避免全局变量重名覆盖的问题

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