let vs var javascript基础

什么是Var？ (What is Var?)

Let see what MDN says:

让我们看看MDN怎么说：

The var statement declares a function-scoped or globally-scoped variable, optionally initializing it to a value.

该 var 语句声明一个函数作用域或全局作用域变量，可以选择将其初始化为一个值。

范围？ 它是什么？ (Scope? What is it?)

Scope determines the accessibility of variables or other expressions. To know in detail about scope check this link.

范围确定变量或其他表达式的可访问性。 要了解有关范围的详细信息， 请检查此链接 。

Var是全局作用域或函数作用域 (Var is Global-scoped or Function-scoped)

Global-scoped means if a variable is declared outside a function, it is available for all functions and scripts on the web page or, in other words, it is available for the whole window.

全局作用域意味着，如果在函数外部声明了变量，则该变量可用于网页上的所有函数和脚本，或者换句话说，它可用于整个窗口。

Function-scoped means if a variable is declared inside a function then it is available & accessible within the function only.

功能范围意味着，如果在函数内部声明了变量，则该变量仅在函数内部可用和访问。

let see an example:

让我们看一个例子：

var num = 9; // Global scopefunction greeting(){
  var str = 'hey!!'; // Functional Scope
}

As variable num is outside any function, it has global scope. while variable str is inside the function so it has function scope. which means it can not be accessed outside greeting. Try this in your editor .

由于变量num在任何函数之外，因此具有全局作用域。 而变量str在函数内部，因此具有函数作用域。 这意味着无法在问候语之外访问它。 在编辑器中尝试此操作。

var num = 9;function greeting(){
  var str = 'hey!!';
}console.log(str); // ReferenceError: str is not defined

Most of us know this about Var so the question arises that what's the real issue with var?

我们大多数人都对Var有所了解，因此出现的问题是var的真正问题是什么？

Var can be updated and Re-declared. i.e,

Var可以更新和 重新声明 。 即

var num = 9;
num = 15;

This is allowed in javascript and come on we have updated variables like this a lot of times. where’s the issue?

这在javascript中是允许的，而且我们很多时候都在更新变量。 问题在哪里？

var num = 9;
var num = 15;

This is also allowed in the same scope. This is the issue. Now imagine you or someone has already declared num with some value at other parts of the code (but within the same scope), if you redeclare num unknowingly, it will get redefined and unexpected bugs can pop up. let’s see this example

在同一范围内也允许这样做。 这就是问题所在 。 现在，假设您或某人已经在代码的其他部分(但在同一范围内)声明了具有某些值的num，如果您不知不觉地重新声明num，它将被重新定义，并且可能会弹出意外错误。 让我们看看这个例子

var num = 9;
if (true) {
    var num = 15; // num will get redefined to 15
}
console.log(num) // 15

“让”救了我们 (‘LET’ saves us)

But before diving deep into ‘Let’, let see what MDN says:

但是在深入探讨“让”之前，请先看一下MDN所说的内容：

The let statement declares a block-scoped local variable, optionally initializing it to a value.

let语句声明一个块作用域内的局部变量，可以选择将其初始化为一个值。

Let is Block-scoped which means a variable declared with let inside a block is accessible only within that block.

Let是块作用域的 ，这意味着在块内用let声明的变量只能在该块内访问。

I know what you are thinking. what is a block in the first place?

我知道你在想什么 首先是什么街区 ？

Block is a code area bounded by curly braces {}. Anything within {} represents a block. we generally encounter block with some conditionals like if statements or loops but it is allowed to use it standalone too.

块是由花括号{}界定的代码区域。 {}中的任何内容都代表一个块。 我们通常会遇到一些带有条件的块，例如if语句或循环，但也可以单独使用它。

{
  let a = 10;
  let b = 20;
}

This is a completely valid block. In terms of block-scoping of let, check this example

这是一个完全有效的块。 关于let的块作用域，请检查此示例

let a = 10;
if (true) {
    let b = 5;
    console.log(b); // 5
}console.log(a); // 10
console.log(b) // 

but in the case of Var:

但对于Var：

var a = 10;
if (true) {
    var b = 5;
    console.log(b); // 5
}console.log(a); // 10
console.log(b) // 5

As let is block-scoped, variable b is not accessible outside the scope it is declared in. but in the case of Var which is global or function-scoped, b is being accessed within the scoped it is defined in. hence no error.

因为let是块作用域的，所以变量b在声明范围内不可访问。但是对于Var而言，它是全局作用域或函数作用域的，则b在定义范围内被访问。因此没有错误。

可以更新，但不能重新声明 (Let can be updated but can’t be re-declared)

Variables declared with let can be updated within its scope. i.e,

用let声明的变量可以在其范围内更新。 即

let num = 20;
num = 20;

but Re-declaration is not allowed

但不允许重新声明

let num = 10;
let num = 20; // Error: Identifier 'num' has already been declared

As num is declared in the same scope twice, it throws an error (var does not show error in the same case, as discussed above). but note that the same variable can be defined in different scopes without an error which means

由于num在相同的作用域中被两次声明，因此会引发错误(如上所述，var在相同情况下不显示错误)。 但请注意，可以在不同的范围内定义相同的变量而不会出现错误，这意味着

let a = 20;if (true) {
    let a = 30;
    console.log(a) // 30
}console.log(a); // 20

We have covered a lot about Var and Let. but there is one thing left which is

我们已经介绍了很多有关Var和Let的内容。 但是还有一件事是

Var＆Let的吊装 (Hoisting of Var & Let)

Javascript moves variables and functions declarations to the top of their scope before execution. this is called hoisting. Example:

Javascript在执行之前将变量和函数声明移至其作用域的顶部。 这称为吊装 。 例：

console.log(num);
var num = 10;// Before execution. above code will get converted tovar num;
console.log(num); // undefined
num = 10;

Both Var and Let variables are moved to the top but variables with var are initialized with undefined value while the Let variable is not initialized.

双方无功，让变量被移动到顶部，但使用var变量与未定义值初始化而设变量未初始化。

console.log(num); 
let num = 10;// RefrenceError: Cannot access 'num' before initialization

That’s all for Var vs Let. As it is quite clear that Let is the Smart choice nowadays.

这就是Var与Let的全部。 很明显，让“ Let”成为当今的明智之选。

I’ll publish more such blogs. Thanks for reading 😄.

我将发布更多此类博客。 感谢您阅读😄。

翻译自: https://medium.com/swlh/let-vs-var-javascript-basics-c68d5587248e