JavaScript 程式札記 : 宣告變數 let、const 與 var 的區別

什麼是 let 與 const ?

let 和 const 是 JavaScript 在 ES6 版本中新的變數宣告方式。使用 let 宣告的變數可以重新賦值，而使用 const 宣告的變數賦值後則不能改變。這兩種新的宣告方式提供了比 var 更嚴格和清晰的變數作用域管理。

let name = 'Jack'; // 可以重新賦值
name = 'May';

const age = '20'; // 不可以重新賦值
// age = '30'; // 會拋出錯誤

let、const 解決 var 的哪些問題？

1. 變數提升（Hoisting）

使用 var 會發生變數提升，即它們在代碼執行前就被初始化為 undefined。

console.log(name); // undefined
var name = 'Michael';

與 var 不同， let 和 const 不會發生變數提升，所以在宣告之前訪問它們會導致 ReferenceError。

console.log(age); 
// Uncaught ReferenceError: Cannot access 'age' before initialization
let age = 30;

2. 區塊作用域

var 沒有區塊作用域，它們所在的作用域是函數作用域或全域作用域。這可能導致變數意外覆蓋了外部同名的變數。

// 全域變數
var globalVar = 'I am global';

function exampleFunc() {
  // 函數作用域
  var funcVar = 'I am in function';

  // 在函數作用域內覆蓋全域變數
  var globalVar = 'I am overridden in function';

  console.log('Inside function:');
  console.log(globalVar); // 'I am overridden in function'
  console.log(funcVar);   // 'I am in function'
}

console.log('Outside function:');
console.log(globalVar); // 'I am global'

exampleFunc();

// 在函數的外部，變數 funcVar 是不可訪問的
console.log(funcVar); // Uncaught ReferenceError: funcVar is not defined

let 和 const 具有區塊作用域，使它們只在包含它們的{}內有效。

function test(){
  let name = 'John';
  const age = 30;
  console.log(name, age);
}

test(); // "John" 30
console.log(name, age); // Uncaught ReferenceError: age is not defined

3. 重複宣告

var 允許在同一作用域內重複宣告同名變數，但這可能導致不小心覆蓋到之前的變數。

var city = 'Taipei';
var city = 'Kaohsiung'; // 沒有問題，但可能引起混淆
console.log(city); // "Kaohsiung"

let 和 const 不允許在同一作用域內重複宣告同名變數。

let city = 'Taipei';
// let city = 'Kaohsiung'; 
// Uncaught SyntaxError: Identifier 'city' has already been declared  

何時使用 let，何時使用 const？

在需要重新賦值的狀況下，要選擇使用 let宣告變數，而當你確定變數的值不需要重新賦值時，就可以改用 const 宣告變數。

let user = 'Alice';
user = 'Bob';
console.log(user); // "Bob"

const obj = { name: 'Mary', age: 30 };
obj.name = 'Peter';
console.log(obj.name); // "Peter"

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