var 很傻、let 很亲切 、const 更坚定

这节内容虽然比较基础，但是工作中 100% 会用到。

最早 JavaScript 使用 var 来申明变量，由于当初设计的并不合理，后来 ES6 推出了 let 和 const。

var 的作用域是全局和函数作用域，在程序设计语言中，作用域是指变量能够作用的范围。全局作用域这个好理解，它伴随着页面的整个生命周期。函数作用域指在函数体内定义，可在函数体内任意地方使用。看代码：

// 使用 var 在全局作用域申明变量 name
var name = 'suyan';
function callVar(isNew) {
    // 使用 var 在函数作用域申明变量 age
    if (isNew) {
        var age = 20;
        // age 还可以继续声明
        var age = 24;
    }
    // 可以正常访问 if {} 块级作用域中定义的 age 变量
    // 因为是函数作用域
    console.log(age);
}
callVar(true);
console.log(name);
// Uncaught ReferenceError: age is not defined
// console.log(age);


// name 还可以继续声明
var name = 'lefex';
console.log(name);

总之 var 申明变量有很大弊端。它会使变量提升，也就是说在 JavaScript 代码执行之前，JavaScript 引擎把变量和函数的声明部分提升到对应作用域的开始位置。对于 var 声明的变量，变量提升后，它的初始值是 undefined。比如：

// call 这个函数被提升了
call();


function call() {
    // name 被提升了
    console.log(name);
    var name = '前端小课';
}

ES6中提出了 let，使用 let 声明的变量是块级作用域，也就是说在 { // 变量 } 声明的变量只能在这个块内部使用。同一变量不可以重复申明。关于块可以这样理解：

for(let i = 0; i < 2; i++) {
    // 块
}
if (true) {
    // 块
}
function call() {
    // 块
}

关于 let 的使用可以参考下面的代码：

// let是块级作用域
function callLet(isNew) {
    if (isNew) {
        let address = 'BeiJing';
        // 可以再次被赋值
        address = 'XingHe';
        // Uncaught SyntaxError: Identifier 'address' has already been declared
        // 不能再次被定义
        // let address = 'BaoTou';
        console.log(address);
    }
    // Uncaught ReferenceError: address is not defined
    // address 只能在定义它的块级作用域中能够使用
    // console.log(address);


    // 在不同的作用域中是可以重复定义的
    let address = 'HuShi';
    console.log(address);
}
callLet(true);

对于 let 声明的变量，如果在未申明时使用会报错，比如下面的代码：

// call 这个函数被提升了
call();


function call() {
    // name 被提升了
    console.log(name);
    let name = '前端小课';
}

有时候我们想声明一个变量，一旦赋值就不需要修改了，那就用 const，也是常量声明最常用的手段。在日常开发中能用 const 就要 const，它能保证程序的状态更稳定。const 与 let 类似，不同之处在于它的不变性，使用 const 声明的变量，声明时就要设定初始值。

// const 也是块级作用域，它与 let 不同的是它的值一旦被指定是不能修改的
function callConst(isNew) {
    if (isNew) {
        //  Uncaught SyntaxError: Missing initializer in const declaration 必须初始化
        // const job;
        const job = 'iOS';
        // Uncaught TypeError: Assignment to constant variable.
        // const 变量不能修改
        // job = 'FE';
        console.log(job);
        const info = {
            tep: '10086',
            sex: '男'
        };
        info.sex = '女';
        // 属性可以修改
        console.log(info);
    }
    const job = 'Android';
    // 在不同作用域定义
    console.log(job);


}
callConst(true);

总结

1.var 声明的变量的作用域是全局或者函数级别的，而 let 和 const 声明的变量是块级的，一个 { } 表示一个块；

2.var 声明的变量可以更新，重新声明；let 声明的变量可以更新但不可以重新声明；const 声明的变量既不能更新也不能重新声明；

3.var 和 let 申明的变量可以不初始化，但是 const 声明的变量必须初始化；

4.var、let、const 申明的变量都会发生变量提升（先使用后定义），var 申明的变量被初始化为 undefined，而 let 和 const 声明的变量不会被初始化，会报错。

今天的打卡指令：

1.var、let、const，你更喜欢用哪个，为什么？

2.新的一周，新的开始；

---

推荐阅读：

我的2019 —我与《前端小课》

被招安的 JavaScript ，取名为 ECMAScript

让 JavaScript 跑起来+函数

https://dev.to/sarah_chima/var-let-and-const--whats-the-difference-69e