JavaScript: var、( let , const ) 差異
前言
在ES6之前,JavaScript要宣告變數的時候,會使用到 var 宣告變數,
但是到了ES6之後,建議盡量都用 ( let , const ) 來做宣告,不要再用 var 了。
因為 var 有一個缺點,那就是它很容易汙染到全域變數。 如下
1 | var a = 15; |
var、( let , const ) 差異在哪?
我們開發時應該盡量避免汙染到全域變數,所以ES6因為這個原因發明了 「let」、「const」,來改善這個問題,那它們之間的差異在哪裡呢? 讓我們繼續看下去。
let / const 是以 {}
來做區隔的,而 var 是以 function 來做區隔。
1 | for (var i = 0; i < 3; i++) { |
發現問題點了嗎? 在for迴圈裏面用 var 宣告的 i (變數) 已經污染到全域變數了!
遇到這樣的問題的話,let 其實就很好解決了,因為 let 是用 {}
來做區隔的,所以它並不會汙染到全域變數。 如下
1 | for (let i = 0; i < 3; i++) { |
如果用 let 宣告的話會出現 i is not defined 這樣的結果。
let / const 沒有變數提升的這個特性,var 有變數提升的特性。
1 | console.log(a); // Cannot access 'c' before initialization |
使用 let 宣告的話並不會有變數提升的特性,所以在宣告之前它並不能讀取出來。
相反的是 var 可以,因為 var 有變數提升的特性所以它其實是變成這樣。 如下
1 | var b; |
變數提升的特性會讓 b 宣告出現在最上方,但是它的「值」會在原地立正站好,並沒有那麼的聽話呀!!
let / const 不能再同一個區塊重複命名!!!
var 在同一個區塊上重複宣告也沒有關係,但是 let / const 是沒有辦法的。 如下
1 | var a = 5; |
在用 let 再一次宣告的時候,會先跳出 ‘c’ has already been declared 這樣的錯誤,理所當然就沒辦法 console 了。
最後要建議所有人:不管是 var 或者 let / const,在使用變數前都要先宣告,養成良好的 coding 習慣才是第一關鍵!