var、let、const之间的区别（详细代码讲解）

一、var
在ES5中，顶层对象的属性和全局变量是等价的，用var声明的变量既是全局变量，也是顶层变量

注意：顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象

var a = 10;
console.log(window.a) // 10

使用var声明的变量存在变量提升的情况

console.log(a) // undefined
var a = 20

在编译阶段，编译器会将其变成以下执行

var a
console.log(a)
a = 20

使用var，我们能够对一个变量进行多次声明，后面声明的变量会覆盖前面的变量声明

var a = 20
var a = 30
console.log(a) // 30

在函数中使用使用var声明变量时候，该变量是局部的

var a = 20
function change(){
var a = 30
}
change()
console.log(a) // 20

而如果在函数内不使用var，该变量是全局的

var a = 20
function change(){
a = 30
}
change()
console.log(a) // 30

二、let
let是ES6新增的命令，用来声明变量

用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效

{
let a = 20
}
console.log(a) // ReferenceError: a is not defined.

不存在变量提升

console.log(a) // 报错ReferenceError
let a = 2

这表示在声明它之前，变量a是不存在的，这时如果用到它，就会抛出一个错误

只要块级作用域内存在let命令，这个区域就不再受外部影响

var a = 123
if (true) {
a = ‘abc’ // ReferenceError
let a;
}

使用let声明变量前，该变量都不可用，也就是大家常说的“暂时性死区”

最后，let不允许在相同作用域中重复声明

let a = 20
let a = 30
// Uncaught SyntaxError: Identifier ‘a’ has already been declared

注意的是相同作用域，下面这种情况是不会报错的

let a = 20
{
let a = 30
}

因此，我们不能在函数内部重新声明参数

function func(arg) {
let arg;
}
func()
// Uncaught SyntaxError: Identifier ‘arg’ has already been declared

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

const a = 1
a = 3
// TypeError: Assignment to constant variable.

这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值

const a;
// SyntaxError: Missing initializer in const declaration

如果之前用var或let声明过变量，再用const声明同样会报错

var a = 20
let b = 20
const a = 30
const b = 30
// 都会报错

const实际上保证的并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动

对于简单类型的数据，值就保存在变量指向的那个内存地址，因此等同于常量

对于复杂类型的数据，变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的，并不能确保改变量的结构不变

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: “foo” is read-only

其它情况，const与let一致

四、区别
var、let、const三者区别可以围绕下面五点展开：

变量提升
暂时性死区
块级作用域
重复声明
修改声明的变量
使用
变量提升
var声明的变量存在变量提升，即变量可以在声明之前调用，值为undefined

let和const不存在变量提升，即它们所声明的变量一定要在声明后使用，否则报错

// var
console.log(a) // undefined
var a = 10

// let
console.log(b) // Cannot access ‘b’ before initialization
let b = 10

// const
console.log© // Cannot access ‘c’ before initialization
const c = 10

暂时性死区
var不存在暂时性死区

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

// var
console.log(a) // undefined
var a = 10

// let
console.log(b) // Cannot access ‘b’ before initialization
let b = 10

// const
console.log© // Cannot access ‘c’ before initialization
const c = 10

块级作用域
var不存在块级作用域

let和const存在块级作用域

// var
{
var a = 20
}
console.log(a) // 20

// let
{
let b = 20
}
console.log(b) // Uncaught ReferenceError: b is not defined

// const
{
const c = 20
}
console.log© // Uncaught ReferenceError: c is not defined

重复声明
var允许重复声明变量

let和const在同一作用域不允许重复声明变量

// var
var a = 10
var a = 20 // 20

// let
let b = 10
let b = 20 // Identifier ‘b’ has already been declared

// const
const c = 10
const c = 20 // Identifier ‘c’ has already been declared

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

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

// var
var a = 10
a = 20
console.log(a) // 20

//let
let b = 10
b = 20
console.log(b) // 20

// const
const c = 10
c = 20
console.log© // Uncaught TypeError: Assignment to constant variable

使用
能用const的情况尽量使用const，其他情况下大多数使用let，避免使用var

一、var
1.声明作用域
使用var定义的变量会成为包含它的函数的局部变量

function foo(){
var msg = ‘helloword’ //局部变量
}
foo()
console.log(msg) //报错未定义 test is not defined

这里，msg变量是在函数内部使用var定义的。调用函数foo会创建这个变量并给它赋值。调用之后变量msg就被销毁了，所以最后打印会报错。

如果需要定义多个变量，可以在一条语句中用逗号分隔每个变量。

    var name = 'uzi',
        age = '22',
        team = 'rng'
    console.log(name, age, team);

’
运行运行
结果
在严格模式下，不能定义eval和arguments的变量，否则会导致语法报错。

2.声明提升
先看代码

  function foo(){
      console.log(name)   //undefined
      var name = 'Jay'
  }
  foo()

’
运行运行
为什么是undefined而不是报错。因为ES运行时把它看成下面的等价代码

  function foo(){
      var name
      console.log(name)     //undefined
      name = 'Jay'
  }
  foo()

