在 JavaScript 內要宣告一個變數我們可以使用 var、let、const
那他們之間有什麼差異呢? 為什麼我們在實務應用上總是使用 let、const 呢?
作用域 ( Scope )
const、let 是區塊作用域 ( block scope )，var 是函式作用域 ( function scope )
function test() {
{
const x = 10;
}
console.log(x); // Uncaught ReferenceError: x is not defined
{
let y = 20;
}
console.log(y); // Uncaught ReferenceError: y is not defined
{
var z = 30;
}
console.log(z); // 30
}
console.log(z); // Uncaught ReferenceError: z is not defined
提升 ( Hoisting )
是一種將變數、函式宣告提升到作用域頂部的行為。不同的是，如果我們沒有宣告就直接使用該變數，var 會回傳 undefined，let、const 會報錯。
function test() {
console.log(a); // undefined
var a = 10;
}
test();
// 實際上 JS Runtime 會像這樣
// function test() {
// var a;
// console.log(a);
// a = 10;
// }
// test();
function test() {
console.log(a); // Uncaught ReferenceError: Cannot access 'a' before initialization
let a = 10;
}
test();
function test() {
console.log(a); // Uncaught ReferenceError: Cannot access 'a' before initialization
const a = 1;
}
test();
💡 變數從區塊的一開始到他被初始化之前就是 temporal dead zone
var 有什麼問題?
實務上我們都不去使用 var，因為 var 的函式作用域、可重複宣告的特性很容易造成開發上的混亂
function test() {
var name = 'John';
// 200 行複雜程式判斷
if (true) {
var name = 'James'; // 重複宣告不會報錯，會意外覆蓋掉原有變數的值
}
console.log(`I am ${name}`);
}
test(); // I am James
let、const 則不能重複宣告
let name = 'John';
let name = 'James'; // Uncaught SyntaxError: Identifier 'name' has already been declared
何時該使用 const ? 何時該使用 let ?
如果該變數不變則使用 const，會變則使用 let。
💡 變不變指的是記憶體位置的改變。
const b = {};
console.log(b) // {}
b.name = 'John';
console.log(b) // {name: 'John'}
Top comments (0)