###### tags: `Javascript`
# let、const、var 介紹

## let 變數介紹
- let 可以複寫，修改既有的值
- let 變數宣告一次就好，因為已經被記憶體記錄了，如果要變更值，重新賦予值即可

let cokePrice = 20; //let 宣告
cokePrice = 40; //重新賦予cokePrice 值

## const 變數介紹
* const 無法被作修改，let 可以做修改

const sale = 0.7;
const hatPrice = 100;
let hatNum = 3
let total = sale * hatPrice * hatNum;
console.log(total);

//帽子折扣sale、帽子價錢hatPrice不輕易做修改，所以用const
//購買帽子的數量 hatNum、總金額 total會有變動，所以用let

* const 宣告當下要給一個值，這個值可以是數字、函式、陣列、物件。但如果值是數字，之後就不能再做更動，其他值可以。

const a = 1;
a = 11; 
console.log(a); 
//Assignment to constant variable.
//數字不可更動。

//物件、陣列、函式可更動
const Tea = { blackTea: 1 };
Tea.blackTea = 5;
console.log(Tea); //5

## var 變數介紹
* **var** 宣告一個可隨意更改其內容的變數，**較不嚴僅**
* **let** 宣告一個可隨意更改其內容的區塊區域變數
* **const** 宣告一個**只可讀取**的不可變常數

## let、const、var 差在哪裡？
1. **var 允許重複宣告變數**的，且 console 不會丟任何錯誤提示給你，而 **let** 和 **const** 會回傳之前已經宣告過了，讓我們不會重複宣告變數。例如：

let a = 1;
let a = 2;
console.log(g); //錯誤訊息:Identifier 'g' has already been declared

<br/>
2. 在{}裡宣告**var**變數，在{}外仍可以提取資料。
例如：

{
    var a = 1;
}
console.log(a); // 1

let 和 const 使用**區塊級作用域**,在{}裡宣告資料後，在{}不能提取。<br/>
3. var 宣告的變數，就算是寫在下面，也會一起被提到程式最前面。
出現**undefined**，而不是**a is not defined**，表示記憶體已經知道有a、b的變數存在。
這個叫做var 變量提升 hoisting
例如：

console.log(a); //undefined
console.log(b); //undefined

var a = 1; 
var b = 1;

但如果在 let 或 const 裡則會出現錯誤訊息：

conlole.log(d);
let d = 5;// conlole is not defined 錯誤訊息：未定義

| | var |let | const|
| -------- | -------- | -------- | -------- |
| 塊級作用域 | | V |V |
| 變量提升 | V | ||
| 重複宣告 | V | ||
| 宣告後可更改 | V | V||

## 宣告變數注意事情
❌ 不可命名開頭為數字：`let 1aa = 2 ;`
❌ 不可命名 JavaScript 關鍵字、保留字，例如：function、if、for...
✅ 變數會區分大小寫的，以下這是兩個變數：

let catNum = 1;
let catnum = 2;

✅ 支援開頭下底線 _：`let _a = 1 ;`
✅ 支援開頭錢字號 $：`let $qq = 2 ;`

額外補充：
[JavaScript 那個 let, const, var 到底差在哪？](https://www.youtube.com/watch?v=FGdKdn_CnWo)
可以搜尋語法在瀏覽器的支援程度：[Can I use](https://caniuse.com/)

參考資料：
[02 var、let、const 與 ES6 簡介](https://ithelp.ithome.com.tw/articles/10233647)
[JS 筆記 - ES6 let 與 const 特性](https://hsuchihting.github.io/javascript/20200713/1088942586/)
[雅萱筆記：6/2 直播錄影檔 - 那個 let, const, var 到底差在哪？](https://hackmd.io/@WangShuan/r1cCUB4pu#62-%E7%9B%B4%E6%92%AD%E9%8C%84%E5%BD%B1%E6%AA%94---%E9%82%A3%E5%80%8B-let-const-var-%E5%88%B0%E5%BA%95%E5%B7%AE%E5%9C%A8%E5%93%AA%EF%BC%9F)