’
运行运行
这就是所谓的变量提升，使用var关键字声明的变量会自动提升到函数作用域顶部。
此外一次性反复多次使用var声明同一个变量也是可以的。

    function foo() {
        var name = 'Jay'
        var name = 'Eason'
        var name = 'Beyond'
        console.log(name)   //Beyond
    }
    foo()

’
运行运行
二、let
1.声明作用域
let和var差不多的，但是有着非常重要的区别是 let是块级作用域，而var的范围是函数作用域

    if (1 == true) {
        var goods = 'chatgpt-3'
        let newGoods = 'chatgpt-4'
        console.log(goods);      //chatgpt-3
        console.log(newGoods);   //chatgpt-4
    }
    console.log(goods);          //chatgpt-3
    console.log(newGoods);       //报错未定义  newGoods is not defined

在这里newGoods变量之所以不能在if外部引用，因为它的作用域仅限于该块内部。

2.重复声明
let不允许同一个块级作用域中出现相同的冗余声明，会导致报错

Uncaught SyntaxError: Identifier ‘name’ has already been declared
表示name已经声明过了。

但是在嵌套使用的相同标识符不会报错，因为在同一个块中没没有重复声明

    let name = 'Macey'
    console.log(name);      //Macey
    function foo(){
        name = 'Ronaldo'
        console.log(name);  //Ronaldo
    }
    foo()

’
运行运行
3.变量提升
let和var的另一个重要区别，就是let声明的变量不会在作用域中被提升

    console.log(name);     //undefined
    var name = 'Macey'
    console.log(age);      //未定义  Uncaught ReferenceError: Cannot access 'age' before initialization
    let age = '35'

在let声明之前执行瞬间被称为"暂时性死区"，在此阶段引用后面才声明的变量会报错，function也一样！

4.全局声明
与var不同，使用let在全局作用域中声明的变量不会成为this或window对象的属性（var声明的则会）

    var name = 'Macey'
    console.log(this.name);    //Macey
    let age = '35'
    console.log(this.age);     //undefined

’
运行运行
不过，let的声明任然是在全局中发生的，相应变量会在页面的生命周期中存续，为了避免重复定义的错误，最好还是不要重复声明同一个变量。
在函数内，可以使用this关键字来引用全局对象window。因此，在上述代码中，变量name被视为一个全局变量，因此可以通过this或window对象来访问。
age在声明它的块级作用域内是可见的，但是在全局作用域内并不可见。因此，在全局中，无法通过this来访问变量b。

5.for循环中声明
使用var在for循环中定义的迭代变量会渗透到循环体外部

    for (var i = 0; i < 5; i++) {
        //逻辑
    }
    console.log(i);
    for (let j = 0; j < 5; j++) {
        //逻辑
    }
    console.log(j);

打印结果
因为let迭代的变量仅限于块级作用域for的内部

再看一个著名的例子

    for (var i = 0; i < 5; i++) {
        setTimeout(() => console.log('i======', i))
    }
    for (let j = 0; j < 5; j++) {
        setTimeout(() => console.log('j======', j))
    } 

’
运行运行
打印结果
之所以会这样，是因为在退出循环的时候var保存的值是：5。在后面执行setTimeout时，所有的i都是同一个变量，所以输出都是同一个值。
而使用let迭代声明时，JS会为每一个迭代循环声明一个新的迭代变量。每个setTimeout引用的都是不同的变量实例。
这种每次迭代声明一个独立变量实例的行为适用于所有风格的for循环，包括for-in和for-of循环。

三、const
const 的行为与let基本相同，唯一一个重要的区别是它声明变量时必须同时赋值，一旦声明了简单的数据类型（数值、字符串、布尔值），就不能修改否则会报错。

    const name
    //一旦声明了就必须赋值 Missing initializer in const declaration
    const age = '22'
    age = '23'              //不能赋值   Assignment to constant variable

    const color = 'red'
    const color = 'blue'    //不能重复声明 Identifier 'color' has already been declared

    const name = 'Macey'
    console.log(name);      //Macey  
    function foo() {
        const name = 'Ronaldo'
        console.log(name);  //Ronaldo   声明的作用域也是块级
    }
    foo()

const 声明的限制只适用于它指向的变量的引用。如果const引用的是一个对象或者数组，那么修改的内部属性是可以的。

  const person = {
      name: 'Jay'
  }
  person.name = 'Eason'
  console.log(person.name);      //Eason

’
运行运行
如果真的想将对象冻结，应该使用Object.freeze方法。

    const person = Object.freeze({
        name: 'Jay'
    })
    // 常规模式时，下面一行不起作用；
    // 严格模式时，该行会报错
    person.name = 'Eason'
    console.log(person.name);       // Jay

’
运行运行
结尾：
声明风格 ：有了let 和const 不再使用var，因为变量有了明确的作用域、声明为准、以及不变的值。
const使用的优先级应该高于let：使用const 声明可以让浏览器运行时强制保持变量不变，也可以让静态代码分析工具提前发现不合法的赋值操作。只在提前知道未来某个变量会有修改时，再使用let。这样可以推断某些变量的值永远不变，同时也能迅速发现因意外赋值导致的非预期行