一文搞懂javascript中的var、let、const

简介

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;

面试题

看几道面试题，以下几段代码输出什么？

1. 第一题

a = 2;
var a;
console.log(a); // 2

解决var提升的问题很简单，就是按照提升规则将代码重写一下，上面的代码等价于如下代码，结果一目了然。

var a;
a = 2;
console.log(a); // 2

1. 第二题

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();

1. 第三题

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声明的变量不可以被重复声明。

面试题

看几道面试题，以下几段代码输出什么？

1. 第一题

var a = 1;

function foo() {
  var a = 2;
  {
    var a = 3;
    console.log(a);
  }
  console.log(a);
}

foo();

console.log(a);

答案：3 3 1, 这个题主要考察两个知识点：

1. var声明的变量没有块级作用域。
2. 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了。关于这道题的详细解释，请看这篇。

最佳实践

1. 如今ES6已经普及，对于业务代码来说，基本不需要使用var了，var目前只有JS框架或者底层工具库才会使用。

2. 对于let和const，优先使用const，只有在需要修改变量的情况下才使用let。

3. 经典for循环使用let，因为循环变量会被修改。

   for (let i = 0; i < 5; i++) {
     console.log(i);
   }
   

4. 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大行其道的当下，认认真真写文章的人不多了，您的点赞转发评论就是对我最大的支持！