Let try to understand different types of variable available in JavaScript. We will start from the old school variable declaration to the latest ES6 (ES 2015) variable which is new and has more flexibility over `var`.
讓我們嘗試了解JavaScript中可用的不同類型的變量。 我們将從舊式變量聲明開始，到最新的ES6(ES 2015)變量，它是新變量，并且比`var`具有更大的靈活性。
So this is all level but I will try from a basic so if any new to the world of programming or JavaScript can take lots from here.
是以這是所有級别的内容，但是我将從一個基本的角度嘗試，以便使程式設計或JavaScript領域的任何新手都可以從這裡受益。
那麼什麼是變量？ (So what is variable?)
So if you google it what is variable you will find a lot of definition on the variable.
是以，如果您用谷歌搜尋什麼是變量，您會在變量上找到很多定義。
Let try to understand in layman language. In the field of programming, Variables are the names you give to computer memory locations which are used to store values in a computer program. It is similar to our University library where the books are store in different sections based on their categories. In Programming, we used to store data in computer memory and these memories are also categories with different uses. So some memory is available for storing & running program. we will not go it deep just stick on basic definitions.
讓我們嘗試用外行語言了解。 在程式設計領域，變量是您賦予計算機記憶體位置的名稱，用于在計算機程式中存儲值。 它類似于我們的大學圖書館，在該圖書館中，根據類别将書籍存儲在不同的部分。 在程式設計中，我們曾經将資料存儲在計算機記憶體中，這些記憶體也是具有不同用途的類别。 是以，有些記憶體可用于存儲和運作程式。 我們不會深入探讨，隻是堅持基本定義。
So different programming language has a different way of defining variable & work upon them. In JavaScript, we have 3 types of variables used to store the expression & use them.
是以，不同的程式設計語言具有不同的定義變量和對其進行處理的方式。 在JavaScript中，我們有3種類型的變量用于存儲表達式并使用它們。
JS in Dynamically Typed Programming Language (A Variable Doesn’t Enforce the type). The variable in JS does not have any attached.
動态類型程式設計語言中的JS(變量不會強制類型)。 JS中的變量沒有任何附加。
In C language if we have to define variable we have stated their type.
在C語言中，如果必須定義變量，則說明了它們的類型。
int a, b; // Here int used to state a variable is of type interger.
float f; // Here float used to state a variable if of type float or decimal
JS is both dynamically typed and weakly typed.
JS既是動态類型的，也是弱類型的。
在JavaScript中定義變量 (Defining a Variable in JavaScript)
As above I said we don’t have to state type in JS. So we can define a variable using any of the following keywords
const
,
let
, &
var.
如上所述，我們不必在JS中聲明類型。 是以，我們可以使用以下任意關鍵字
const
，
let
和
var.
定義變量
var.
const PI = 3.14;
let user = "itz me"
var isActive = true;
In the above, we declared a variable using all available options and I don’t have to say what type of data is that. So we can declare a variable using any of these but there is a difference in them and you will find what to use and when to use after this.
在上面，我們使用所有可用選項聲明了一個變量，而我不必說那是什麼類型的資料。 是以，我們可以使用這些變量中的任何一個來聲明變量，但是它們之間存在差異，之後您将發現使用什麼以及何時使用。
var- (var -)
Before the release of ES6 specification, we had only one way to initialize a variable in JavaScript using a
var
keyword. To define a variable using var we had to use keyword
var
and after that variable name.
在ES6規範釋出之前，我們隻有一種方法可以使用
var
關鍵字在JavaScript中初始化變量。 要使用var定義變量，我們必須在該變量名之後使用關鍵字
var
。
var user; // Initialize a variable using var and name it user
Here we initialize and variable and didn’t give any value by default all variable without value has a default value of undefined.
在這裡，我們初始化和變量，并且預設情況下不提供任何值。 所有沒有值的變量的預設值均為undefined。
value of var by default var的預設值
variable defined using
var
is functional scope means that if we defined a variable inside a function it will available to that function.
使用
var
定義的變量是函數作用域，這意味着如果我們在函數内部定義了變量，則該變量對該函數可用。
Variable created using
var
outside a function are global scoped (A scope in any programming is a region of the program where a defined variable can have its existence and beyond that variable, it cannot be accessed). Mean that globally created variable using can be used and update anywhere in the program.
使用
var
在函數外部建立的變量是全局範圍的(任何程式設計中的範圍是程式的一個區域，在該區域中，已定義的變量可以存在并且超出該變量，則無法通路該變量)。 意味着可以使用全局建立的變量using并在程式中的任何位置更新。
var
in function
var
函數
var user = "global";
function scope() {
var user = "function scope"
console.log(user); // "function scope"
}
scope();
console.log(user); // "global"
Here we defined a variable named
user
in the global scope with the value of global and another variable with the same name in the function scope if we see console message when we call
scope()
function in there a new scope created which is also known as the functional scope and there we assign a value “function scope” in when it reaches to line 5 it prints
function scope
on a REPL or console and get out of functional context and run then line 9 here we can see that the value of a user is still
global
in the global context. So variable created using
var
is functional scope.
在這裡，我們在全局作用域中定義了一個名為
user
的變量，其值為global，在函數作用域中定義了另一個具有相同名稱的變量，如果我們在建立新作用域的範圍内調用
scope()
函數時看到控制台消息， 功能範圍，然後我們在第5行配置設定一個值“功能範圍”，在REPL或控制台上列印
function scope
，退出功能上下文并運作第9行，在這裡我們可以看到使用者的值在全球範圍内仍然是
global
性的。 是以，使用
var
建立的變量是功能範圍。
Another difference is that using
var
if you created a variable with the same name in the global or function context it will get overwritten by the last value of that variable
另一個差別是，如果使用
var
如果您在全局或函數上下文中建立了一個具有相同名稱的變量，它将被該變量的最後一個值覆寫
created variable using the same name 使用相同的名稱建立變量
we can see it get updated with the new value. Nowadays people try to avoid using var and use ES6 latest way for defining a variable with more flexibility and other features.
我們可以看到它已使用新值更新。 如今，人們嘗試避免使用var并使用ES6最新方法來定義具有更多靈活性和其他功能的變量。
As above we see a kind of disadvantage of using
var
suppose you are collaborating with other developers and both of you defined using same name then it will break your program. So avoid using
var.
如上，我們看到了使用
var
的一種缺點，假設您正在與其他開發人員合作，并且你們兩個都使用相同的名稱進行定義，那麼它将破壞您的程式。 是以，請避免使用
var.
讓- (let -)
let
&
const
is a new addition on ES6 to defining variable which has a more secure way of defining a variable.
let
＆
const
是ES6上對變量的新添加，它具有更安全的變量定義方式。
To define a variable using
let
we use
let
keyword
使用
let
定義變量，我們使用
let
關鍵字
let user = "itz me";
let
and
const
both are block-scoped. we saw
var
is functional scoped and variable defined using
var
inside a function is in function context but
let
&
const
are block-scoped (a block in JavaScript is anything in between { }).
let
和
const
都是塊作用域的 。 我們看到
var
在函數範圍内，并且在函數内部使用
var
定義的變量在函數上下文中，但
let
＆
const
被塊作用域化(JavaScript中的塊位于{}之間) 。
Let see with Example
讓我們看一下例子
let user = "global";
if (true) {
let user = "inside if";
console.log(user); // "inside it"
}
function letScope() {
let user = "inside function";
console.log(user) // "inside function"
}
letScope()
console.log(user) // "global"
Above we created a variable using
let
in a global context if block and function block. As this program run it comes to first to if block and run it and here we defined a user using let with a value
inside if
that gets printed on console then it reached to line 8 and here function gets called and moved to lined 8 here we redefined a variable using let with a value
inside function
that gets printed on the console you can see as the function is also block-scope because the block is anything is inside curly braces
{}
. In last our JS run line 15 and print
global
to console. As see our globally defined variable using
let
not get updated by if block and function block.
上面我們在if塊和function塊的全局上下文中使用
let
建立了一個變量。 在運作該程式時，首先要進行if阻止并運作它，在這裡我們使用一個let定義了一個使用者，
inside if
該值在控制台上列印出來，則該值
inside if
第8行，在這裡函數被調用并移至第8行，使用let使用
inside function
值重新定義了一個變量，該變量被列印在控制台上，您可以看到，因為該函數也是塊作用域，因為該塊是在花括号
{}
。 最後，我們的JS運作第15行，并
global
列印到控制台。 如所見，我們的全局定義變量使用
let
不能被if塊和功能塊更新。
Similarly
const
is also
block-scoped
.
同樣，
const
也是
block-scoped
。
Let see what happens if we redefined a variable in a global context or block context.
讓我們看看如果在全局上下文或塊上下文中重新定義變量會發生什麼。
redeclaring same variable using let 使用let重新聲明相同的變量
If we try to run this we can see it will throw an error ( if you try to copy and pasting on the browser that may not throw and error try creating a js file)
如果我們嘗試運作此腳本，我們可以看到它将引發錯誤(如果您嘗試在浏覽器中複制并粘貼可能不會引發錯誤的消息，請嘗試建立js檔案)
Uncaught SyntaxError: Identifier 'userName' has already been declared
Error in Chrome console Chrome控制台錯誤
You had seen power of
let
& will not create an issue in collaborating. if we had issue of redefining with the same name we will get an error and also save debugging time.
您已經看到
let
＆的強大功能不會在協作中産生問題。 如果我們遇到了使用相同名稱進行重新定義的問題，則會收到錯誤消息并節省調試時間。
const- (const -)
The only difference in
let
and
const
is that variable created using
const
can’t be reassigned with the new value. Here
const
means constant.
let
和
const
的唯一差別是使用
const
建立的變量無法用新值重新配置設定。
const
是常量。
trying reassigning const variable 嘗試重新配置設定const變量
Everything is similarly to
let
.
一切都與
let
類似。
There is more with variable and JavaScript Hoisting I will cover it next blog.
還有更多關于變量和JavaScript提升的内容，我将在下一個部落格中介紹。
Follow Me Medium — Kushal
跟我來— Kushal
Follow Me on Twitter — ikushaldave
在Twitter上關注我— ikushaldave
翻譯自: https://medium.com/@ikushaldave/const-vs-let-vs-var-in-javascript-4abf0277ff07