为什么我的JavaScript函数执行顺序不符合预期？

核心触发原因：自动分号插入(ASI)规则的坑 #

你写的代码中i4函数定义后没有手动加分号，且下一行代码以括号开头，JavaScript引擎不会在这两行之间自动插入分号，会将两行合并解析，等效于你写了如下代码：

var i4 = function() {
  console.log("I4 output")
  return i = 4
}(a > 3) && i3() || (a < 5) && i4();

这种解析逻辑下的执行顺序为：

1. 匿名函数被立即调用，首先打印I4 output，同时将i赋值为4，函数返回值为4（真值）
2. 继续执行4 && i3()，&&左侧为真值，触发执行i3()，打印I3 output，i被修改为7，返回值7为真值
3. 后续遇到||运算符，左侧结果为真值触发短路，||后的(a < 5) && i4()直接跳过不会执行
4. 最后打印i的值为7

修复方案 #

只需要在i4函数定义末尾手动添加分号，即可避免解析异常：

var a = 4;
var i = 0;
var i3 = function() {
  console.log("I3 output")
  return i = i + 3
}
var i4 = function() {
  console.log("I4 output")
  return i = 4
}; // 此处添加分号

(a > 3) && i3() || (a < 5) && i4();
console.log(i)

修复后执行逻辑符合常规预期：a>3为true，执行i3()打印I3 output，返回值3为真值，触发||短路，后续代码不执行，最终i值为3。

如果你的需求是同时执行i3和i4，不要用逻辑运算符做流程控制，直接独立调用两个函数即可。

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