[JS] var, let, const 差異比較

前言

這篇會來整理宣告變數傳統的var和ES6新語法let, const的差異比較。

var

傳統變數宣告，作用域(scope)為function，在function內宣告只有在function才有作用。如果在function外則為全域(global)。

function fn(){
  var a = 'ABC';
};
console.log(a); //  a is not defined

在一些區塊(block)，像是if..else、for、while的{大括號}使用var則容易會污染全域變數。

function fn() {
  var a = 'AAA';
  if (true) {
    var a = 'BBB'; 
  }
  console.log(a);  // 'BBB'
}

let

let的作用域(scope)為區塊(block)，區塊是指在{大括號}裡面，像是if..else、for、while的{}。另一個特性是禁止在同一層重複宣告(var 可以)，算是跟var類似但較嚴謹的用法。

下面這個例子，若使用var來宣告i，setTimeout 最後結果只會印出 ‘這執行第10次’。是因為用var將i宣告成全域變數，i透過回圈累加，當setTimeout執行時只會拿到最終i=10這個值，解決辦法則是用let宣告。

for (var i = 0; i < 10; i++) {
  console.log(i);
  setTimeout(function () {
    console.log('這執行第' + i + '次');
  }, 10);
} 


for (let i = 0; i < 10; i++) {
  console.log(i);
  setTimeout(function () {
    console.log('這執行第' + i + '次');
  }, 10);
} //用let宣告i 則會只作用於{}內 並可列印出所有ｉ

//若不用let 可用立即函式帶入i這個值到j變數上
for (var i = 0; i < 10; i++) {
  (function (j) {
    setTimeout(function () {
      console.log('這執行第' + j + '次');
    }, 10);
  })(i);
}

var 在全域下的變數會在 window 上，可以在這裡使用 console.log() 看看兩者之間的差異：

// 這段宣告擇一執行
var mom = "老媽";
let mom = "老媽";
console.log(window.mom);
// var 會出現 "老媽"
// let 會出現 undefined

const

與 let ㄧ樣，作用域(scope)為區塊(block)，區塊是指在{大括號}裡面，像是if..else、for、while的{}。不同的地方是const在宣告時必須賦予一個值，並且之後不能再更改。也無法再用 let或 var 重新宣告變數。

const a ='AAA';
const a ='BBB';
//  會跳錯 Identifier 'a' has already been declared

參考資料

• ES6 開始的新生活 let, const
• ECMAScript6 入門：var、let、const 差異
• JavaScript: var, let, const 差異
• JavaScript ES6 Block Scope - let, const
• Day26 var 與 ES6 let const 差異