var、let、const 分别是什么以及三者的区别

var、let、const的区别

var

用var声明的变量既是全局变量，也是顶层变量

• 使用var声明的变量存在变量提升

  console.log(a);	//undefined
  var a = 20;
  //实际编译时的执行顺序
  var a;
  console.log(a);
  a=20;
  

• 使用var，我们能够对一个变量进行多次声明，后面声明的变量会覆盖前面的变量声明

  var a = 20;
  var a = 30;
  console.log(a)  //30
  

• 在函数中使用使用var声明变量时候，该变量是局部的;而如果在函数内不使用var，该变量是全局的

  //在函数内使用var
  var a = 20
  function number(){
      var a = 30
  }
  number()
  console.log(a) // 20 
  //不在函数内使用var
  var a = 20
  function number(){
     a = 30
  }
  number()
  console.log(a) // 30 
  

let

let是ES6新增的命令，用来声明变量

用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效

• 不存在变量提升

  console.log(a); //报错ReferenceError
  a=20;
  

• 存在块级作用域

  {
      let a = 20;
  }
  console.log(a) //报错 a is not defined
  

• let 不允许在同一作用域内重复声明

  {
      let a = 20;
      let a = 30;  //Uncaught SyntaxError: Identifier 'a' has already been declared
  }
  

const

const声明一个只读的常量，一旦声明，常量的值就不能改变

• 一旦声明，就不能再次被赋值

  const a = 1
  a = 3
  // TypeError: Assignment to constant variable.
  

• 声明时必须赋值

  const a;
  // SyntaxError: Missing initializer in const declaration
  

区别

从 变量提升、暂时性死区、块级作用域、重复声明、修改声明的变量 五个方面对比

• 变量提升

  • let和const不存在变量提升，即它们所声明的变量一定要在声明后使用，否则报错
  • var声明的变量存在变量提升，即变量可以在声明之前调用，值为undefined

• 暂时性死区

  • var不存在暂时性死区
  • let和const存在暂时性死区，只有等到声明变量的那一行代码出现，才可以获取和使用该变量

• 块级作用域

  • var不存在块级作用域
  • let和const存在块级作用域

• 重复声明

  • var可以重复声明，后面的会覆盖前面的
  • let和const不可以重复声明

• 修改声明的变量

  • var和let可以
  • const声明一个只读的常量。一旦声明，常量的值就不能改变