【前端面试题】var、let、const的区别是什么

var

• ES6之前使用var来声明变量
• var可以在相同的作用域声明重复的变量名
• var存在声明提前，可以先使用再声明
• var在全局作用域下声明的变量会挂载到window上，可以通过window访问

ES6之前只有全局作用域和函数作用域，函数作用域中通过var声明的变量不会挂载到window上，除非是没有使用var声明，浏览器就会自动在全局作用域下声明一个相同变量名称。

var a = 'a';
function fn() {
    
    
    var b = 'b';
    console.log(b);
}
fn(); // 'b'
console.log(a); // 'a'
var a = 'a2';
console.log(a); // 'a2'
console.log(window.a); // 'a2'
console.log(window.b); // undefined

let、const

• ES6新增用来声明具有块级作用域的变量
• let不能定义名称重复的变量名，且存在暂时性死区，不能先使用再定义

暂时性死区：未定义的变量不能使用，会提示Uncaught ReferenceError: Cannot access 'xxx' before initialization的错误

// let不能声明重复的变量名
let a = 'a';
let a = 'a';
console.log(a); // Uncaught SyntaxError: Identifier 'a' has already been declared

// let具有暂时性死区
console.log(c);
let c = 'c'; // Uncaught ReferenceError: Cannot access 'c' before initialization

• const定义常量，必须定义时就定义初始值，并且不能更改（对象除外）

// const定义的变量必须定义时就初始化值
const a; // Uncaught SyntaxError: Missing initializer in const declaration

// const定义的变量不能修改
const a = 'a';
a = 'a2';
console.log(a); // Uncaught TypeError: Assignment to constant variable.
// 对象可以改
const a = {
    
     name: 'a', age: 22 };
a.name = 'a2';
console.log(a); // { name: 'a2', age: 22 }

• let和const定义的是块级作用域，在不同的作用域可以定义相同名称的变量名，互不影响

let a = 'a';
if (true) {
    
    
    let a = 'a2';
}
console.log(a); // 打印的是相同作用域下的a，所以这里输出的是'a'
// const也一样
const a = 'a';
if (true) {
    
    
    const a = 'a2';
}
console.log(a); // 'a'

• let和const定义的变量执行结束会被回收（不考虑闭包的情况），就不能再被访问了

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