let、const和var的区别：JavaScript变量声明关键字的比较

引言

在JavaScript中，变量声明是编写代码时必不可少的一部分。了解不同的变量声明关键字的区别对于编写高质量的代码至关重要。本文将探讨JavaScript中三个常用的变量声明关键字：let、const和var，以及它们之间的区别。

var

var是函数作用域，

什么是函数作用域呢?很简单，用下面的代码就可以看出来。

function example() {
  var x = 10; // x 在 example 函数内部可见
  console.log(x); // 输出 10
}

example();
console.log(x); // 报错，x 在全局作用域不可见

在这里，fn函数中无法获取外部a的值，这是因为var是函数作用域，意味着变量的范围限定在声明它的函数内部或全局作用域。

var存在变量提升

function example () {
  console.log(a)// undefined
  var a = 1
}
// 实际上是这样
function example () {
  var a;
  console.log(a)// undefined
  a = 1
}

example()


example()

在这里，console.log(a)可以找到a，但是无法获取他的值，因此输出undefined，这是由于 JavaScript 引擎在代码执行之前对变量进行了提升，将变量声明移动到了作用域的顶部。因此，尽管在实际的代码位置之前访问变量，但变量在内部仍然存在，只是尚未赋值。

var被赋值后类型可以被修改

例如

var a = 1
var a = 'string'

在这里var首先被赋值为number类型，但是之后又被赋值为string类型，但是程序并不会报错，这在项目中有很大的风险，对于后期的维护，和排查错误都有很大的风险。

let

let是es6引进的关键词，主要就是用来改善上述所说的var的风险问题。

let是块级作用域

function example() {
  let x = 10; // 在 example 函数内部声明变量 x

  if (x === 10) {
    let y = 20; // 在 if 块内部声明变量 y
    console.log(x); // 输出 10
    console.log(y); // 输出 20
  }

  console.log(x); // 输出 10
  console.log(y); // 报错，y 在 if 块外部不可见
}

example();

在这个示例中，我们在example函数内部使用let声明了变量x和y。x是在函数作用域内声明的，所以在整个函数内都是可见的。而y是在if块内部声明的，所以它的作用域被限制在该块内部。

在if块内部，我们可以访问和使用变量x和y，并且它们的值都可以正确地输出。但是，当我们尝试在if块外部访问变量y时，会出现错误，因为y的作用域仅限于if块内部。

这展示了let声明的块级作用域。变量在块（通常是花括号）内部声明，只在该块内部可见，超出该块的范围，变量就不再可见。

let声明的变量值可以改变，但是类型无法改变

let a = 1
let a = 'string'
console.log(a)// 报错

这样程序会报错，因为我们用let将a设为number类型，但是之后又将其设置为string类型，在let中是不被允许的

let不存在变量提升

function example () {
  console.log(a)// 报错
  let a = 1
  console.log(a)// 1
}

example()

这个程序会报错，因为第一个a无法被找到

const

const相对于let来说更加的严格。const也是块级作用域，也没有变量提升。
const和let都差不多，这里就不多说了，这里就讲讲他与let的区别吧

const定义的变量无法被修改（类型和值都不能被修改）

const a = 1
const a = 2
console.log(a) // 报错

如果这样使用const，程序会报错，因为const声明的变量是无法被修改的，值和属性都不行。

总结let、const和var的区别和用法

let适用于需要在块级作用域中声明变量的情况，并且变量的值可能会改变。
const适用于声明常量或不希望变量的值被修改的情况。
var在ES6之后仍然可以使用，但推荐使用let和const代替，以避免一些潜在的问题。