在 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下,我有機會得到內容創作的酬勞🙂