为何ES6立即执行函数返回值类型不同？contains1与contains2差异解析

这个问题其实是箭头函数的两种写法规则差异导致的，咱们把两个函数拆解开来看就一目了然了：

先看contains1的问题 #

const contains1 = (() => { debugger; Array.prototype.includes ? (arr, value) => arr.includes(value) : (arr, value) => arr.some(el => el === value) })()

这里的立即执行箭头函数用大括号{}包裹了函数体，里面是两个独立的语句：

1. 执行debugger语句
2. 执行后面的三元表达式（判断是否支持Array.prototype.includes，返回对应的检测函数）

但箭头函数有个关键规则：如果函数体是用大括号包裹的语句块，不会自动返回最后一个表达式的结果，必须显式使用return关键字。所以这个IIFE执行完debugger和三元表达式后，没有任何返回值，默认返回undefined，这就是调用contains1时得到undefined的原因。

如果要让contains1正常返回函数，需要给三元表达式加上return：

const contains1 = (() => { debugger; return Array.prototype.includes ? (arr, value) => arr.includes(value) : (arr, value) => arr.some(el => el === value) })()

再看contains2为什么正常 #

const contains2 = (() => Array.prototype.includes ? (arr, value) => arr.includes(value) : (arr, value) => arr.some(el => el === value) )()

这个立即执行箭头函数没有用大括号包裹函数体，直接把三元表达式作为唯一的函数体内容。根据箭头函数的规则：如果函数体是单个表达式（没有大括号），会自动返回该表达式的计算结果。所以这个IIFE执行后，会把三元表达式得到的检测函数作为返回值，因此调用contains2时得到的就是预期的函数。

总结一下核心差异 #

箭头函数的两种写法决定了返回值的规则：

• 不带大括号：函数体是单个表达式，自动返回表达式结果
• 带大括号：函数体是语句块，必须显式return才能返回值，否则默认返回undefined

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