javascript 的變數與常數,var 與 let 的差別

標籤: javascript var let

在 ES6 之前,javascript 是沒有常數的,當時變數都是用 var 來宣告,宣告的原則有以下幾點:

  • 開頭字元需要是ASCII字元(英文大小寫字元),或是下底線(_)、錢號($),這邊要注意數字不可用於開頭字元。
  • 接下來的字元可以使用英文字元、數字或下底線(_)。
  • 大小寫有差異。
  • 名稱不可使用 javascript 語言保留字詞。
  • 名稱被稱為 identifier,它在程式碼上下文中具有唯一性。

以下這些為 js 的保留字:

break case catch const continue debugger default delete do else finally for function if in instanceof new return switch this throw try typeof var void while with

null true false

class enum export extends import super

implements interface let package private protected public static yield

 

在 ES6 之後多了 const 與 let,先來提 const,const 稱為常數,相對於變數就是無法再之後賦予它新的值。

而 let 跟 var 用起來很像,但有一些不同的地方,主要為:

  • let 與 const 是區塊作用域(block scope)
  • var 是函式作用域(function scope)

 

來看一下範例程式碼介紹區塊作用域與函式作用域的差別:

用 var 宣告的話:

// 宣告變數 a
var a = 10;
if(true){
  var b = 20;
}

// 輸出: a = 10
console.log(a)
// 輸出: b = 20
console.log(b)

 

接下來用 let 宣告:

// 宣告變數 a
var a = 10;

if(true){
  let b = 20;
}

// 輸出: a = 10
console.log(a)
// 因為變數 b使用let宣告,離開if區域便無法被存取
console.log(b) //會顯示沒有定義

 

而 var 跟 let 主要的差別有以下三點:

  1. 塊級區域
  2. 變數提升
  3. 不允許重複宣告

第一點是前面提到的,第三點不能重複宣告應該也容易理解,簡單的說就是不能用 let 在同一區塊內定義一樣的變數。

第二點用以下的範例來說明:

console.log(a); // undefined
var a = 5 ;

console.log(b);
//Uncaught ReferenceError: b is not defined
let b = 5 ;

如果我們先使用變數在定義在,顯示的錯誤會不一樣,這就是兩者的幾個差別。