为什么在代码编辑器中重复声明const变量会报错，浏览器控制台却不会？

核心原因 #

浏览器开发者控制台的运行逻辑和普通脚本文件的编译逻辑完全不同，是DevTools为了提升调试体验特意做的适配：

• 普通脚本（.js文件、<script>标签内嵌代码）运行时，JS引擎会先对整个脚本代码块做完整的预解析，在执行前就会检查出所有语法错误，比如同一作用域下重复声明const/let变量，直接抛出SyntaxError，整个脚本不会执行。你在编辑器里运行的代码属于完整脚本，所以触发报错是符合ES标准语法规则的表现。
• 控制台是REPL（读-求值-输出-循环）运行模式，默认会把你每次输入的代码作为独立的代码块单独解析执行，不会跨代码块做顶级作用域的变量重复声明校验。新版Chrome、Edge等主流浏览器的控制台还额外添加了顶级const/let重复声明的支持，就是为了方便开发者调试时不用反复刷新页面重置上下文，属于调试工具的特殊优化，不代表JS原生语法允许重复声明。

复现编辑器报错的方法 #

如果要在控制台复现和编辑器一致的报错，只要把多段代码放在同一个块级作用域内一次性输入即可，比如：

{
  const a = 1;
  console.log(a);
  const a = 1; // 这里会抛出 Uncaught SyntaxError: Identifier 'a' has already been declared
}

这时候JS引擎会对同一个块内的代码做完整预解析，就会正常抛出重复声明的语法错误。

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