July 1, 2023

Viiisit [JavaScript] - const, let, var!

#javascript

在 JavaScript 裡,最常見的 const, let, var,這三者到底有什麼不同?

Basics

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 1. constant declaration
const a = 2;
console.log(a); // 2

// 2. const cannot be re-assigned!
//example 1
const b = 2;
b = 3; // Uncaught TypeError: Assignment to constant variable.
console.log(b);

//example 2
const c = ["a", "b", "c"];
c = ["a", "b", "c"]; // Uncaught TypeError: Assignment to constant variable.
console.log(c);

// 3. const can changed by index
const d = ["a", "b", "c"];
d[0] = 333;
console.log(d); // [333, 'b', 'c']

變數應當宣告後再使用,避免使用無宣告變數

有宣告與沒宣告變數差別在是否可以 delete (一個刪除物件的運算)
delete operator: removes a property from an object.

下方例子說明,無宣告的變數會被當作物件屬性新增,容易在 coding 上誤刪造成 bug,因此回歸到標題所述,
變數應當宣告後再使用,避免使用無宣告變數

1
2
3
4
5
var user = "小明";
delete user; // false

user = "小明";
delete user; // true

應當常使用 const, let 而非 var

const 的規則相較 let, var 嚴謹許多,因此在宣告上比較不會有重複的狀況。
透過上面的說明,可以知道 let 與 var 很相似,但是!
var 沒做好管理,容易發生變數相互覆蓋,最嚴重的情形便是全域汙染,因此在使用上要小心。

使用上的方法,可以參考 Google 的說明:Google JavaScript Style Guide

Brief Summary

- var let / const
Variable Hoisting yes yes TDZ
Scope function scope block scope
Repeated declaration yes no
Influence to Global attributes yes no

參考資料:
MDN
ㄚ建的技能樹
ExplainThis