Var、let和const的差別

Mon, Jul 13, 2020 1-minute read

var 、 let 和 const 的由來

以前 JavaScript 沒有所謂的 let 和 const ，都是用 var 來宣告變數，直到 ES6 的出現 let 來取代 var ，為什麼 let 出來就是來取代 var 呢?

就好好來探討 ES6 做了什麼事情，並了解 var 、 let 、 const 這三者差別。

var 從以前通病就是這個變數會到處亂跑，導致看 code 的效率變差，直到了 let 的出現。

var 和 let 的差別最簡單說法就是作用域，但是 ES6 以前沒有所謂的作用域的觀念，直到 ES6 才有。

var 的作用域範圍就是在 function 內， let 則是在 block ，就是 {…} 裡，它除了 function 的 {…} ， if 、 for 的 {…} 都屬於 let 的作用域

這樣看下來是不是很難想像他們作用域的差別是什麼，我們就舉個例子

function hello(){
  var man = '爸爸'

  if(true){
    var man = '老王'
    // 這裡的 man 依然是外層的爸爸，所以爸爸會被老王取代
  }
  console.log(man)
  // 老王
}
hello();

但是我們換成用 let 宣告的方式

function hello(){
  let man = '爸爸';

  if(ture){
    let man = '老王';
    //此處的老王只有在這個 block 範圍內有效
  }
  console.log(man);
  // 爸爸
}
hello();

這樣看下來是不是覺得 var 和 let 的差別有點感覺

let 的出現也可以更清楚知道每個變數都在作用域，也不會到處感染變數名稱，真的是好處多多阿!

const 的作用域也是在 block ，但它是屬於不可變的變數，簡單來說就是常數，對於閱讀程式碼的人來說很好判斷這變數是不能被改變的。

在這邊可以更了解 var 和 let 這兩者的差別，也知道往後開發專案宣告變數都是以 const 和 let 來宣告變數，並非是 var ，除了讓開發的專案更加穩定外，也可以增加程式碼的可讀性。