箭头函数IIFE赋值变量失效：为何必须添加括号？

先看普通函数表达式的IIFE写法，这能正常运行：

const iife = function() { return 5 }(); // iife = 5

原因很简单：赋值运算符=右侧是表达式上下文，function() { return 5 }作为函数表达式，后面跟()就能直接触发立即执行。

但换成箭头函数直接写就会报错，比如这两种写法都无法生效：

// 报错写法1
const iife = () => 5(); 
// 报错写法2
const iife = () => { return 5 }();

问题出在JS引擎的语法解析优先级上：

• 对于() => 5()，引擎会把它解析成「一个箭头函数，返回值是调用5()的结果」——这里的()被当成了调用函数5的括号，而不是用来执行箭头函数的括号。
• 对于带大括号的() => { return 5 }()，引擎会把{ return 5 }认定为箭头函数的函数体，后面的()则成了一个单独的、无意义的空括号表达式，语法上完全不成立。

那给箭头函数套一层括号为什么就能解决？看生效的写法：

// 正常运行的写法
const iife = (() => 5)(); 
const iife = (() => { return 5 })();

括号在这里的作用是强制让内部的箭头函数被解析成一个完整的表达式，彻底消除歧义。虽然箭头函数本身可以作为表达式，但在赋值运算符右侧的上下文里，直接写() => ...()会被引擎优先按照箭头函数的语法规则拆分，不会把整个() => ...当成一个表达式再执行。用括号包裹后，引擎会先处理括号内的箭头函数表达式，再执行后面的()调用，逻辑就和普通函数表达式的IIFE完全一致了。

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