简介
var, let and const是JavaScript中三种定义变量的方式，它们之间有什么区别呢？这是前端面试中常见的一道题，今天我们来一文说透它。
let和const区别不大，主要是const声明的是常量，不可修改，而let声明的变量是可修改的。所以我们重点放在var和let上。
变量初始化
声明变量的同时为其赋值叫做初始化。
var和let声明的变量都可以不赋值，此时变量的值为undefined。const声明的变量必须赋值，否则会报错。
// `var`和`let`声明的变量可以不赋值，此时变量的值为`undefined`。
var num; // num的值是undefined
num = 1; // num的值是1
let str; // str的值是undefined
str = 'hello'; // str的值是'hello'
// `const`声明的变量必须赋值，否则会报错。
const a; // SyntaxError: Missing initializer in const declaration
变量提升 - Hoisting
Hoisting这个词中文译为提升，就是将变量的声明提升到其作用域的顶部，注意提升的是声明，而不是赋值。
var声明的变量会被提升至其作用域顶部。let和const声明的变量不会被提升。（注意这个说法有争议，详见MDN）- 提升只针对变量声明，不包括赋值。
如果var是在全局作用域声明的，那么它会被提升到全局作用域的顶部。
console.log(name); // undefined
var name = 'Philip';
以上代码等价于：
var name; // `var`声明的变量会被提升到其作用域顶部。
console.log(name); // undefined
name = 'Philip';
如果var是在函数作用域声明的，那么它会被提升到函数作用域的顶部。
function printName() {
console.log(name); // undefined
var name = 'Philip';
}
printName();
以上代码等价于：
function printName() {
var name; // `var`声明的变量会被提升到其作用域顶部。
console.log(name); // undefined
name = 'Philip';
}
printName();
let和const声明的变量不会被提升。
对于let和const，它们不会被提升，所以下面代码会报错。
console.log(num); // ReferenceError: Cannot access 'num' before initialization
const num = 1;
前面说过，关于let和const是否被提升有争议。
- 一种说法是
let和const不会被提升，所以在声明之前访问会报错。 - 另一种说法是
let和const会被提升，但是在声明之前访问会抛出Temporal Dead Zone错误。
比如下面的代码：
const x = 1;
{
console.log(x); // ReferenceError: Cannot access 'x' before initialization
const x = 2;
}
这段代码会报错，但是如果我们把{}内的const x = 2;注释掉，那么代码就不会报错。如果const x = 2没有被提升的话，那么console.log(x)应该可以访问到全局的const x = 1，而不会报错。换句话说：因为const x = 2被提升了，所以console.log(x)访问的是提升后的x，而此时x还没有被初始化，所以报错。
提升只针对变量声明，不包括赋值。
下面的代码会报错，因为x = 1是赋值，并不是声明，所以不会提升。(注意：如果变量声明前没有加var, let或const，那么其实产生的是一个意外的全局变量。)
console.log(x); // ReferenceError: x is not defined
x = 1;
如果有同名函数和变量，那么提升后，变量位于函数之前（或者说函数会覆盖变量）。
以下代码中有一个同名的函数和变量。
console.log(foo); // [Function: foo], not undefined.
function foo() {
console.log('function foo');
}
var foo = 1;
提升后代码如下：
var foo;
function foo() {
console.log('function foo');
}
console.log(foo);
foo = 1;
面试题
看几道面试题，以下几段代码输出什么？
- 第一题
a = 2;
var a;
console.log(a); // 2
解决var提升的问题很简单，就是按照提升规则将代码重写一下，上面的代码等价于如下代码，结果一目了然。
var a;
a = 2;
console.log(a); // 2
- 第二题
var a = true;
foo();
function foo() {
if (a) {
var a = 10;
}
console.log(a);
}
只要函数内部有var声明的变量，那么所有全局声明的var变量都会被忽略，以上代码提升后等价于如下代码（注意function也有提升），函数内部的var永远会覆盖全局的var。
var a = true;
function foo() {
var a; // value of a is `undefined`
if (a) {
a = 10; // never executed.
}
console.log(a);
}
foo();
- 第三题
function fn() {
console.log(typeof foo);
var foo = 'variable';
function foo() {
return 'function';
}
console.log(typeof foo);
}
fn();
还是那句话，此类题目的解法就是按照提升规则把代码重新写一遍，以上代码提升后等价于如下代码：
function fn() {
var foo;
function foo() {
return 'function';
}
console.log(typeof foo);
foo = 'variable';
console.log(typeof foo);
}
fn();
所以输出结果是function和string。
变量的作用域
var声明的变量有只两种作用域：全局作用域和函数作用域。（没有块级作用域）let和const声明的变量有三种作用域：全局作用域，函数作用域和块级作用域。var声明的全局变量会挂载到window对象上，而let和const不会。let和const有临时性死区，而var没有。
面试题
第一题
以下代码输出什么？
let x = 1;
{
let x = 2;
}
console.log(x);
答案：1，因为let有块级作用域，所以let x = 2只在{}内有效。
第二题
以下代码输出什么？
var x = 1;
{
var x = 2;
}
console.log(x);
答案：2，因为var没有块级作用域，所以var x = 2会覆盖外部的var x = 1。
第三题
以下代码输出什么？
let name = 'zdd';
{
console.log(name);
let name = 'Philip';
}
答案：ReferenceError: Cannot access 'name' before initialization。因为let有块级作用域，所以console.log(name);访问的是let name = 'Philip';之前的name，而此时name还没有被初始化，处于暂时性死区中，所以报错。
第四题
以下代码输出什么？
'use strict';
{
function foo() {
console.log('foo');
}
}
foo();
答案：ReferenceError: foo is not defined。因为foo是在块级作用域内声明的，所以在外部无法访问。但是如果我们把'use strict';去掉，那么代码就可以正常运行。因为在非严格模式下，函数声明会被提升到全局作用域。
第五题
以下代码输出什么？
(() => {
let x;
let y;
try {
throw new Error();
} catch (x) {
x = 1;
y = 2;
console.log(x);
}
console.log(x);
console.log(y);
})();
答案：1 undefined 2。因为catch中的x是一个新的变量，不是外部的x，所以x = 1只会改变catch中的x，而不会改变外部的x。而y = 2不是catch的参数，只是在catch中赋值的，所以会改变外部的y。
暂时性死区 - Temporal Dead Zone
TDZ即Temporal Dead Zone - 中文名暂时性死区，是指let和const声明的变量在其作用域开始到变量声明之间的这段区域。在暂时性死区内无法访问变量，访问会报错。
function foo() {
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let a = 1;
const b = 2;
}
foo();
对于以上代码，常量b的暂时性死区开始于函数的第一行，终止于b的声明，而console.log(b);这句恰恰在暂时性死区内访问了b，所以会报错。
面试题
以下代码输出什么？
function foo() {
console.log(typeof bar);
const bar = 1;
}
foo();
答案：
ReferenceError: Cannot access 'bar' before initialization
因为console.log(typeof bar);这句在bar的暂时性死区内访问了bar，所以会报错。可以看到，即使强如typeof这种几乎不会报错的操作符也无法规避暂时性死区。
如果我们把const bar = 1;去掉，那么代码就不会报错。typeof操作符对于没有声明的变量不会报错，而是返回undefined。
function foo() {
console.log(typeof bar); // 输出undefined
}
重新声明- Redeclaration
var声明的变量可以被重复声明，后声明的覆盖先声明的。let和const声明的变量不可以被重复声明。
面试题
看几道面试题，以下几段代码输出什么？
- 第一题
var a = 1;
function foo() {
var a = 2;
{
var a = 3;
console.log(a);
}
console.log(a);
}
foo();
console.log(a);
答案：3 3 1, 这个题主要考察两个知识点：
var声明的变量没有块级作用域。var声明的变量可以被重复声明，后声明的会覆盖先声明的。
所以var a = 3会覆盖外部的var a = 2，但是var a = 2不会覆盖最外面的var a = 1。因为var有函数作用域。
以上代码提升后等价于如下代码：
var a;
a = 1;
function foo() {
var a;
var a; // redeclaration
a = 2;
{
a = 3;
console.log(a);
}
console.log(a);
}
foo();
console.log(a);
注意：面试题中凡事用{}包裹var的都是障眼法，var没有块级作用域。
第二题
这道题比较简单，考察的是let的块级作用域，代码输出2, 1。因为let有块级作用域。let a = 2只在{}内有效。
function foo() {
let a = 1;
{
let a = 2;
console.log(a);
}
console.log(a);
}
foo();
意外的全局变量
如果我们声明变量的时候忘记了写var, let或者const，那么这个变量就是所谓的Accidental Global Variables，意思是意外的全局变量。
function f1() {
b = 2; // accident global variable
}
f1();
console.log(b); // 2
面试题
以下代码输出什么？
for (var i = 0; i < 10; i++) {
setTimeout(() => {
console.log(i);
})
}
答案：3 3 3
因为var没有块级作用域，所以setTimeout内的i都是指向同一个i，而setTimeout是异步的，其回调函数代码需要先进入宏任务队列，待for循环结束后才能执行，此时i已经是3了。关于这道题的详细解释，请看这篇。
最佳实践
-
如今ES6已经普及，对于业务代码来说，基本不需要使用
var了，var目前只有JS框架或者底层工具库才会使用。 -
对于
let和const，优先使用const，只有在需要修改变量的情况下才使用let。 -
经典for循环使用
let，因为循环变量会被修改。for (let i = 0; i < 5; i++) { console.log(i); } -
for...in和for...of使用const，因为循环变量不会被修改。const arr = [1, 2, 3]; for (const item of arr) { console.log(item); }const obj = {a: 1, b: 2}; for (const key in obj) { console.log(key); }
祝大家编程愉快，如果觉得有用就点个关注，每篇文章都是纯古法手打，在AI大行其道的当下，认认真真写文章的人不多了，您的点赞转发评论就是对我最大的支持！
原创作者: graphics 转载于: https://www.cnblogs.com/graphics/p/18956299
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
