let、var、const的用法

let、var、const用法

var 、 let、 const 都可以用来声明变量，那么它们的区别是什么？他们之间又有怎样的联系？
让我们一起来康康。

1. var声明的变量会挂载在window上，而let和const声明的变量不会
2. var声明变量存在变量提升，let和const不存在变量提升
3. let和const声明形成块作用域
4. 同一作用域下let和const不能声明同名变量，而var可以
5. 暂时性死区

一、var声明的变量会挂载在window上，而let和const声明的变量不会

话不多说，直接上代码，请看码…

var b = 123;
let c = 246;
const d = 512;
console.log(b,'b');
console.log(window.b,'window.b');
console.log(c,'c');
console.log(window.c,'window.c');
console.log(d,'d');
console.log(window.d,'window.d');

二、var声明变量存在变量提升，let和const不存在变量提升

首先解释一下什么是变量提升和函数提升：

变量提升和函数提升：通常JS引擎会在正式执行之前先进行一次预编译，在这个过程中，首先将变量声明及函数声明提升至当前作用域的顶端，然后进行接下来的处理。这就是变量提升和函数提升

引擎在读取js代码的过程中，分为两步。 第一个步骤是整个js代码的解析读取，第二个步骤是执行。
在JS代码执行之前，浏览器的解析器在遇到 var 变量名 和function 整个函数 提升到当前作用域的最前面。
变量提升和函数提升的规则：
1.变量提升只会提升变量名的声明，而不会提升变量的赋值初始化。
2.函数提升的优先级大于变量提升的优先级，即函数提升在变量提升之上。

console.log(foo1); // [Function: foo1]
foo1(); // foo1
console.log(foo2); // undefined
foo2(); // TypeError: foo2 is not a function
function foo1 () {
	console.log("foo1");
};
var foo2 = function () {
    console.log("foo2");
};

输出结果如下:

也就是说，函数提升只会提升函数声明，不会提升函数表达式

三、let和const声明形成块作用域

所谓块级作用域，简单点来说就是一对花括号包裹起来的区域{}

{
     var e = 100;
     let f = 10;
     const g = 200;
}
console.log(e); // 100
// console.log(f)  // 报错：f is not defined  ===> 找不到f这个变量
// console.log(g);//报错：g is not defined  ===> 找不到g这个变量

四、同一作用域下let和const不能声明同名变量，而var可以

如下，用var重复声明和赋值一个变量，都不会报错

var name1 = "hello";
console.log(name1,'name1');
var name1 = "hello2";
console.log(name1,'name1');

如下用let重复声明一个变量会报错，而重复给一个变量赋值不会报错

let name1 = "hello";
let name1;
console.log(name1,'name1');
//Uncaught SyntaxError: Identifier 'name1' has already been declared

let name1 = "hello";
name1 = "hello2";
console.log(name1,'name1'); //hello2

如下用const重复声明和赋值一个变量都会报错。
如果声明的是复合类型数据，可以修改其属性

const name1 = "hello";
const name1;
console.log(name1,'name1');
//Uncaught SyntaxError: Missing initializer in const declaration

const name1 = "hello";
name1 = 'hello2';
console.log(name1,'name1');
//Uncaught SyntaxError: Unexpected end of input

const obj3 = {a:100};
obj3.name = 'apple';
obj3.a = 10000;
console.log(obj3);　　// {a:10000,name:'apple'}

五、 暂时性死区

暂时性死区：let 和 const 声明的变量不存在变量提升，其作用域都是块级作用域，凡是在声明变量之前使用变量就会报错，所以，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

if (true) {
   // 死区开始
   name = 'lut'; //  ReferenceError
   console.log(name); //  ReferenceError
   // 开始声明变量，死区结束
   let name; 
   console.log(name); // undefined 
   name = 520;
   console.log(name); // 520
}

来自：一个喜欢前端的杰迷