var const let

菜鸟学前端

本文：https://www.jianshu.com/p/b7116525273b

说实话，在看到这个之前，我只知道 var，以前也只用过这玩意。
后面那俩都不知道是干啥用的。
感谢同桌的提示。
记！

var

var 是 ES5 提出的。用于声明变量。

什么是 ES5 ？
ES5 全称 ECMAScript5，即 ES5，是ECMAScripts的第五次修订（第四版因为过于复杂废弃了），又称ECMAScript2009，于 2009 年完成标准化。

var num = 1;
var str = 'a';
var fun = function(){};
var obj = {};
var bean = new ABC(); /* 需要提前声明过ACB这个类型 */

var 就是一切，想是啥就可以是啥，而且是 弱类型。就算是赋值完了还可以赋值为其它类型的值。
当然因为是重复赋值，肯定只有最后一次有效。

var any = 1;
any = 'a';
any = function(){};
any = {};
any = new ABC(); /* 需要提前声明过ACB这个类型 */
any = false;
console.log(any);

// print 
false

var 还可以重复声明，就是说即使你声明过变量any ，还可以再次声明 any。
同样的，因为是同一个变量名，后者肯定会覆盖前者。
上面那段代码还可以这么写。

var any = 1;
var any = 'a';
var any = function(){};
var any = {};
var any = new ABC(); /* 需要提前声明过ACB这个类型 */
var any = false;
console.log(any);

// print 
false

var 还可以 变量提升 ！！！啥是变量提升？ 额，大概是把自己变牛逼了。
你看，它可先使用，后声明。

console.log(any);
var any = false;

// print 
undefined

后来才了解到有个什么预解析过程，会提前加载这个变量。
类似于如下：

var any;
console.log(any);
any = false;

// print 
undefined

这样一来，结合以上特征，代码开始渐渐奇怪起来。

for(var index = 0;index < 10; index++ ){
     /* do something */
}

...
/* n 多代码之后 */
...

/* 脑抽了，突然想声明个index用来做某个标记位 */
var index; 
if (index) {
    console.log('already init !!!');
    console.log('index value:' + index);
} else {
    /* init something */
    console.log('init index');
    index = 1;
}

// print 
already init !!!
index value: 10

唉，啥情况，哪来的10？？？
大家可能说，上面那个for循环的锅。
但是在多人协作的情况下，代码没报错，执行结果却不是你想要的。
而且这种情况下，排查是个非常困难的事，因为真不知道谁在哪个地方突然声明了一个一样的变量。

而且再极端一些，那个for循环假设只在某些条件下才执行。
那么刚才那个代码就成了，你这个bug偶尔出现，偶尔消失。

let和const

let 和 const 都是 ES6 提出的。一个用于声明变量，一个用于声明常量。

什么是ES6？
ES6， 全称 ECMAScript 6.0 ，即 ES6，是ECMAScripts的第六次修订，又称 ES2015，于2015年06 月发版，是 JavaScript 的下一个版本标准。

ES6 中有了块级作用域的概念，let 和 const 都是块级作用域。以 {} 代码块作为作用域范围，只能在代码块里面使用，不存在变量提升，只能先声明再使用，否则会报错。

if (true) {
   let a = 'let';
   var b = 'var';
}
 
console.log(b); // var
console.log(a); // Uncaught ReferenceError: a is not defined
console.log(c); // Uncaught ReferenceError: c is not defined
let c = 'c'

在代码块内，在声明变量之前，该变量都是不可用的。
这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ），在同一个代码块内，不允许重复声明。只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。不同代码块是可以重复声明的。

let a = 'let a'
if (true) {
    let a = 'let if a';
    console.log(a); // print 'let if a'

    let a = 'next same let'
    console.log(a); // Uncaught SyntaxError: Identifier 'a' has already been declared
}
console.log(a); // print 'let a'

const 声明的是一个只读常量，在声明时就需要赋值。（如果 const 的是一个对象，
对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址不能改变，而变量成员是可以修改的。）

const any = 'abc';
const obj = {};

除了不可重复赋值的问题，其它和 let 作用域类似，功能类似。

写不动了

写不动了。。。后面有想法了再慢慢了解和补充。。

参考

谈谈ES5和ES6的区别
ES6的let和const
var、let、const的区别