---
# System prepended metadata

title: var、let、const 的差異？
tags: [JS 直播班 - 2021 秋季班]

---

###### tags: `JS 直播班 - 2021 秋季班`


var、let、const 的差異？
===


位麼要宣告變數?
方便在開發時會存放許多我們會用到的資料
後續維護管理命名了解其意義

- 當沒有宣告時,我們直接在JavaScript環境隨便一個地方寫1個y變數
![](https://i.imgur.com/Br04xyV.png)
- 變數不管寫在函式內或外都都會存在於全域環境中，隨時可以使用，當我們寫很多像這樣子的變數時不僅會增加瀏覽器負擔，還會汙染全域環境
![](https://i.imgur.com/j6tDOzN.png)


### var

- 使用var宣告時，如果宣告在函式內，變數的使用範圍就只能在該函式內，作用域就只在該函式環境內，而宣告在函式外依樣會存在於全域環境造成汙染全域環境，寫多了也不好
![](https://i.imgur.com/k0YYX4t.png)
- 下圖結果代表宣告在函式內的變數，在函式外找不到，但如果宣告在函式外也就是屬於全域環境，代表函式內也能存取到變數
![](https://i.imgur.com/ApgyUQt.png)


### let

- 接著宣告1個var和1個let的變數
![](https://i.imgur.com/HK1fqPq.png)
- 基本上用var宣告的變數會存在於全域環境，但會發現找不到，原因是因為使用了"load"這個監聽，我們可以把變數移出到外面，就發現用var宣告的變數出現在全域環境了
![](https://i.imgur.com/i0fnW1i.png)
- 用var宣告的a出現在全域而用let宣告的變數是undefined
![](https://i.imgur.com/RplmcYe.png)
- 環境意識圖
![](https://i.imgur.com/upiQAMB.png)
- 還有就是關於提升(hoisting)，用let宣告的變數不會提升
ex :
![](https://i.imgur.com/F4zBF3o.png)
用var宣告的a有提升所以是undefined，而let宣告的b沒有提升
![](https://i.imgur.com/bwJbvtI.png)


### const

- Constants (常數) 有點像使用 let 所宣告的變數，具有區塊可視範圍。常數不能重複指定值，也不能重複宣告。
- 當要重新賦予2這個值時會出現錯誤，代表這個變數是const宣告的不能重新給予值
![](https://i.imgur.com/rHqZfSR.png)


---
### 參考資料來源
var : https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/var
let : https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/let
const : https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/const




