---
# System prepended metadata

title: var、let、const
tags: [JavaScript, JS 直播班  - 2021 秋季班]

---

# var、let、const
###### tags: `JavaScript` `JS 直播班  - 2021 秋季班`

## <font size=15>1.var、let、const 的差異</font>？

### **<font size=6>傳統變數var</font>**
#### <font size=5>A.var特性:</font>

1. function內宣告的 var，要在該function才有作用 ，但是如果在
   函式外宣告的話，其作用範圍則為全域性(global)。
2. 可重複使用 var 宣告變數，但不會覆蓋原有的指定值
3. 假如沒有賦予值，初始值undefined

#### <font size=5>B.var的缺點</font>
##### <font size=3 color=#156E62>1.允許重新宣告 (Re-Declaring)</font>
```=JavaScript
console.log(a); //a is no defined
var a;
console.log(a); //undefined
a=10;
console.log(a); // a=10
var a;
console.log(a); // a=10
```
**即使在同一個作用域，同樣名稱的變數也允許重複宣告，宣告一個變數還不會重置該變數的值**
上方的程式碼可以看到用var宣告了一個變數a，但a還是可以重新宣告，況且值還會相同
##### <font size=3 color=#156E62>2.不支援區塊作用域 (Block Scope)</font>
**<font color=red >什麼是 Block Scope?</font>**
簡單來說就是函數或是if、for等語法的大括號{}範圍

而var宣告的變數不會受到大括號範圍作用域受限，容易造成變數管理或是使用函數上面的不方便
##### <font size=3 color=#156E62>3.不支援常數 (Constant) 特性</font>

#### <font size=5>C.宣告var變數跟無宣告var變數的差別</font>
``` =JavaScript
function func() {
    x = 10;
    var y = 20;
}

func();

console.log(x);
console.log(y);
```
x 在function中未使用 var 宣告，是全域變數上的特性，在函式外依舊可見
y 使用了 var 宣告，所以在函式外不可見，為函式中的區域變數。
如果在全域使用 var 宣告變數，也相當於在全域物件上建立特性
**<font color=#9E154F>如果全域與區域中有同名的變數，則區域會暫時覆蓋全域</font>**

### **<font size=6>let</font>**
#### <font size=5>A.let特性:</font>
1. 禁止在同一層Block重複宣告變數
2. 宣告在不同的Block不會互相衝突

### **<font size=6>const</font>**
#### <font size=5>A.const特性:</font>
1. 宣告 const 時就必定要指定給值
2. 無法再度使用 let或 var 重新宣告變數
3. 一旦給值後，就無法重新賦值

## <font size=7>2. by reference 、 by value</font>
### **<font size=6>by value</font>**
```=javaScript
let a =5;
let b;
b=a;
a=2;
console.log(a); // a=2;
console.log(b); // b=5;
```
示意圖:
![](https://i.imgur.com/ZzXfE3M.png)
b=a; :: 給予b跟a相同值的時候，b會再建立一個新的記憶體空間並複製一份a的值放進去
a=2; :: 再賦予a的值給b後，即使在改變a的值，b的值也不會在跟著改變
**<font color=#9E154F>a 和 b 其實是存在於兩個不同的記憶體位置，因此彼此並不會乎相干擾影響</font>**
**<font color=#9E154F>JavaScript5中primitive type（Boolean, String, Number, null, undefined）都屬於 By Value。</font>**
### **<font size=6>by reference</font>**
```=JavaScript
let c={
    name:"danny"
};
let b=c.name;
c.name="john";

console.log(c.name); //john
console.log(b);  //john
```
示意圖:
![](https://i.imgur.com/h1GyH50.png)
b=c.name; :: 賦予c.name的值給b
c.name="john" :: 將c.name的值改變
變數b的值等同於c時，這時候並不會再給它一個新的位置，而是一樣指定到物件c的位置（即0x002）
實際上是不會有新的東西被建立，**<font color=#9E154F>變數c和b都會被指稱到相同的位置（即0x001）</font>**
當c的值改變的時候b的值也會改變，因為它們實際上是指稱到相同的位置

## <font size=7> 3.undefined 與 null 的差異</font>
### **<font size=6>undefined</font>**
1. typeof undefined會回傳undefined
2. 若變數沒有提供初始值，則預設為undefined值
3. 當要取用一個物件的屬性或陣列的元素時，若該屬性/元素不存在，回傳undefined
4. 若原本一個函數需要傳入參數，但是調用函數時卻沒有傳入參數，則回傳值將會是undefined

### **<font size=6>null</font>**
1. typeof null會回傳object
2. 在做DOM元素操作時，若要獲取的DOM元素不存在，則會回傳null
3. null是用來給開發者來宣告”空值”的

### **<font size=6>null跟undefined的相似處</font>**
1. 都没有attribute和method，也不能額外添加attribute跟method
2. 皆為Falsy Value(Boolean判斷時為false)
3. 皆為Primitive Type

P.S. 
null == undefined 回傳true
null === undefined 回傳false


參考資料:
[JavaScript: var, let, const 差異](https://totoroliu.medium.com/javascript-var-let-const-%E5%B7%AE%E7%95%B0-e3d930521230)
[[JS學徒特訓班] JavaScript ES6 : var, let, const 差異](https://codinggirl.timelog.to/a174653905)
[你不可不知的 JavaScript 二三事#Day7：傳統 var 關鍵字的不足](https://ithelp.ithome.com.tw/articles/10203548)
[[筆記] 談談 JavaScript 中 by reference 和 by value 的重要觀念](https://pjchender.blogspot.com/2016/03/javascriptby-referenceby-value.html)
[Javascript中undefined和null的差異](https://snh90100.medium.com/javascript%E4%B8%ADundefined%E5%92%8Cnull%E7%9A%84%E5%B7%AE%E5%88%A5-1f48e9be5e02)