「前端每日一问（21）」说一下 var、let 和 const 的区别

本题难度：⭐

答：

可以从这几个方面来描述 var、let 和 const 的区别：

• 变量提升
• 暂时性死区
• 块级作用域
• 重复声明
• 修改声明的变量
• 最佳实践

前置知识：

理解 JS 中的 作用域

变量提升

变量提升是指变量声明或函数声明会被提升到当前作用域的最顶部去，且赋一个初始值 undefined。

• var 声明的变量存在变量提升
• let 和 const 声明的变量不存在变量提升

console.log(name) // undefined
var name = '阿林'
复制代码

等价于

var name = undefined
console.log(name) // undefined
name = '阿林'
复制代码

let 和 const 没有变量提升

console.log(name) // Uncaught ReferenceError: name is not defined
let name = '阿林'
复制代码

console.log(name) // Uncaught ReferenceError: name is not defined
const name = '阿林'
复制代码

暂时性死区

• var 不存在暂时性死区
• let 和 const 存在暂时性死区，只有等到声明变量的那一行代码出现，才可以获取和使用该变量

console.log(name) // undefined
var name = '阿林'
复制代码

console.log(name) // Uncaught ReferenceError: name is not defined
let name = '阿林'
复制代码

console.log(name) // Uncaught ReferenceError: name is not defined
const name = '阿林'
复制代码

块级作用域

• var 没有块级作用域
• let 和 const 存在块级作用域

if (true) {
  var name = '阿林'
}
console.log(name) // '阿林'
复制代码

if (true) {
  let name = '阿林'
}
console.log(name) // Uncaught ReferenceError: name is not defined
复制代码

if (true) {
  const name = '阿林'
}
console.log(name) // Uncaught ReferenceError: name is not defined
复制代码

重复声明

• var 允许重复声明，后声明的会覆盖先声明的
• let 和 const 不允许重复声明

var name = 'lin'
var name = '阿林'

console.log(name) // '阿林' 重复声明，后声明的会覆盖先声明的
复制代码

let name = 'lin'
let name = '阿林' // Identifier 'name' has already been declared
复制代码

const name = 'lin'
const name = '阿林' // Identifier 'name' has already been declared
复制代码

修改声明的变量

• var 和 let 可以修改声明的变量

• const 声明一个只读的常量。一旦声明，常量的值就不能改变

var name = 'lin'
name = '阿林'

console.log(name) // '阿林'
复制代码

let name = 'lin'
name = '阿林'

console.log(name) // '阿林'
复制代码

const name = 'lin'
name = '阿林' // Uncaught TypeError: Assignment to constant variable.
复制代码

最佳实践

• 能用 const 的情况尽量使用 const
• 声明的变量要被修改，用let
• 不使用 var

结尾

如果我的文章对你有帮助，你的?就是对我的最大支持^_^

我是阿林，输出洞见技术，再会！

上一篇：

「前端每日一问（20）」说一下 JS 中的作用域、作用域链和词法作用域