var、let、const 搞得我好亂呀

Heko
小彥彥的前端五四三
4 min readDec 17, 2018

JavaScript在ES6中加入了非常多的新特性,其中ES6新增了 “let”宣告方式來取代”var”。在ES6之前,並沒有”常數”這個東西,只有”變數”而已,也就是用var所宣告的識別名稱。

在ES6之前,JavaScript的世界中並沒有區塊域(block)的概念,因此經常使用”var”宣告所有的變數,然而這樣的宣告方式程式碼在運行時可能會出有區域變數覆蓋全域變數或者for loop中循環變數洩漏為全域變數的副作用發生。而在ES6發布之後,有了區塊域(block)的概念以及“let”的推出,上述的副作用就可以完全地避免。

const

一般使用在常數(不會被重新指定值)。例如:宣告恆定不做改變的變數 const PI = 3.14159。這也意味著,const在宣告變數時就會進行初始化,無法等到之後再賦予值,因此必定要在一開始就給予值作宣告,否則將會報錯。

const PI = 3.14159;
PI = 20; // TypeError: Assignment to constant variable. 錯誤

let

一般使用在變數(可能會被重新指定值)。例如:在迴圈(for loop)中,一開始的變數宣告使用。也可以說較常使用在函式(function)自行定義的區塊(block)中,例如:迴圈(for loop)或者邏輯、數學等演算法括弧({} or ())中作宣告使用,而不會存在並使用於整個函式(function)中。

for (let i = 0; i < 10; i++) {
console.log('in for statement: i', i)
}
console.log(i); // ReferenceError: i is not defined(…) 存取不到

var

在ES6推出“let”宣告方法後,JavaScript最弱的變數宣告,使用在變數可能或不會被重新賦予值,或者宣告範圍在整個函式(function)或者區塊(block)中。

var是函式作用域的設計,也就是說它只能以函式為變數作用域的分界,在一些使用了區塊語句(用花括號的語句)的像if, else, for, while等等區塊語句中,在這裡面用 var宣告的變數仍然是會曝露到全域之中可被存取。

function test(){
var a = 10
}
if(true){
var b = 20
}
console.log(a) // a is not defined 存取不到
console.log(b) // 存取得到

如果使用了letconst來宣告,就是以區塊語句為分界的作用域,它會比較明確而且不易發生錯誤。一些之前對於var語句的麻煩撰寫風格,就可以不需要了。

function test() {
let a = 10
}
if (true) {
const b = 20
}
console.log(a) // a is not defined 存取不到
console.log(b) // b is not defined 存取不到

--

--