---
# System prepended metadata

title: 第一堂週末任務
tags: [JS 直播班 - 2021 秋季班, 六角學院]

---

# 第一堂週末任務
###### tags: `六角學院` `JS 直播班 - 2021 秋季班`

目錄
---
* [週末任務](#週末任務)
    * [var、let、const-的差異？](#var、let、const-的差異？)
    * [by reference (傳參考)、by value(傳值)](#by-reference(傳參考)、by-value(傳值))
    * [undefined 與 null 的差異](#undefined-與-null-的差異)
* [記憶體接龍](#記憶體接龍)
    * [第 1 題](#第-1-題)
    * [第 2 題](#第-2-題)
    * [第 3 題](#第-3-題)
    * [第 4 題](#第-4-題)

## 週末任務
### `var`、`let`、`const` 的差異？
1. `var`: 
    * 不會受宣告的位置或順序影響。
    * 即使宣告為**區域變數**，還是會影響**全域變數**。
    * 在任何位置都可以存取。
    * 可以**重複宣告**，是一個**非常不嚴謹**的宣告方式。
2. `let`:
    * 生命週期只會在區域內有效，區域之外就會失效。
    * 不會影響**全域變數**。
    * 同區域內不能重複宣告。
    * 用來代替`var`，是目前**最推薦**的宣告方式。
3. `const`:
    * 與`let`相似。
    * 宣告之後即**無法改變**。
    * 宣告時就必須給**初始值**，否則會有錯誤。

### `by reference(傳參考)`、`by value(傳值)`
1. `by reference (傳參考)`
    * 較常發生在`Object`和`Function`。
    * a 為一個`Object`或`Function`時，會有**一塊記憶體空間`(0x001)`**，將 a 賦予給 b，此時它們兩個都會**指向同一塊記憶體空間`(0x001)`**，其中一方改變的結果都會影響另一方。
    ![](https://i.imgur.com/YBAyg5k.png)
2. `by value(傳值)`
    * 較常發生在`Primitive Type 的變數`。
    * a 為一個`Primitive Type 的變數`時，會有**一塊記憶體空間`(0x001)`**，但將 a 賦予給 b 時，系統會再給 b **另外一塊記憶體空間`(0x002)`** 來儲存 a 的變數，兩方不會互相影響。
    ![](https://i.imgur.com/hlCWeR6.png)
3. 範例 - `by reference(傳參考)`
    * 將物件 c 賦予給 d ，顯示的結果都是`Hello`。
    * 修改 `c.greeting = "Hola";`，因為指向同一塊記憶體，所以 d 也會一同改變。
    * 透過 `function` 也能達到同樣的效果。
    <br/>
    ```jsx
    let c = { greeting: "Hello" };
    let d;
    d = c;

    // Hello
    console.log(c);
    console.log(d);

    c.greeting = "Hola";

    // Hola
    console.log(c);
    console.log(d);

    function changeGreeting(obj) {
      obj.greeting = "Hi";
    }

    changeGreeting(d);

    // Hi
    console.log(c);
    console.log(d);
    ```
    ![](https://i.imgur.com/8SGrJmn.png)
    > 在 JavaScript 中 **Objects**（`Object`, `Array`, `Function`）都屬於 **by reference**。
4. 例外情況
    * 若直接透過**屬性**的方式修改內容，則會變成 **by value**。
    * 因為系統不知道 c 的內容是否已經存在，就會當作一個**全新的物件**賦予給 c，並且重新給予一塊**新的記憶體空間**。
    ```jsx
    let c = { greeting: "Hello" };
    let d;
    d = c;

    // Hello
    console.log(c);
    console.log(d);

    c = { greeting: "Hola" };

    // Hola
    console.log(c);

    // Hello
    console.log(d);
    ```
    ![](https://i.imgur.com/EdIyGvi.png)

### `undefined` 與 `null` 的差異
1. `undefined`: 未定義
    * 型別為`undefined`。
        ![](https://i.imgur.com/PiP8iER.png)
    * 設定變數但沒有給初始值。
        ![](https://i.imgur.com/KSqplQv.png)
    * 不存在的物件屬性或陣列元素。
        ![](https://i.imgur.com/5yDPDQ5.png)
    * 若function需要傳入值而沒有傳入，也會顯示`undefined`。
        ![](https://i.imgur.com/8elPxqe.png)
    * 使用 `void` 時，不論後面的表達式為何都會回傳`undefined`。
        ![](https://i.imgur.com/4cf12Q8.png)
2. `null`: 空值
    * 型別為`object`。
        ![](https://i.imgur.com/rAqyenq.png)
    * 操作DOM元素時，若獲取的DOM元素不存在，也會回傳`null`。
        ![](https://i.imgur.com/NDuuokm.png)
    * 供開發者宣告為`空值`。
        ![](https://i.imgur.com/BOliwit.png)

#### 參考資料
* [[JS學徒特訓班] JavaScript ES6 : var, let, const 差異](https://codinggirl.timelog.to/a174653905)
* [[筆記] 談談 JavaScript 中 by reference 和 by value 的重要觀念](https://pjchender.blogspot.com/2016/03/javascriptby-referenceby-value.html)
* [Javascript中undefined和null的差異](https://snh90100.medium.com/1f48e9be5e02)

## 記憶體接龍
請自己畫出以下三題，並在 Slack 上，同時自己出第四題，並擔任 20 分鐘的志工

### 第 1 題
```
// 1. console.log 的值為？
// 2.出現幾個變數、型別、記憶體空間?
let a;
a = 1;
a = "hello";
console.log(a);
```
![](https://i.imgur.com/K1BIrSX.png)

### 第 2 題
```
// 1. console.log 值為？
// 2.出現幾個變數、型別、記憶體空間?
let b = 3;
b = 5;
let c = 4;
b = 8;
c = c + b;
let d = b + c;
console.log(e);
```
![](https://i.imgur.com/Zjn0xVS.png)

### 第 3 題
```
// 1. console.log 值為？
// 2. 出現幾個變數、型別、記憶體空間?
let e = 0;
e = 5;
e = "hello";
e = true;
e = 3;
e += 1;
console.log(e);
```
![](https://i.imgur.com/D8Cgo7z.png)

### 第 4 題
```
// 1. console.log 值為？
// 2. 出現幾個變數、型別、記憶體空間?
let a = 10;
a += 5;
a = "Hello"
let b;
let c = a + 5;
b = c + "2";
console.log(b);
```
