［week 1］var、let、const 的差異
===

在ES6之前，工程師們皆用var宣告變數，但在ES6之後，一切都不一樣了。
原本var一家獨霸的情況，面臨被新來的let與const取代的命運。

原因是什麼?

就是因為let、const比var好用太多了！

以下我們將會談談三者之間的差異

## var

首先，var的第一個特色便是「可重複宣告相同變數」

var pikachu = "皮卡丘"
console.log(pikachu);  //print 皮卡丘
var pikachu = "超級皮卡丘"
console.log(pikachu); //print 超級皮卡丘

那麼這有什麼特別的呢?
請看以下例子

var i = 100;
for(var i = 0; i<5; i++) {
  console.log(i)  //0 1 2 3 4
}
console.log(i) // i為5

什麼！？
原本值為100的 i，怎麼會變成5了？
原因便在於全域變數var i值被for迴圈宣告的var「汙染」
更準確地來說，var被「重複宣告及賦值」，使得最一開始宣告的i被取代

這便引出var的另一個特色「函式作用域（function scope）」

function pokemon() {
  var a = "喵喵";
  console.log(a); // print "喵喵"
}
pokemon(); // 呼叫函式
console.log(a); // 報錯：Uncaught ReferenceError: a is not defined at <anonymous>

在函式（function）宣告的var變數，唯有在函式內才使用，作用範圍為區域性（local）；若在函式外宣告，其作用範圍就變成了全域性（global）。

var這兩個特性使得早期的工程師們十分頭痛
當程式碼會越來越多時，工程師常常忘記哪個地方曾經宣告過同名稱的變數
一不小心前面的函式就被新值覆蓋，導致程式出現bug
於是在ES6時，let和const出現了

## let

let的宣告方式和var十分類似
兩者最大的不同便在於let解決var上述的問題

1. let無法重複宣告

let a = "皮卡丘";
console.log(a);  //皮卡丘
let a = "小智";   //系統這邊會顯示a has already been declared
console.log(a);  //a has already been declared

2. let僅作用於「區塊作用域(Block Scope)」，也就是block {} 外就存取不到變數

let a = "可達鴨"
function change() {
  let a = "皮卡丘"
}
change();
console.log(a); //"可達鴨"

如此一來，工程師們再也不用為了var苦惱了！

## const
相比於var與let，const又更加地嚴謹
除了無法重複宣告，const也無法「重新賦值」

const a = "傑尼龜"
console.log(a); //"傑尼龜"
a = "水箭龜"
console.log(a); //"Uncaught SyntaxError: Identifier 'a' has already been declared

由於const禁止於同個區塊作用域重複宣告，也不能重複賦值的特性
使得const可以做為宣告「常數」或是確定不會更動的值使用

## 總結
最後稍微總結這三者的使用方式

* var：不管哪個作用域(Scope)都可以存取，不受限於塊級作用域（block scope）內，因此可能會汙染全域變數。另外，var可以重複宣告。
* let：所宣告的變數只有在塊級作用域（block scope）內有效，不會產生全域變數，無法在同一層 Block 重複宣告變數。
* const：具備let所有的特性。在宣告時就必須指定給值，不然會產生錯誤，宣告後不能更改值。

## 參考資料

[你應該使用 let 而不是 var 的 3 個重要理由](https://realdennis.medium.com/%E6%87%B6%E4%BA%BA%E5%8C%85-javascript%E4%B8%AD-%E4%BD%BF%E7%94%A8let%E5%8F%96%E4%BB%A3var%E7%9A%843%E5%80%8B%E7%90%86%E7%94%B1-f11429793fcc)

[在 JavaScript 中，Var、Let、Const 的差異？](https://askie.today/differences-among-var-let-const/)

[JavaScript: var, let, const 差異](https://totoroliu.medium.com/javascript-var-let-const-%E5%B7%AE%E7%95%B0-e3d930521230)

[var、let、const 的差異？--Yumi](https://hackmd.io/@yumi2021/rJH_Enzrt)

[[JavaScript] 談var、let、const差異](https://hackmd.io/@bookbasketball/SJ1lqTzSt)

[popeye-ux說: var、let、const 的差異](https://hackmd.io/@popeye-ux/ryNXTk0Vt)