在JavaScript有3个关键字可以声明变量：var、const和let。

前言

在JavaScript有3个关键字可以声明变量：var、const和let。var在ECMAScript的所有版本中都可以使用，而const和let只能在ECMAScript 6（ES6）及更晚的版本中使用。本篇文章将讲解var、let和const关键字及其之间的区别。

原因

ECMAScript 6增加let和const从客观上为这门语言更精确地声明作用域 和语义提供了更好的支持。行为怪异的var所造成的各种问题，已经让 JavaScript社区为之苦恼了很多年。随着这两个新关键字的出现，新的有 助于提升代码质量的最佳实践也逐渐显现。

var关键字

定义变量：

   var message; //可以不初始化 值为undefined
   ---------
   var message = 'hi' 
   message = 100 //可以改变值及其类型，合法，但不推荐此写法。

var声明（函数作用域）

使用var操作符定义的变量会成为包含它的函数的局部变量（函数作用域）。 。比如，使用var在一个函数内部定义一个变量，就意味着该变量将在函数退出时被销毁：

   function test() { 
   var message = "hi"; // 局部变量 
   } 
   test(); 
   console.log(message); // 出错！

var变量提升

使用var时，下面的代码不会报错。这是因为使用这个关键字声明 的变量会自动提升到函数作用域顶部：

   function foo() { 
   console.log(age);  //等价于 var age 
                     // console.log(age)
   var age = 26;     // age = 26
   }
   foo(); // undefined

这就是所谓的“提升”（hoist），也就是把所有变量声明都拉到函数作用域的顶部。此外，反复多次使用var声明同一个变量也没有问题：

function foo() {
    var age = 16; 
    var age = 26;
    var age = 36; 
    console.log(age);
} 
    foo(); // 36

let关键字

let声明（块作用域）

let跟var的作用差不多，但有着非常重要的区别。最明显的区别是，let声明的范围是块作用域，而var声明的范围是函数作用域。
什么是块作用域?就是这个"{}"块级作用域是函数作用域的一个子集，函数作用域包含块级作用域

   if (true) {
   var name = 'Matt';
   console.log(name); // Matt
   }
   console.log(name); // Matt
   if (true) {
   let age = 26;
   console.log(age); // 26
   }
   console.log(age); // ReferenceError: age没有定义

对声明冗余报错不会因混用let(块)和var（函数）而受影响。这两个关键字声明的并不是不同类型的变量，它们只是指出变量在相关作用域如何存在。

   var name; 
   let name; // SyntaxError 
   let age;
   var age; // SyntaxError

暂时性死区

let和var的另一个重要的区别，就是let声明的变量不会再作用域中被提升。（参考var变量提升段落）

// name会被提升 
console.log(name); // undefined
var name = 'Matt'; 

// age不会被提升 
console.log(age); // ReferenceError：
age没有定义 let age = 26;

全局声明

与var关键字不同，使用let在全局作用域中声明的变量不会成为window对象的属性（var声明的变量则会）。(可以自己实践一下)

var aa = 'Matt';
console.log(window.aa); // 'Matt'
let ab = 26;
console.log(window.ab); // undefined
console.log(window)

条件声明

在使用var声明变量时，由于声明会被提升，JavaScript引擎会自动 将多余的声明在作用域顶部合并为一个声明。因为let的作用域是块，所以不可能检查前面是否已经使用let声明过同名变量，同时也就不可能在没有声明的情况下声明它。

<script>
var name = 'Nicholas';
let age = 26;
</script>
<script>
// 假设脚本不确定页面中是否已经声明了同名变量
// 那它可以假设还没有声明过
var name = 'Matt';
// 这里没问题，因为可以被作为一个提升声明来处理
// 不需要检查之前是否声明过同名变量
let age = 36;
// 如果age之前声明过，这里会报错
</script>

for循环中的let声明

在let出现之前，for循环定义的迭代变量会渗透到循环体外部：

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

改成使用let之后，这个问题就消失了，因为迭代变量的作用域仅限于for循环块内部：

for (let i = 0; i < 5; ++i) {
// 循环逻辑
}
console.log(i); // ReferenceError: i没有定义

在使用var的时候，最常见的问题就是对迭代变量的奇特声明和修改：

for (var i = 0; i < 5; ++i) {
setTimeout(() => console.log(i), 0)
}
// 你可能以为会输出0、1、2、3、4
// 实际上会输出5、5、5、5、5

之所以会这样，是因为在退出循环时，迭代变量保存的是导致循环退出的值：5。在之后执行超时逻辑时，所有的i都是同一个变量， 因而输出的都是同一个最终值。 而在使用let声明迭代变量时，JavaScript引擎在后台会为每个迭代 循环声明一个新的迭代变量。每个setTimeout引用的都是不同的变 量实例，所以console.log输出的是我们期望的值，也就是循环执 行过程中每个迭代变量的值

for (let i = 0; i < 5; ++i) {
setTimeout(() => console.log(i), 0)
}
// 会输出0、1、2、3、4

这种每次迭代声明一个独立变量实例的行为适用于所有风格的for 循环，包括for-in和for-of循环。

const关键字

const的行为与let基本相同，唯一一个重要的区别是用它声明变量时必须同时初始化变量，且尝试修改const声明的变量会导致运行时错误。

const age = 26; 
age = 36; // TypeError: 给常量赋值 
// const也不允许重复声明 
const name = 'Matt';
const name = 'Nicholas'; // SyntaxError
// const声明的作用域也是块 
const name = 'Matt'; 
if (true) { 
const name = 'Nicholas'; 
} 
console.log(name); // Matt

const声明的限制只适用于它指向的变量的引用。换句话说，如果const 变量引用的是一个对象，那么修改这个对象内部的属性并不违反const的限制(基本类型和引用类型存储问题导致----以后会写)。

const person = {};
person.name = 'Matt'; // ok

const不能在for循环中来声明迭代变量（const i;i++;const常量不能被修改）。

如果你只想用const声明一个不会被修改的for循环变量，那也是 可以的。也就是说，每次迭代只是创建一个新变量。这对for-of和for-in循环特别有意义：

for (const key in {a: 1, b: 2}) { 
console.log(key); 
}
// a, b 

for (const value of [1,2,3,4,5]) {
console.log(value); 
}
// 1, 2, 3, 4, 5

声明风格及最佳实践

不使用var

有了let和const，大多数开发者会发现自己不再需要var了。限制 自己只使用let和const有助于提升代码质量，因为变量有了明确的 作用域、声明位置，以及不变的值。

const优先，let次之

使用const声明可以让浏览器运行时强制保持变量不变，也可以让 静态代码分析工具提前发现不合法的赋值操作。因此，很多开发者 认为应该优先使用const来声明变量，只在提前知道未来会有修改时，再使用let。这样可以让开发者更有信心地推断某些变量的值 永远不会变，同时也能迅速发现因意外赋值导致的非预期行为。

像部分公司项目使用eslint 规范代码，就是使用此规则。

总结（区别【面试常问】）

三者之间的区别

• var为函数作用域，let和const是块级作用域。
• var可以重复声明，let和const不可以，const不可以修改（基本类型）。
• var会有变量提升，let没有（暂时性死区），const声明必须初始化。
• var全局声明会成为window的属性，let和const不会。
• for循环参考上文段落。

结尾

感谢您阅读本篇文章，此系列文章本意为对JavaScript学习进行记录从而加深记忆，如存在错误，望告知纠正。
往期文章：
HTML中的JavaScript—读懂<script>标签含义！ - 掘金 (juejin.cn)