[JavaScript 筆記] const / let / var 差異

Being Wu
4 min readNov 24, 2020

--

以下用4點分析 const / let / var 之差異,分別為:作用域、出現時間、是否提升、是否能夠重複宣告。

  1. 作用域 (scope)的差異:

作用域不一樣,var 是 function scoped,而 letconst 是 block scoped (block 意指 {} 這個符號)。

作用域:Global →Function → Block

「使用var宣告變數,可用範圍以function為界,function外讀不到值」,但如果使用if, else, for, while等等時,宣告的區域變數仍然可在整段程式碼做存取,這並不是我們希望的結果。這時候我們就會用到let。

2. 出現時間

let / const 為 ES6出現

3. 提升

var 能夠被提升,只是尚未被負值。

console.log(v4); // undefined var v4 = 5 ;

let / const 在宣告前不能使用,會報錯。

console.log(v4); 
//Uncaught ReferenceError: v4 is not defined at ES6.js:19
let v4 = 5 ;

4. 不允許重複宣告

使用 var 即使重複宣告也不會報錯,只會被後面宣告者覆蓋。

var v6 = 5; 
var v6 = 7;
console.log(v6); //7let v7 = 5;
let v7 = 7;
console.log(v7);
//Uncaught SyntaxError: Identifier ‘v7’ has already been declared
const v8 = 5;
const v8 = 7;
console.log(v8);
//Uncaught SyntaxError: Identifier ‘v8’ has already been declared

var:只能用來宣告變數,使用“函式範圍(function scope)”,函數的宣告都會被定為全域變數。

for (var i = 0; i < 10; i++) {
console.log(i);
setTimeout(function () {
console.log('這執行第' + i + '次');
}, 10);
}
實際執行時會發現答案其實會是 這執行第 10 次... (延續 10 次),因為 var 會直接將 i 宣告成全域變數,不斷透過 for 迴圈累加,在 setTimeout 實際執行時只會拿到 10 這個數字。

let:宣告變數,使用“區塊範圍(block scope)”,let 會把宣告的變數直接附著在他所在的區塊中,常見的是一對{}。

for (let i = 0; i < 10; i++) {
console.log(i);
setTimeout(function () {
console.log('這執行第' + i + '次');
}, 10);
}
所以此段要正確地執行,可以使用 let 宣告 i 這個變數,i會被緊緊的鎖在 for… 後方的 {} 內。

const:宣告常數,使用“區塊範圍(block scope)”,const宣告的值固定不變,之後任何想改變其值會造成錯誤。在宣告時,就要給它值,否則會報錯。一般使用在識別值(identifier)不會被重新指定值。

識別符號(Identifier)就是一個名字,用來對變數、函式、屬性、引數進行命名,或者用做某些迴圈語句中的跳轉位置的標記

const v10; 
//Uncaught SyntaxError: Missing initializer in const declaration
const v11 = 4;
v11 = 5;
//Uncaught TypeError: Assignment to constant variable.

感謝參考文章:

--

--

Being Wu

Passion for Coding, Reading, Experience Life 💛 Collects Small Things I Learned Day to Day.