# JavaScript - var與let差異

### ES6 後，var 改為使用 let / const
目前 JavaScript 是 ES6 版本，在這個版本是推薦使用 let 和 const 宣告變數
主要有幾項差異：
- 作用域 (scope) 不同
- for 迴圈的綁定 (bind) 差異

### var 是函式作用域，let / const 是區塊作用域
作用域就是「變數有效的作用範圍」；區塊是指 { }大括號範圍 。
- 函式作用域
代表最小的有效範圍是 function，但不具有區塊作用域，所以在區塊中宣告的變數，依然會作用到區塊之外，並不會被區塊限制住。
- 區塊作用域
區塊中宣告的變數，有效作用範圍會被限制在該區塊中。

{
  var TestName = 'GIS';
}

console.log(TestName);
//GIS


{
  let TestName2 = 'Geosense';
}

console.log(TestName2);
//Uncaught ReferenceError: TestName2 is not defined at <anonymous>

### var 與 let ，for 迴圈的綁定（bind）差異

const attr = [{
    ProjectName: "南崁溪上游水質共融式親水公園"
},
{
    ProjectName: "社子溪月眉橋下游至慈恩橋右岸護岸治理工程"
}];

for (i = 0; i < attr.length; i++) {
    var EachAttr = attr[i];
    var $btn = document.createElement("button");
    $btn.innerHTML = "按鈕" + i;
    $btn.addEventListener("click", function (e) {
        e.preventDefault();
        console.log(this.innerHTML + "_" + EachAttr.ProjectName);
    }, false);
    $("#divBtn").append($btn);
}
//按鈕0_社子溪月眉橋下游至慈恩橋右岸護岸治理工程
//按鈕1_社子溪月眉橋下游至慈恩橋右岸護岸治理工程

//將第9行改為 let EachAttr = attr[i]; 即可解決

主要原因是因為for 迴圈中使用 var 宣告變數會受「全域變數」所影響!
使用let 宣告變數可以讓變數在 {} 內的程式碼執行時重新與變數綁定(區塊作用域的特性)

---
[參考資料](https://www.programfarmer.com/articles/javaScript/javascript-var-let-const-for-loop)