关于JS中var变量作用域的疑问及代码干跑工具推荐咨询

var x = 1;
if (x === 1) {
  var x = 3;
  console.log(x);
  // Expected output: 3
}
console.log(x);
// Expected output: 3

这是因为JavaScript中var声明的变量没有块级作用域，仅支持函数作用域和全局作用域。

你在if代码块里写的var x = 3，其变量声明会被变量提升到当前作用域的顶部（这里是全局作用域），实际执行顺序等同于：

var x; // 变量提升至全局作用域顶部
x = 1;
if (x === 1) {
  x = 3; // 此处是给已存在的全局变量x赋值，而非重新声明
  console.log(x);
}
console.log(x);

所以if块内的赋值直接修改了全局的x，导致块外输出的也是3。

如果想要让if块内的变量与外部独立，改用let或const即可，它们支持块级作用域：

let x = 1;
if (x === 1) {
  let x = 3;
  console.log(x); // 输出3
}
console.log(x); // 输出1

• CodePen：支持实时预览，可同时编写HTML、CSS、JS，适合快速测试小代码段
• JSFiddle：功能与CodePen类似，社区资源丰富，便于分享代码
• 浏览器开发者工具Console面板：无需跳转网站，直接在浏览器内运行代码，调试便捷
• Node.js REPL：若已安装Node.js，打开终端输入node即可进入交互环境，测试JS代码

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