# var, let, const之間的差異
###### tags: `JavaScript` `var` `let` `const`

## Global Variables(全域變數)、 Local Variables(區域變數)
* 全域變數：在 function 內/外都能夠使用的變數、可被存取與修改
* 區域變數：只在 function 內做使用，等到 function 結束後變數就會失效

## var 宣告變數
> var 宣告變數時，它的作用範圍可以是全域也可以是區域，但如果使用區塊語句(ex: if, else, for, while)時，宣告的區域變數仍然可在作用範圍外被存取
### 情境一
> var 一個全域變數可在 function 內/外使用、可被存取與修改

var i = 3;

(function () {
        i += 1;
})();

console.log(i);  // 輸出結果為 4

### 情境二
> var 一個區域變數執行結束後就會失效，故在 function 外取 *j* 的值是 undefined

(function () {
        var j = 4;
        j += 1;
})();

console.log(j);  // 輸出結果為 j is not defined

### 情境三(宣告與不宣告)
> 若無宣告，則其變數會被當成全域變數

(function x() {
        y = 1;   // 無宣告，因此被作為全域變數使用
        var z = 2;
})();

console.log(y); // 為全域變數，所以 y = 1
console.log(z); // 為區域變數，所以 z 未被找到

## let 變數宣告
> let 可以只宣告在目前作用的區塊、階段或表達式中作用的變數
### 範例

let x = 1;

if (x === 1) {
        let x = 2;
        console.log(x);  // 會輸出 2
}

console.log(x);  // 會輸出 1

## let 與 var 差異比較

### 情境一 (在 if 中分別使用 var 與 let 宣告)
* var ( if 跑完後，在區塊語句外可以輸出 *b* )

if (true) {
        var b = 20;
}

console.log(b);  // 輸出值為 20

* let ( if 跑完後，在區塊語句外無法輸出 *b* )

if (true) {
        let b = 20;
}

console.log(b);  // 會輸出 b is not defined

### 情境二(在 function 區塊與子區塊中宣告)
* var

(function varTest() {
        var x = 1;
        {
                var x = 2;  // 這裡的x是一樣的，會改變整個 function 的 x
                console.log(x);  // 輸出值為 2
        }
                console.log(x);  // 輸出值為 2
})();

* let

(function letTest() {
        let x = 1;
        {
                let x = 2;  // 這裡的 x 是不同的，只會作用在這層區塊中
                console.log(x);  // 輸出 2
        }
        console.log(x);  // 輸出 1
})();

## const
const 會對於它的值建立一個唯讀的參考( const 宣告時一定要有值，否則會跳錯誤)。並不是說這個值不可變更，而是這個變數不能重新指定值，例如常數的內容(值)是個物件，那麼此物件的參數是可以更改的。它與 let 一樣都是可以只宣告在目前作用的區塊

### 情境一(宣告一個常數)

const firstName = 'HSU';
// 測試 1
firstName = 'LIN';  //Error: firstName 已經分配給常數
// 測試 2
const firstName = 'LIN';  //Error: firstName 已經被宣告過
// 測試 3
let firstName = 'LIN';  //Error: firstName 已被宣告

### 情境二(宣告常數為一個物件)

const room = [{
                teacher: 'Lin',
                students: 30
        },
        {
                teacher: 'Wang',
                students: 36
        }
]

room[0].teacher = 'Chen';
console.log(room[0].teacher);  //會輸出 Chen

## 參考來源
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const