在 coding 的這條路上，一定都會想要不斷提升自己的技術，除了不斷的培養並加強自己 coding 的能力以外，盡量降低程式的相依性，以減輕維護上的困難也是我到目前為止仍在努力學習的目標之一。
而宣告變數的使用方式、型態更是基本中的基本。今天就要來分享一下傳統變數宣告 var 與 JavaScript ES6 新的變數宣告方式 let 與 const 有什麼不同之處。
傳統變數宣告 var
以 var 宣告的變數，其作用域是「函式作用域(function scope)」，也就是在function 內宣告的 var，要在該 function 才有作用 ，但是如果在函式外宣告的話，其作用範圍則為 全域性(global)。
function count () {
var num = 400;
console.log(num);
// 執行count()以後會出現400
};console.log(num);
// 會出現 num is not defined，因為 在function內宣告的var，要在該function 才有作用
var 的缺點
不過在一些區塊語句（if、else、 for、 while等) 使用 var 宣告的變數，可能會污染 全域變數 ，也可能導致程式碼維護難度增加，來看看範例吧！
for(var i=0; i<3; i++){
console.log(i,"Hi");
// 依次出現 0 "Hi"、1 "Hi"、2 "Hi"
}console.log(i);
// 出現3
使用「開發人員工具」輸入 window 去搜尋，會發現最上方出現 i 這個全域變數。
在 ES6 的版本中，推出了新的變數宣告關鍵字 let 與const，不會有 var的副作用，讓我們繼續看下去吧~
let
以 let 宣告的變數，其作用域是「區塊作用域(block scope)」，也就是 { } 包住的區域，一但離開 { }範圍，這個變數就不會被存取到。
直接來看範例：
for(let i = 0; i<3; i++) {
console.log(i)
// 出現0、1、2
}console.log(i)
// 出現 i is not defined
let的特性
使用 let 宣告變數時，除了不會產生全域變數以外，另外還有一個需要注意的特性：禁止同一層 Block 重複宣告變數。
直接來看範例：
let a = 6;
let a = 20;
console.log(a);//出現錯誤：Identifier 'a' has already been declared
即使另一個是用 var 宣告的變數也不行：
var a = 6;
let a = 20;
console.log(a);//出現錯誤：Identifier 'a' has already been declared
但是如果 let 宣告的變數在 不同層的Block ，就不會報錯：
var a = 6;if (true) {
let a = 20;
console.log(a); //出現20
}console.log(a); //出現6
簡單來說 var 與 let 兩者其實非常類似，但使用 let 因為不會汙染全域變數，相較於 var來說會更加提升程式的嚴謹性和安全性。
const
const 可以視為 let 的常數加強版，let 有的特性 const 都有，但 const 額外多了常數保護的特性。
在宣告 const 時就必定要指定給值，不然會產生錯誤。而且指定後不能更改賦值。
讓我們直接用範例來看看 const 的特性：
const apiURL = "https://medium.com/coding-girl-life";
const apiURL = "https://www.youtube.com/";// 出現錯誤，Identifier 'apiURL' has already been declared
// 'apiURL' 無法重新宣告
同樣的，也無法再度使用 let或 var 重新宣告變數：
const apiURL = "https://medium.com/coding-girl-life";
let apiURL = "https://www.youtube.com/";// 出現錯誤，Identifier 'apiURL' has already been declared
// 'apiURL' 無法重新宣告----//-----//-----//----const apiURL = "https://medium.com/coding-girl-life";
var apiURL = "https://www.youtube.com/";// 出現錯誤，Identifier 'apiURL' has already been declared
// 'apiURL' 無法重新宣告
一旦給值後，就無法重新賦值：
const money = 600;
money = 1500;console.log(money);
// 出現錯誤，Assignment to constant variable
最後小小總結一下3種宣告變數方式的差異：
var：不會受限在代碼塊區域（block scope）內，可能會汙染全域變數。不管哪個作用域(Scope)都可以存取，可以重複宣告。
let：所宣告的變項只有在代碼塊區域（block scope）內有效，不會產生全域變數，無法在同一層 Block 重複宣告變數
const：具備 let 所有的特性。在一宣告時就必定要指定給值，不然會產生錯誤，宣告後不能更改值
你有更多的問題嗎？你有什麼建議呢？
歡迎在下方留言，或加入我的臉書粉絲頁一起討論！
【免費支持】如果你幫我拍手5下，我有機會得到內容創作的酬勞🙂
