# <font class="h2">var、let、const 的差異</font>

###### tags: `javascript`
<style>
.h2 {
background: linear-gradient(135deg,#fff,#537479) ;
color: #537479;
display:block;
padding: 6px 5px;
border-radius: 4px;
}
.h3 {
background: linear-gradient(180deg,#fff 50%,#c9d5d4) ;
color: #537479;
display:block;
padding: 6px 5px;
border-bottom: 3px solid #537479;
}
.h4 {
color: #537479;
font-weight:bold;
font-size:1.1em;
}
</style>

:::info
ES6 採用 (區塊)Block Level Function Declarations 界定 Function 範圍，由於 IE8~IE10 不支援 ES6，仍然採用 hoisting 界定 function 範圍。
:::

| | 重複賦予值 reassigned |拉升<br>hoisting | 作用域 Sope |window | 重複宣告<br>redeclared |
| ----- | ---------------------- | -------------------------------- | -------------------------- | --- | -------- |
| var | 可以 | 可以先取值後宣告（undefined） | 全域/函式作用域 (Globally Sope/Function Scope) | 可存在 | 可以 |
| let | 可以 | 須先宣告才能取值（否則會出錯） | 區塊作用域(Block Scope) |不可存在| 不可以 |
| const | 宣告為常數，不能再做修改 | 須先宣告才能取值（否則會會出錯） | 區塊作用域(Block Scope) |不可存在 | 不可以 |

<br>

### <font class="h4">var</font>
- var宣告的變數，變數的作用域(Scope)以==函式區塊==分界
- 變數中的資料可以變動

<br>

### <font class="h4">let</font>
- let宣告的變數，變數的作用域(Scope)以==程式區塊(大括號)==分界
- 宣告變數，可以暫時不給資料
- 變數中的資料可以變動
<br>

### <font class="h4">const</font>
- `const <常數名稱>=常數資料`
- const宣告一定要指定資料
- 常數資料不能變動(==唯獨屬性==)
- ==const可以指定物件，並修改物件裡面的值，但不能再賦予新的值到此物件裡==
<br>

### <font class="h3">重複賦予值 reassigned</font>
<br>

:::info
- var的作用域以函式區塊區分

**var、let可以重複賦予值**

function fn(){
    var a = 1;
    var a = 0;
}

:::
:::info

const無法重新賦予值，如果不想值被更動可以使用const

const b = 0;
b = 1;
console.log(b); // 會報錯Assignment to constant variable

:::
:::info
**let與const的差異**
- 當是「值」時，值會變的使用let，值不會變的使用const
- 是「物件」的話，指向會變的用let，指向不會變的使用const

**物件傳參考特性(by reference)**

const a = { name: '卡斯伯'} 
//宣告一個物件
a.name = 'Ray'
//改變物件的值

這要寫是正確的
`{}`為「物件」，當宣告一個物件時，因為物件有傳參考特性，所以建議使用const，而不用let
<br>
<br>
**修改整個「物件」的話 不可以用 const 宣告**

const a ={name:'卡斯柏'}
a = {name:'Ray'}

這樣寫會出錯，因為物件傳參考
`{}`為物件，產生一個新的物件，就會有一個新的參考位置(記憶體空間)，:bulb:cont不勻許「物件指向」被改變，「物件指向」會被改變使用let

:BULB:結論：可以用 const 就用 const 不要都用 let 宣告
:::
<br><br><br><br>

### <font class="h3">範例：</font>

if (true) {
  function foo() {
    return "a";
  }
} else {
  function foo() {
    return "b";
  }
}
console.log(foo());

<br><br><br><br>

### <font class="h3">作用域/範疇 scope</font>
([圖片來源)](https://codeburst.io/declaring-variables-in-es6-javascript-60ea37e38765)
([圖片來源)](https://codeburst.io/declaring-variables-in-es6-javascript-60ea37e38765)

:::info
:bulb:未宣告為一個**全域「屬性」** (:bulb:屬性與變數不同)

function fn() {
  a = 0;
}
fn();
// 可以取到 a 的值為0

沒有宣告的話，會造成全域汙染，變得髒。要盡可能去宣告變數
:::
區域變數有分函式作用域(Function Scope)、區塊作用域(Block Scope)
:::info
- var在函數內宣告時作用域是函式作用域，這意味著它們僅在創建它們的函數內可用
- var在函數外宣告時，作用域是全局的

function fnB() {
  var a = 1;
}
fnB();
console.log(a);
// 上方結果會是 a is not defined(報錯)，因為function內容跑完後裡面的內容記憶體空間會被清除

function fnB(){
    var a = 1;
    console.log(a);
}
fnB()//可以取到1

因為每個函式都有自己的作用域
所以兩個函式的 a 都只在自己的作用域中 不會互相衝突
這也是我們要宣告變數的原因 當我們沒有宣告變數的時候就可能造成全域的污染
:::

:::info
使用 var 時，若在「區塊作用域block`{}`」宣告，仍然可以在區塊作用域之外拿取。如下：

{
  var v1 = "hello";
}
console.log(v1); //hello

如果是使用 let 或 const，則受區塊作用域限制，無法於區塊之外拿取，會報錯。

function fn(){
    let a = 1;
}
console.log(a);
//會取不到值(not defined)報錯

for (let i =0; i <10; i++){

}
console.log(i);
//會取不到值(not defined)報錯

:bulb:相較var，let的作用域較穩定，不容易出錯
:::

<br>
### <font class="h3">拉升 hoisting</font>

:arrow_right:[拉升](https://hackmd.io/@grayshine/rk9hv-TBt)
<br>

:::info
我們在初始化的過程中嘗試去取值，會取得 `undefined`，這就是 hoisting

console.log(a); // 輸出 undefined
var a = 1;
console.log(a); // 輸出 1

:::

:::info
**let、const須先宣告才能取值**

function fn(a){
    console.log(a); //此段為暫時性死區TDZ
    let a = 2 ;
    console.log(a);
}
fn(1)
//這段使用let會出錯，因為let須先宣告才能取值

:bulb:暫時性死區TDZ(temporal dead zone)
結果會報錯，不勻許在宣告值之前去取得這個值
:::
<br>

<br>

### <font class="h3">window(全域物件)</font>
<br>

:::info
**var可以存在window上面，let不可以**

var a =0;
let b =1;
console.log(window);
//會發現window點開a=o，找不到b

:::

### <font class="h3">重複宣告redeclared</font>
:::info
- var 重複宣告也不會報錯

function fn() {
  var a = 1;
  var a = 0;
}
fn();
// var 重複宣告也不會報錯 

<br>

let a = 0;
let a = 1;
//會出錯(has a ready been declared)

:::

---
參考文章
https://www.youtube.com/watch?v=FGdKdn_CnWo&ab_channel=%E5%85%AD%E8%A7%92%E5%AD%B8%E9%99%A2
https://codeburst.io/declaring-variables-in-es6-javascript-60ea37e38765