const定义的函数，在执行时为啥抱错

Question

代码如下：

const load = ()=>{
    console.log('--load--');
}
const loadLanguage = ()=>{
    console.log('--loadLanguage--');
}
const recognize = ()=>{
    console.log('--recognize--');
}
const key = 'load'

({
    load,
    loadLanguage,
    recognize,
})[key]();

执行上述代码，抱错： load is not a function

但是如果把执行代码放在块内，就没问题：

{
    ({
        load,
        loadLanguage,
        recognize,
    })[key]();
}

或者直接执行load()也没问题，所以不太理解，为啥不放在代码块就抱错了呢，应该是和作用域有关，但是我没想明白，求大佬指点

Answer 1

const key = 'load' 后面加个分号，或者在 ({ load, loadLanguage ...) 前加一个分号。

如果你试试 "hello"(); 你会发现提示：

TypeError: "hello" is not a function

Answer 2

注意分号！
立即执行函数表达式前一定得注意分号，否则就会解析成这样。

const key = 'load'({
  load,
  loadLanguage,
  recognize
})[key]();

// 前一语句结尾加分号即正常
const key = 'load';

Answer 3

尤其对于自执行函数，有一个习惯一定要有，那就是不管你这个自执行函数前后有没有其他代码，一定要习惯性的在每个自执行函数的前边加上分号

;(() => {
  // some codes
})()

;(() => {
  // some codes
})()

如果你用的是Vue框架，并且在创建项目前勾选了ESlint并且习惯性选择了standard配置，在语句结束时，也就是最后写分号会出现编译错误，如下图：

但是你在语句的开头，也就是前边加分号就不会报错（可以尝试下），其他普通语句前加分号还是怪怪的，所以建议写自执行函数有个习惯，先写一个分号再继续你的业务！