JavaScript学习笔记：变量声明let、const、var区别

  let、const、var三者作为JS中声明或者定义变量的关键字，都能声明变量，但三者存在一定的差别。以下讲讲三者区别。

1. var与let区别

  var与let的区别有如下几点：

1. 作用域；
2. 重复声明；
3. 声明提升；

1.1作用域

  在JS中，作用域分为三类、块级作用域（如：if语句块）；函数作用域（方法）；全局作用域；对于var声明的变量而言，只存在函数作用域以及全局作用域；不存在块级作用域，而let/const声明三种作用域都存在。如下代码能体现出该差别：

if (true) {
  var phrase = "Hello";
}
if (true) {
   let phrase1 = "Hello";
}
console.log(phrase); // 控制台打印Hello
console.log(phrase1); // 控制台打印异常Uncaught ReferenceError: phrase1 is not defined

两者区别主要体现在块级作用域上；

2.2 重复声明

  var允许对一个变量重复声明，而let不行；如果我们用let对一个变量重复声明，则会报错，如下：

let user;
let user; // SyntaxError: 'user' has already been declared

使用 var，我们可以重复声明一个变量，不管多少次都行。如果我们对一个已经声明的变量使用 var，这条新的声明语句会被忽略，只是变量会被重新赋值：

var user = "Pete";

var user = "John"; // 这个 "var" 无效（因为变量已经声明过了），等同于：user = "John"
// ……不会触发错误

console.log(user); // John

2.3 声明提升

  声明提升是var声明特有的属性；当函数开始的时候，就会处理 var 声明（脚本启动对应全局变量）。
   换言之，var 声明的变量会在函数开头被定义，与它在代码中定义的位置无关（这里不考虑定义在嵌套函数中的情况）。如下代码：

function practice() {
    phrase = "Hello"; 
    
    console.log(phrase); // 能打印Hello
    
    var phrase;
}

对于程序来讲，以上代码等同于：

function practice() {
 	var phrase;
 	
    phrase = "Hello"; 
    
    console.log(phrase); // 能打印Hello
}

  对于let来讲，若变量在未赋值前使用，直接会报错，不允许变量使用在变量声明之前；故而不存在声明提升这个属性；如下代码：

phrase = "Hello"; //Uncaught ReferenceError: Cannot access 'phrase' before initialization
            
console.log(phrase); // 

let phrase; 

2、let与const区别

  对于作用域以及变量声明这一块，let与const基本相同，但是let与const最大的区别是，const声明变量需要给该变量一个初始值，并且不允许被修改；如下代码：

let phrase;
console.log(phrase); //打印 undefined

const phrase1; //直接报错 Uncaught SyntaxError: Missing initializer in const declaration
console.log(phrase1);

const声明不允许被修改：

const phrase1 = "Hello";
phrase1 = "world"; // Uncaught TypeError: Assignment to constant variable.

故而通常情况下，const通常声明的是常量。

3. 总结

var 与 let/const 有两个主要的区别：

• var 声明的变量没有块级作用域，它们仅在当前函数内可见，或者全局可见（如果变量是在函数外声明的）
• var 变量声明在函数开头就会被处理（脚本启动对应全局变量）。

这些差异使 var 在大多数情况下都比 let 更糟糕。块级作用域是这么好的一个东西。这就是 let 在几年前就被写入到标准中的原因，并且现在（与 const 一起）已经成为了声明变量的主要方式。