var let const 之间的区别

为什么会出现 let const？

避免变量泄露
提升代码严谨性

初始值

• var 和 let 初始值可选
• const初始值是必填

var a; // ok
let b; // ok
const C; // 报错
const D = []
D[0] = 2 // ok
D = {} // 报错 Uncaught TypeError: Assignment to constant variable.

作用域

• var 是函数作用域
• let const 是块级作用域
  • 块级作用域：用一对花括号创建出来的作用域

{
    var a = 1
    let b = 2
    const c = 3
}
console.log('a', a) // 1
console.log('b', b) // Uncaught ReferenceError: b is not defined
console.log('c', c) // Uncaught ReferenceError: c is not defined
// let 和 const 声明的变量是块级的，因此它们作用域始终在块中。

变量提升

• var 会被提升
• let const 不会直接提升（准确的说是创建被提升，但初始化还未提升，所以暂时还不能访问该变量）

console.log(a) // undefined, 不会报错
var a = 1

// 暂时性死区：不能先访问后声明
console.log(b , c) // Uncaught SyntaxError: Identifier 'b' has already been declared 报错
let b = 1
const c = 2

• 为什么会存在这个现象
  • JS编译器在编译阶段会搜集所有的变量声明，并将变量声明提前到变量当前所在作用域的顶部
  • 变量声明在编译阶段就已经执行，但赋值实在执行阶段才执行的；
• 补充：
  • function 函数声明也会被提升，但函数表达式不会

  // 函数声明
  foo(); // 1
  function foo () {
      console.log(1)
  }
  
  // 函数表达式
  foo2() // Uncaught TypeError: foo2 is not a function 直接报错，后面代码不再执行
  var foo2 = function () {
      console.log(2)
  }
  

  • 函数提升优先级高于变量提升

      // 案例1
      console.log(foo); // [Function: foo]
      function foo () {}
      var foo = 10;
      
      // 案例2
      console.log(foo); // [Function: foo]
      var foo = 10;
      function foo () {}
  

修改值

• var let都可以修改值
• const 不能修改，修改会报错 Uncaught TypeError: Assignment to constant variable.

重复申明

• var 可以重复申明
• let const 同一作用域内，重复申明会报错

let a = 1
let a = 2 // Uncaught SyntaxError: Identifier 'a' has already been declared

全局属性

• var
  • 如果当前作用域就是全局的情况下，申明的变量会默认挂载到window/global上
  • globalThis -> 兼容浏览器的window和nodeJs环境中的global
• let 和 const 不会；

var a = 1
globalThis.a // 1

let b = 1
globalThis.b // undefined