# 第一堂週末任務
###### 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)`**，其中一方改變的結果都會影響另一方。
2. `by value(傳值)`
* 較常發生在`Primitive Type 的變數`。
* a 為一個`Primitive Type 的變數`時，會有**一塊記憶體空間`(0x001)`**，但將 a 賦予給 b 時，系統會再給 b **另外一塊記憶體空間`(0x002)`** 來儲存 a 的變數，兩方不會互相影響。
3. 範例 - `by reference(傳參考)`
* 將物件 c 賦予給 d ，顯示的結果都是`Hello`。
* 修改 `c.greeting = "Hola";`，因為指向同一塊記憶體，所以 d 也會一同改變。
* 透過 `function` 也能達到同樣的效果。
<br/>

    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);

> 在 JavaScript 中 **Objects**（`Object`, `Array`, `Function`）都屬於 **by reference**。
4. 例外情況
* 若直接透過**屬性**的方式修改內容，則會變成 **by value**。
* 因為系統不知道 c 的內容是否已經存在，就會當作一個**全新的物件**賦予給 c，並且重新給予一塊**新的記憶體空間**。

    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);


### `undefined` 與 `null` 的差異
1. `undefined`: 未定義
* 型別為`undefined`。
* 設定變數但沒有給初始值。
* 不存在的物件屬性或陣列元素。
* 若function需要傳入值而沒有傳入，也會顯示`undefined`。
* 使用 `void` 時，不論後面的表達式為何都會回傳`undefined`。
2. `null`: 空值
* 型別為`object`。
* 操作DOM元素時，若獲取的DOM元素不存在，也會回傳`null`。
* 供開發者宣告為`空值`。

#### 參考資料
* [[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);


### 第 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);


### 第 3 題

// 1. console.log 值為？
// 2. 出現幾個變數、型別、記憶體空間?
let e = 0;
e = 5;
e = "hello";
e = true;
e = 3;
e += 1;
console.log(e);


### 第 4 題

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