JavaScript let vs var

在 JavaScript 中，let 和 var 是用于声明新变量的两个关键字。我们将在这篇文章中清楚地了解 let 和 var 之间的区别。

在 JavaScript 的早期，var 关键字用于在程序中声明变量。在使用 var 关键字后，出现了一个问题，即 var 关键字是为整个程序定义的。如果变量在块作用域内定义，那么这个问题会导致在块外重新声明变量时遇到困难。

当 2015 年引入 ES6 时，也引入了另外两个关键字，即 **let** 和 **const**。let 和 var 都用于声明变量，但 **let 和 var 关键字之间的唯一区别**在于它们的作用域。

let 关键字

let 关键字的作用域是块作用域。我们不能使用 let 关键字重新声明变量。我们必须在使用前声明它，否则程序将显示错误。

演示 1

我们将尝试在声明变量 **num** 之前打印它。

代码

输出

当我们尝试在声明变量 **num** 之前打印它时，可以看到错误出现了。

 
ReferenceError: Cannot access 'num' before initialization   

演示 2

在声明变量 **num** 之后，我们将打印它。

代码

输出

我们可以看到变量 **num** 的值已打印到控制台。

 
15   

演示 3

我们将创建一个名为 text() 的函数，并声明一个名为 **y** 的变量。我们将在函数块内创建一个 if 块，并在函数内声明一个名为 **z** 的变量，然后打印变量 **y** 和 **z** 中存储的文本。

代码

输出

我们可以看到文本已打印到控制台，因为我们在 **if 块**内使用了 let 关键字，并且仅在 if 块内调用了变量 **y** 和 **z**。

当我们尝试在 **if 块**外打印变量 **y** 和 **z** 时，它显示了一个错误。

 
Today is an awesome day.
ReferenceError: z is not defined   

演示 4

当按钮被点击时，我们将改变标题的颜色。我们将使用 **let** 关键字存储标题的颜色。

代码

输出

标题 **h1** 的颜色没有改变，因为 let 关键字的作用域是块作用域，而我们试图在函数块外访问 let 关键字。

var 关键字

var 关键字的作用域是函数作用域。

演示 1

我们将尝试在声明变量 **fruit** 之前打印它。

代码

输出

我们可以看到代码返回了变量 **fruit** 的未定义值。

 
undefined   

演示 2

在声明变量 **fruit** 之后，我们将打印它。

代码

输出

我们可以看到程序已返回 **fruit** 的已定义值。

 
mango   

演示 3

我们将创建一个函数，并在函数内声明一个变量 **x**，然后打印变量 **x** 中存储的文本。

代码

输出

我们可以看到消息已打印到控制台。

 
hello sir   

演示 4

当按钮被点击时，我们将改变标题的颜色。我们将使用 **var** 关键字存储标题的颜色。

代码

输出

标题 **h1** 的颜色改变了，因为 var 关键字的作用域是函数作用域，因此当我们试图在函数块外访问 var 关键字时，h1 的颜色变成了红色。

改变 标题 h1 颜色之前

改变标题 h1 颜色之后

let 与 var

结论

我们在本文中研究了 **JavaScript let 与 var**。let 和 var 关键字都用于在 JavaScript 中声明变量，但 let 和 var 之间的主要区别在于 let 关键字是块作用域的，而 var 关键字是函数作用域的。