本文共 10026 字，大约阅读时间需要 33 分钟。
A lot of shiny new features came out with ES2015 (ES6). And now, since it's 2020, it's assumed that a lot of JavaScript developers have become familiar with and have started using these features.
ES2015(ES6)推出了许多闪亮的新功能。 现在，从2020年开始，我们假设许多JavaScript开发人员已经熟悉并开始使用这些功能。
While this assumption might be partially true, it's still possible that some of these features remain a mystery to some devs.
尽管这个假设可能部分正确，但其中某些功能仍然可能对某些开发人员来说仍然是个谜。
One of the features that came with ES6 is the addition of let and const, which can be used for variable declaration. The question is, what makes them different from good ol' var which we've been using? If you are still not clear about this, then this article is for you.
ES6附带的功能之一是添加了let和const ，它们可用于变量声明。 现在的问题是，是什么让他们从优秀醇”不同的var ，我们一直在使用？ 如果您仍然不清楚，那么本文适合您。
In this article, we'll discuss var, let and const with respect to their scope, use, and hoisting. As you read, take note of the differences between them that I'll point out.
在本文中，我们将讨论var ， let和const的范围，用途和提升。 在阅读时，请注意我将指出的它们之间的差异。
Before the advent of ES6, var declarations ruled. There are issues associated with variables declared with var, though. That is why it was necessary for new ways to declare variables to emerge. First, let's get to understand var more before we discuss those issues.
在ES6出现之前，就使用了var声明。 但是，有一些问题与用var声明的变量有关。 这就是为什么必须要有新的方法来声明变量。 首先，让我们在讨论这些问题之前更多地了解var 。
Scope essentially means where these variables are available for use. var declarations are globally scoped or function/locally scoped.
范围实质上是指可以使用这些变量的位置。 var声明是全局范围的或函数/局部范围的。
The scope is global when a var variable is declared outside a function. This means that any variable that is declared with var outside a function block is available for use in the whole window.
当在函数外部声明var变量时，作用域是全局的。 这意味着在功能块外部用var声明的任何变量都可以在整个窗口中使用。
var is function scoped when it is declared within a function. This means that it is available and can be accessed only within that function.
在函数中声明var时，它是函数作用域的。 这意味着它是可用的，并且只能在该功能内访问。
To understand further, look at the example below.
要进一步了解，请查看下面的示例。
var greeter = "hey hi"; function newFunction() { var hello = "hello"; } Here, greeter is globally scoped because it exists outside a function while hello is function scoped. So we cannot access the variable hello outside of a function. So if we do this:
在这里， greeter是全局范围的，因为它在函数外部存在而hello是函数范围的。 因此，我们无法在函数外部访问变量hello 。 因此，如果我们这样做：
var tester = "hey hi"; function newFunction() { var hello = "hello"; } console.log(hello); // error: hello is not defined We'll get an error which is as a result of hello not being available outside the function.
我们会收到错误消息，这是由于您无法在函数外部使用hello而导致的。
This means that we can do this within the same scope and won't get an error.
这意味着我们可以在相同范围内执行此操作，并且不会出错。
var greeter = "hey hi"; var greeter = "say Hello instead";
and this also
这也
var greeter = "hey hi"; greeter = "say Hello instead";
Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. This means that if we do this:
提升是一种JavaScript机制，在执行代码之前，变量和函数声明会移至其作用域的顶部。 这意味着如果我们这样做：
console.log (greeter); var greeter = "say hello"
it is interpreted as this:
它被解释为：
var greeter; console.log(greeter); // greeter is undefined greeter = "say hello"
So var variables are hoisted to the top of their scope and initialized with a value of undefined.
因此，将var变量提升到其作用域的顶部，并使用undefined值对其进行初始化。
There's a weakness that comes with var. I'll use the example below to explain:
var带有一个弱点。 我将使用以下示例进行说明：
var greeter = "hey hi"; var times = 4; if (times > 3) { var greeter = "say Hello instead"; } console.log(greeter) // "say Hello instead" So, since times > 3 returns true, greeter is redefined to "say Hello instead". While this is not a problem if you knowingly want greeter to be redefined, it becomes a problem when you do not realize that a variable greeter has already been defined before.
因此，由于times > 3返回true，因此将greeter重新定义为"say Hello instead" 。 如果您有意重新定义greeter ，虽然这不是问题，但是当您不知道之前已经定义了可变greeter时，这将成为问题。
If you have used greeter in other parts of your code, you might be surprised at the output you might get. This will likely cause a lot of bugs in your code. This is why let and const are necessary.
如果在代码的其他部分使用了greeter ，则可能会对输出结果感到惊讶。 这可能会在您的代码中引起很多错误。 这就是为什么let和const是必需的。
let is now preferred for variable declaration. It's no surprise as it comes as an improvement to var declarations. It also solves the problem with var that we just covered. Let's consider why this is so.
现在， let首选用于变量声明。 这并不奇怪，因为它是对var声明的改进。 它还解决了我们刚刚介绍的var问题。 让我们考虑一下为什么会这样。
A block is a chunk of code bounded by {}. A block lives in curly braces. Anything within curly braces is a block.
块是由{}界定的代码块。 大括号中有一个块。 大括号内的任何内容都是障碍。
So a variable declared in a block with let is only available for use within that block. Let me explain this with an example:
因此，在带有let的块中声明的变量仅可在该块中使用。 让我用一个例子解释一下：
let greeting = "say Hi"; let times = 4; if (times > 3) { let hello = "say Hello instead"; console.log(hello);// "say Hello instead" } console.log(hello) // hello is not defined We see that using hello outside its block (the curly braces where it was defined) returns an error. This is because let variables are block scoped .
我们看到，在其代码块(定义它的花括号)之外使用hello返回错误。 这是因为let变量是块作用域的。
Just like var, a variable declared with let can be updated within its scope. Unlike var, a let variable cannot be re-declared within its scope. So while this will work:
就像var一样，用let声明的变量可以在其范围内更新。 与var不同，不能在其范围内重新声明let变量。 因此，这将起作用：
let greeting = "say Hi"; greeting = "say Hello instead";
this will return an error:
这将返回错误：
let greeting = "say Hi"; let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared
However, if the same variable is defined in different scopes, there will be no error:
但是，如果在不同的作用域中定义了相同的变量，则不会出现错误：
let greeting = "say Hi"; if (true) { let greeting = "say Hello instead"; console.log(greeting); // "say Hello instead" } console.log(greeting); // "say Hi" Why is there no error? This is because both instances are treated as different variables since they have different scopes.
为什么没有错误？ 这是因为两个实例的作用域不同，因此被视为不同的变量。
This fact makes let a better choice than var. When using let, you don't have to bother if you have used a name for a variable before as a variable exists only within its scope.
这个事实使let比var更好的选择。 当使用let ，您不必费心使用变量的名称，因为变量仅存在于其范围内。
Also, since a variable cannot be declared more than once within a scope, then the problem discussed earlier that occurs with var does not happen.
同样，由于在一个范围内不能多次声明一个变量，因此不会发生前面讨论的与var有关的问题。
Just like var, let declarations are hoisted to the top. Unlike var which is initialized as undefined, the let keyword is not initialized. So if you try to use a let variable before declaration, you'll get a Reference Error.
就像var一样， let声明悬挂在顶部。 与var初始化为undefined ， let关键字没有初始化。 因此，如果尝试在声明之前使用let变量，则会得到Reference Error 。
Variables declared with the const maintain constant values. const declarations share some similarities with let declarations.
用const声明的变量保持常量值。 const声明与let声明有一些相似之处。
Like let declarations, const declarations can only be accessed within the block they were declared.
与let声明一样， const声明只能在声明的块内访问。
This means that the value of a variable declared with const remains the same within its scope. It cannot be updated or re-declared. So if we declare a variable with const, we can neither do this:
这意味着用const声明的变量的值在其范围内保持不变。 不能更新或重新声明。 因此，如果我们使用const声明变量，则我们将无法做到这一点：
const greeting = "say Hi"; greeting = "say Hello instead";// error: Assignment to constant variable.
nor this:
也不是这样：
const greeting = "say Hi"; const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared
Every const declaration, therefore, must be initialized at the time of declaration.
因此，每个const声明都必须在声明时进行初始化。
This behavior is somehow different when it comes to objects declared with const. While a const object cannot be updated, the properties of this objects can be updated. Therefore, if we declare a const object as this:
对于用const声明的对象，此行为有所不同。 虽然无法更新const对象，但是可以更新此对象的属性。 因此，如果我们声明一个const对象为：
const greeting = { message: "say Hi", times: 4 } while we cannot do this:
虽然我们不能这样做：
const greeting = { words: "Hello", number: "five" } // error: Assignment to constant variable. we can do this:
我们可以完成这个：
greeting.message = "say Hello instead";
This will update the value of greeting.message without returning errors.
这将更新greeting.message的值，而不会返回错误。
Just like let, const declarations are hoisted to the top but are not initialized.
就像let一样， const声明被提升到顶部，但是没有初始化。
So just in case you missed the differences, here they are:
因此，以防万一您错过了差异，它们是：
var declarations are globally scoped or function scoped while let and const are block scoped.
var声明是全局范围的或函数范围的，而let和const是块范围的。
var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.
var变量可以在其范围内进行更新和重新声明； let变量可以更新但不能重新声明； const变量既不能更新也不能重新声明。
They are all hoisted to the top of their scope. But while var variables are initialized with undefined, let and const variables are not initialized.
它们都被吊在其范围的顶端。 但是，虽然使用undefined初始化var变量，但let和const变量未初始化。
While var and let can be declared without being initialized, const must be initialized during declaration.
尽管可以在不初始化的情况下声明var和let ，但必须在声明期间初始化const 。
Got any question or additions? Please let me know.
有任何疑问或补充吗？ 请告诉我。
Thank you for reading :)
谢谢您的阅读:)
翻译自:
转载地址：http://nxzzd.baihongyu.com/