let 和 var 的变量命名区别，前端新手别再搞混了

var 和 let 都能声明变量，但行为大不同

写 JS 时，你是不是经常随手就用 var 声明变量？比如做个小功能：循环展示用户点击的按钮编号。结果发现，最后输出的总是最后一个值——这其实是 var 的“坑”。

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// 输出三次 3，而不是预想的 0、1、2

问题出在 var 没有块级作用域。上面的 i 是在整个函数作用域内有效的，等到 setTimeout 执行时，i 早就变成 3 了。

let 支持块级作用域，更安全

换成 let 就不一样了。let 声明的变量只在当前代码块里有效，比如一个 for 循环的大括号内。

for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 100);
}
// 正确输出 0、1、2

这是因为每次循环都创建了一个新的 j，每个 setTimeout 捕获的是各自块中的值。这种特性让 let 更适合日常开发。

变量提升也有差别

var 存在变量提升，意味着你可以先使用再声明，虽然不推荐这么干。

console.log(name); // undefined
var name = '小张';

这段代码不会报错，因为 var 的声明被提升了，但赋值还在原地。而 let 不允许这样：

console.log(age); // 报错：Cannot access 'age' before initialization
let age = 25;

这种“暂时性死区”反而能帮你早点发现问题，避免低级错误。

命名习惯建议统一用 let

现在主流开发环境都支持 ES6+，推荐默认使用 let 声明变量，除非你需要兼容特别老的浏览器。const 用于不变的值，let 用于会变化的，var 能不用就不用。

比如做一个简单的网页计数器，点击按钮数字加一，这时候用 let 记录当前数值就很合适：

let count = 0;
document.getElementById('btn').addEventListener('click', function() {
  count++;
  console.log('点击了第 ' + count + ' 次');
});

清晰、安全，也不用担心作用域出问题。