iT邦幫忙

2024 iThome 鐵人賽

DAY 9
0
自我挑戰組

JS漫遊記系列 第 9

JS漫遊記-09-變數宣告let、var、const(下)

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20240821/20166952jD3022avxk.jpg

說到這let、var、const就會想到暫時性死區
那這裡要講一下什麼是暫時性死區呢?

暫時性死區(Temporal Dead Zone)
使用 let 或 const 宣告某個變數或常數時,在該變數或常數還沒有被賦予值之前會產生一段它們不能被使用的狀況,這段時間就是所謂的暫時性死區(Temporal Dead Zone)的情況。

那我們今天就來討論一下~三個得比較常見的差異囉~

var

1.作用域:var宣告的變數具有函數作用域(function scope)或全局作用域(global scope),而不是塊級作用域(block scope)。

if (true) {
  var b = 10;//10
}
var c = 30;//30
console.log("Value of b outside if block:", b); // "Value of b outside if block:" 10
console.log("Value of c outside if block:", c); // "Value of c outside if block:" 30

var 聲明的變量 b 在 if 語句內部,但由於 var 的函數作用域,b 在整個函數內都是可見的。

2.提升(Hoisting):var 宣告的變數會被提升到其作用域的頂部。(變數宣告前使用它,但變數的值仍然是 undefined 直到再次宣告)

console.log("Initial value of a:", a); // undefined
var a = 5;
console.log("Initial value of a:", a);//5

原本用var的變數a被提升到函數的頂部,雖然a並沒有宣告,但已會顯示undefined,因為聲明被提升了

3.重複宣告:同個區域內,可以多次宣告同一個變數。


let

1.作用域:let 宣告的變數具有塊級作用域

在 if 塊內部,let a 可見,但在 if 塊外部則不可見,因此會引發 ReferenceError。

function scopeExample() {
  if (true) {
    let a = 10;
    console.log("Value of a inside if block:", a); // 輸出: 10
  }

  console.log("Value of a outside if block:", a); // ReferenceError: a is not defined
}

scopeExample();

2.提升(Hoisting):let 宣告的變數也會被提升,宣告前會進入一個「暫時性死區(Temporal Dead Zone)」,在這個區域內使用變數會導致錯誤。

嘗試在同一塊內部重複聲明變量 x 會引發 SyntaxError。
function duplicateDeclaration() {
  let x = 1;
  let x = 2; // SyntaxError: Identifier 'x' has already been declared
}

duplicateDeclaration();

3.重複宣告:同一作用域內,let 不允許重複宣告同一變數。


const

1.作用域:const宣告的變數具有塊級作用域

2.提升(Hoisting):const 宣告的變數也會被提升到其作用域的頂部, 宣告前變數仍然處於暫時性死區中,使用它會導致錯誤。

function hoistingExample() {
  console.log(a); // ReferenceError: Cannot access 'a' before initialization
  const a = 5;
}

hoistingExample();
//即使 const 變量的聲明會被提升,該變量在初始化之前是不可訪問的,因此會引發 ReferenceError。這不同於 var,var 變量會被提升並初始化為 undefined。

3.重複宣告:const 不允許在同一作用域內重複宣告同一變數。

function duplicateDeclaration() {
  const x = 1;
  const x = 2; //x不能重複宣告
}

duplicateDeclaration();


我是超級新手,若有任何建議或是錯誤的部分,歡迎底下留言唷thanks
我們下篇文章見掰掰~

對自己多用點心,日益努力,而後風生水起。盡情玩耍,盡情學習,盡情熱愛,盡情討厭,在需要的時候釋放善意,在必要的時候展現強硬,把這不得不過完的一生,變成值得慶賀的一生。


上一篇
JS漫遊記-08-變數宣告let、var、const(中)
下一篇
JS漫遊記-10-陳述式與表達式
系列文
JS漫遊記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言