# ==討論日期 : 4/10 ( 三 )==
||你不用一開始很厲害，但要開始了才會變厲害，前面累積的必然會開花結果，大家繼續加油:sparkling_heart:||

## 上週複習
- [討論日期：4/3](https://hackmd.io/uRS0CH-eSKKRuX6khPT-4A)
<br>

## 💖 本週複習 🥰

[核心篇第五堂：函式](https://hackmd.io/@hexschool/rkEOZSJSi)
<br>

### ==1. 何謂IIFE==

#### 相關知識點

#### 大家回答
🤩
[立即函式 IIFE (Immediately Invoked Function Expression)](https://www.explainthis.io/zh-hant/swe/what-is-iife):
可以立即執行的函式表達式。
大部分情況下立即函式不需要定義名稱(匿名函式)。

[IIFE 介紹：](https://medium.com/vicky-notes/%E7%AB%8B%E5%8D%B3%E5%87%BD%E5%BC%8F-iife-27fe4007e446)
1. 不需要呼叫此函式，也能執行 (立刻執行)
2. IIFE 最主要目的是避免污染到全域執行環境並照成污染與衝突
限制作用域的用途，「立即函式」無法在外層呼叫
變數的作用域只在函式內，在外層無法取得變數
3. 「立即函式」本身是表達式，所以也能回傳一個值

(function () {
  console.log('IIFE');
})(); // 執行的括號在外側

(function () {
  console.log('IIFE');
}()); // 執行的括號在內側

- 優點：
1. 創建局部作用域(限制作用域)：創建一個局部作用域，避免變數污染全域。
在 IIFE 內部聲明的變數和函數只在 IIFE 的作用域內有效，而不會影響到外部的作用域。
2. 避免命名衝突：IIFE 可以為變數創建了一個單獨的命名空間，避免函式名和變數名的衝突。
3. 模組化編程：IIFE 可以將程式碼分為獨立的模組，方便了程式碼的管理和維護。
4. 提高程式碼執行效率：IIFE 可以在定義時立即執行，避免了函式的不必要的存儲和調用，提高了程式碼的執行效率。
- 缺點：
1. 程式碼不易維護：當程式碼變得更加複雜時，IIFE 的程式碼容易變得龐大，不易於維護和閱讀。
2. 不利於重複使用：IIFE 的程式碼通常是一次性的，無法復用，因此在需要多次調用時不太方便。
3. 增加程式碼複雜度：使用 IIFE 可能會使程式碼變得更加複雜，特別是當程式碼量很大時。
[什麼是前端模組化？](https://www.explainthis.io/zh-hant/swe/what-is-frontend-module)

<br>

### ==2. 請解釋什麼是 Closure，並試寫出相關例子==

#### 相關知識點
- [Javascript｜閉包 Closure 的介紹及應用。閉包跟 FP 的關係是什麼？](https://molly1024.medium.com/javascript-%E9%96%89%E5%8C%85-closure-%E7%9A%84%E4%BB%8B%E7%B4%B9%E5%8F%8A%E6%87%89%E7%94%A8-%E9%96%89%E5%8C%85%E8%B7%9F-fp-%E7%9A%84%E9%97%9C%E4%BF%82%E6%98%AF%E4%BB%80%E9%BA%BC-d9f598c432b7)

#### 大家回答
閉包是內部函式能夠取得函式外部的變數，並且記住這個變數將其保存在記憶體中。
因為能夠記住這個外部變數，閉包很常被用來做狀態保存。
[建立閉包可避免錯誤的使用全域變數而出現 bug](https://pjchender.dev/javascript/js-closure/) 👏

A：閉包就是在一個函式裡又return一個函式，而他的內層函式可以取得外層函式作用域的變數。閉包使得變數在函式執行完畢後仍然可以保留在記憶體中，並且可以被內層的函式所使用。
閉包有下列3個特性：
1. 變數的記憶體不會被釋放，可以保存及重複調用。
2. 每次呼叫外層函式時會創建一個新的作用域，記憶體會被封裝在獨立的函式內彼此之間的變數不會互相干擾。
3. 保護變數的私有性，外部無法取得函式內的變數，所以可以將變數給隱藏起來，以防意外修改到這些變數的值。

function callFunction() {
    return function() {
        console.log('我是閉包');
    }
}
const call = callFunction();
call();


<br>

### ==3. 複習當天公布（煎炸基再度出現 :smiling_imp:）==

for (var i = 1; i <= 5; i++) {
  setTimeout(()=> {
    console.log(i)
  }, 100)
}

答：5 次 6
<br>

### 問題測驗 (溫馨提醒記得複習前面幾周的唷!)

#### ==題目一==

var c = {};
var b = (c = {});
console.log( b === c);

1. true
2. false
3. error

解答：1
<br>

#### ==題目二==

var name = '小明';
function easyCard(base = 100) {
  var money = base;
  return function(update = 10) {
    money = money + update;
    return money;
  }
}

var MingEasyCard = easyCard(100);
MingEasyCard();
MingEasyCard();
console.log(MingEasyCard);

1. function
2. 110
3. 120
4. 130

解答：1
<br>

#### ==題目三==

var name = '小明';
function easyCard(base = 100) {
  var money = base;
  return function(update = 10) {
    money = money + update;
    return money;
  }
}

var MingEasyCard = easyCard(100);
MingEasyCard();
MingEasyCard();
console.log(MingEasyCard());

1. function
2. 110
3. 120
4. 130

解答：4
<br>

#### 😈 ==進階測驗：物件的連續賦值陷阱==

let a = { x: 1 };
let b = a;
a.y = a = { x: 2 };
console.log(a.y);	// undefined

問：console.log(a)、console.log(b)？ (打在 DC 上)

問：為何 `a.y` 為 `undefined`？

[excalidraw](https://excalidraw.com/#json=q-WGOGtmEziWDWf3zWgnQ,fiBCK89Syd1fYkczesUPmA)
<hr>

## 補充
- [搞懂JavaScript中的连续赋值](https://cloud.tencent.com/developer/article/1093667)