夯实基础篇----js中使用var、let、const定义变量的区别

这是我参与8月更文挑战的第26天，活动详情查看：8月更文挑战；

写在前面

日常开发中我们定义变量一般都会使用var、let、const，但是使用起来还是有些区别的，今天我们来一起学一下。

正文

变量提升

使用var定义的变量会被自动提升到当前作用域的顶部，而let和const不会变量提升，看一个例子

var test = 'hello';
(function(){
    if (typeof test === 'undefined') {
        var test = 'juejin';
        console.log(test);
    } else {
        console.log(test);
    }
})()

这段代码输出什么呢？答案是juejin。

代码首先定义了一个变量test，并赋值为hello，紧接着执行了一个立即执行函数，这里进入到函数后，解析到了var test = 'juejin;'，这里定义的test会被js将它的声明提升到函数顶部，即var test;，我们都知道定义变量不赋值，变量的值就默认为undefined，所以此处使用类型判断，就得到了undefined，接着再对test进行赋值，输出就得到了结果为juejin。

如果代码改成以下这样，立即执行函数中使用let来定义test变量，那么没有了变量提升，判断test类型就会得到string，最终就会输出hello了。

var test = 'hello';
(function(){
    if (typeof test === 'undefined') {
        let test = 'juejin';
        console.log(test);
    } else {
        console.log(test);
    }
})()

不可重复定义

let和const定义的变量都不能被重复定义，但let定义的变量可以被重复赋值。

let a = 1;
a = 2;
console.log(2); //2

const c = 1;
c = 2; // Uncaught TypeError: Assignment to constant variable.

const是用来定义常量的，但如果const定义的是Object数据类型的常量，那么这个常量中的值是能够被修改的。

const obj = {
    a: 1,
    b: 2,
}
obj.a = 5;
console.log(obj); //{a: 5, b: 2}

总结

当然，var、let、const的区别不止以上这两点，但是这两点是日常开发中比较重要的两点，小伙伴们可以认真体会一下，如果感兴趣可以去更加深入的学习一下~

前端漫漫长途，我们都在路上，希望可以和小伙伴们一起交流，一起进步。持续更新ing.....