[JavaScript]變數宣告類型差異-var,let,const

[JavaScript]變數宣告類型筆記-var,let,const

[JavaScript]變數宣告類型筆記- 前言

這篇文章主要記錄一下JS中對於變數宣告類型的差異以及一些細節JavaScript在ES6中引入了”let”,”const”宣告方式,基本上新的較學資料都會提倡使用let,const等宣告方式代替舊的var。在ES6之前,JavaScript中並不存在區塊域(block-scope)的概念,區塊運算符”{放程式碼}”通常只用來作為排版區隔用
造成”var”變數可能導致在運行時發生「區域變數」覆蓋「全域變數」。ES6的推出帶來了區塊域的概念,將變數的作用域限制在區塊內,從而避免上述問題

1. var變數

  1. 作用範圍: var在整個函式(function)或全域範圍都有效,且沒有區塊範圍(block scope)的概念。
  2. 提升(Hoisting): 變數宣告會被提升至函式全域範圍的頂部,但不會賦予初值(白話文:變數宣告會被自動提到瀏覽器的最上方)。
  3. 重新宣告: 允許在相同範圍內重新宣告相同的變數,且不會拋出錯誤(因此容易重複宣告、覆蓋)。
  4. 不受區塊限制: 在區塊中宣告的變數仍然屬於函式或全域範圍(區塊僅供排版使用)
  5. 初始化位置: 變數初始化的位置不影響變數的作用範圍。

從上述的幾點說明,可以發現”var”變數宣告的特性,造就了容易被重複宣告、被覆蓋的問題,同時沒有區塊的概念

2. let變數

  1. 作用範圍: let具有區塊範圍(block scope)僅在宣告的區塊內有效
  2. 提升(Hoisting): 變數宣告會被提升至區塊的頂部,但不會賦予初值。
  3. 重新宣告: 不允許在相同區塊內重新宣告相同的變數,否則會拋出錯誤。
  4. 區塊限制: 在區塊中宣告的變數僅在該區塊內有效,不影響外部範圍。
  5. 初始化位置: 變數初始化的位置會影響變數的作用範圍。

對照let以及var的差異可以發現,let函數藉由引入區塊範圍(block-scope)達到管理變數作用域,同時也改善了var可以重複宣告的問題,以下藉由瀏覽器簡單示範幾個例子

3 var,let變數比較測試

以下採用瀏覽器的Console進行測試

3.1 作用範圍、區塊限制

下方藉由{ }區塊,宣告了let a 以及 var b 兩個變數,後續直接輸入”a”回傳值是”undefined”,因為let宣告的作用域在區塊內,因此區塊外呼叫該變數會回傳undecfined,var “b”則是正常回傳”1″,可見var的作用域不受區塊範圍限制

let,var作用範圍差異

3.2 重新宣告

從下方的範例可以發現,var宣告是沒有區塊限制的而且可以重複宣告(覆蓋),let宣告在區塊範圍內重複宣告時會出現錯誤警告,說明該變數已經宣告過了

let,var 重新宣告差異

4. Const變數

  1. 作用範圍: const同樣具有區塊範圍(block scope),僅在宣告的區塊內有效。
  2. 提升(Hoisting):let相似,變數宣告會被提升至區塊的頂部
  3. 重新宣告: 不允許在相同區塊內重新宣告相同的變數,否則會拋出錯誤。
  4. 區塊限制: 在區塊中宣告的變數僅在該區塊內有效,不影響外部範圍。
  5. 必須初始化: const宣告的變數必須在宣告時賦予初值,之後不可再修改。
  6. 物件和陣列: 對於物件或陣列的const,表示無法重新指定新的物件或陣列給該變數,但物件或陣列本身的屬性或元素可以修改。

Const跟let大部分的功能是類似的,但Const顧名思義就是宣告一個”常數”,因此必須在宣告時就賦值,同時宣告後不允許進行更動(例外是第6點)

下圖我們對於var,let宣告都可以不賦值,但若const不賦值則會跳出錯誤警告

下圖我們對於var,let宣告都可以不賦值,但若const不賦值則會跳出錯誤警告

下圖展示了const宣告後,其值並不能進行更改但若宣告的值是物件或是陣列則其中元素可以更改

下圖展示了const宣告後,其值並不能進行更改,但若宣告的值是物件或是陣列則其中元素可以更改
下圖展示了const宣告後,其值並不能進行更改,但若宣告的值是物件或是陣列則其中元素可以更改

5 更多教學

分享

發表迴響