# var、let、const 的差異？
為解決ES6以前舊版本中var宣告不夠嚴謹，同名變量覆蓋與先使用變量後定義變量仍可以輸出undefined而未報錯使除錯困難，所以產生了新的宣告方式let、const。

> ES6以前 var()
> ES6以後 let() 與 const()
## 他們是甚麼 :pencil2:

// 在JavaScript中宣告變數的方式，就是告訴瀏覽器我們需要一塊儲存空間(記憶體空間)，並且在
// 那個空間存放指定數據。
var    data    =   "第一週筆記"
宣告   變量名稱  =   要存的數據

變量名稱的一些規則
* 命名使用英文大小寫、數字、下划線或是$組成
* 名稱不能用數字當開頭
* 不能使用JS中的關鍵字語保留字
* 嚴格區分大小寫
* 使用駝峰命名
> [關於變量延伸閱讀](https://www.w3school.com.cn/js/js_variables.asp)
> [保留字](https://www.w3school.com.cn/js/js_reserved.asp)

## 先了解何謂作用域
作用域決定了這些變量的可訪問性
JavaScript中有兩種作用域
* 全局作用域
* 局部作用域

### 局部作用域

1.定義在{}裡面
2.有效範圍只有在定義那行到大括號結束，函式之外的所有程式碼都不能存取這個變數。
3.在局部作用域中的變量稱為局部變量
4.函數function後的{}屬於局部作用域

### 全局作用域

1.定義在{}外面
2.有效範圍在定義那行到文末，全局變量在整個程式中都可以被存取與修改。
3.在全局作用域中的變數稱為全局變量

**實例:**

// 全局作用域
var a = 1;

{
// 局部作用域
function myFunction() {
    // 函數局部作用域
    console.log(a);
    var c = 3;
    }
// 局部作用域
}
myFunction();
// a可被函式使用，因此輸出 1 

// 因變量定義在函式當中c將會找不到
console.log(c);
// 輸出 Uncaught ReferenceError: d is not defined
// 
// 全局作用域

## 關於 var :pencil2:
在ES6前宣告變量的方式，是**最弱的變數宣告**，其作用域是「函式作用域」，也就是在function 內宣告的 var，要在該 function 才有作用 ，但是如果在函式外宣告的話，其作用範圍則為 全域性。

:point_right: 特性
* 可重複定義同變量名且不會報錯
* 可以重新賦值
* 可先使用後定義(預解析)，但是會輸出undefined
* 定義在全局作用域時，在整個程式中都可被存取予修改

[預解析](https://iter01.com/561971.html)

**實例:**

console.log(DemonSlayer);
var DemonSlayer;
// 此時未賦予任何值且先使用後定義，但是依然可以輸出undefined

var DemonSlayer = "炭治郎";
// 使用var可以重新再宣告一次同名變量
console.log(DemonSlayer);
// 賦予一個初始化的值，輸出為 炭治郎

DemonSlayer = "伊之助";
console.log(DemonSlayer);
// 給變量新的值 伊之助且輸出，可得知var可以重新賦值

## 關於let :pencil2:
以 let 宣告的變數，其作用域是「局部作用域」，也就是 { } 包住的區域，一但離開 { }範圍，這個變數就不會被存取到。

:point_right: 特性
* 重複定義變量名稱會有錯誤提示
* 先使用後定義會有錯誤提示
* 可以重新賦值
* 基本上用法與var相同

**實例:**

// console.log(DemonSlayer);
// let DemonSlayer;
// let先使用後定義，系統會提示該變量未宣告 
// Uncaught ReferenceError: Cannot access 'DemonSlayer' before initialization

// 必須先定義
let DemonSlayer;
console.log(DemonSlayer);
// 未賦值 輸出undefined

// let DemonSlayer = "炭治郎";
// 使用let不可以重新再宣告一次同名變量，系統提示該變量已被宣告
// Uncaught SyntaxError: Identifier 'DemonSlayer' has already been declared

// 必須直接賦值
DemonSlayer = 炭治郎;
// 直接賦予初始化的值
console.log(DemonSlayer);
// 輸出為 炭治郎

DemonSlayer = "伊之助";
console.log(DemonSlayer);
// 給變量新的值 伊之助且輸出，可得知let也可以重新賦值

## 關於const :pencil2:
const 可以視為 let 的常數加強版，let 有的特性 const 都有，但 const 額外多了常數保護的特性。
在宣告 const 時就必定要指定給值，不然會產生錯誤。而且指定後不能更改賦值。

:point_right: 加強特性
* 先告要先賦值初始化，不然會報錯
* 宣告變量後就無法再修改賦予值

**實例:**

const IP = "110.22.XX.127";
// 恆定不動變數IP位址
const exPhone = 0957733822;
// 電話號碼
exPhone = 0912345678;
// 無法修改變量的值 系統錯誤賦值給常量變量
// Uncaught TypeError: Assignment to constant variable.

## 總結

| | 重複定義 | 重新賦值 | 預解析 | 區分作用域 |
| ----- | --------| -------- |---------| ------- |
| var | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | 在function時區分 |
| let | :x: | :heavy_check_mark: | :x:| :heavy_check_mark: |
| const | :x: | :x: | :x: | :heavy_check_mark:|

## 參考資料
[JavaScript 宣告: var、let、const](https://www.iware.com.tw/blog-458.html)
[[JS學徒特訓班] JavaScript ES6 : var, let, const 差異](https://codinggirl.timelog.to/a174653905)
[w3school JS 變量](https://www.w3school.com.cn/js/js_variables.asp)
[w3school JS let](https://www.w3school.com.cn/js/js_let.asp)
[w3school JS const](https://www.w3school.com.cn/js/js_const.asp)
[函式與作用域](https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part3/function_scope.html)