# 🏅 Day 3 - 函式
今天的每日任務，我們先來重溫一下 JavaScript 在宣告函式的兩種方式，分別為：
1. **函式陳述式（Function Declaration）**：傳統的函式定義方式。
2. **函式表達式（Function Expression）**：將函式賦值給變數的方式。
## 函式陳述式
函式陳述式它以 **`function`** 關鍵字當作開頭，後面接著函式名稱與對應程式碼。
**主要特性有：**
1. 函式名稱是必需的
2. 函式會被提升 **Hoisting (提升)**
**範例程式碼**：
```tsx=
console.log(add(5, 3)); // 會被提升，所以仍會輸出: 8
function add(x, y){
return x + y;
}
console.log(add(5, 3)); // 輸出: 8
```
## **函式表達式（Function Expression）**
函式表達式是將函式定義為表達式的一部分，通常是將函式賦值給變數。可以是匿名的（沒有函式名稱）或具名的。唯一的差別在，函式表達式不會被提升，所以只能在函式被賦值之後才能執行。
**主要特性有**：
1. 可以是匿名也可以是具名。
2. 不會被提升，需要在定義之後才能執行。
**範例程式碼**：
```tsx=
console.log(subtract(10, 5)); // 會出錯，Uncaught ReferenceError: subtract is not defined
const subtract = function(x, y) {
return x - y;
};
console.log(subtract(10, 5)); // 輸出: 5
```
## 函式的型別註釋
接下來我們就來分享，在 TypeScript 中如何針對函式加上型別註釋吧！
你可以為函式的參數和回傳值加入型別註釋：
1. **參數型別**：定義每個參數的型別。
2. **回傳值的型別**：定義函式回傳值的型別。如果函式不回傳任何值，可以使用 **`void`**。
### 範例程式碼
**範例 1：基本函式型別**
```tsx=
function add(x: number, y: number): number {
return x + y;
}
```
**`add`** 函式有兩個參數 **`x`** 和 **`y`**，它們都是 **`number`** 型別，並且函式回傳一個 **`number`** 型別的值。
## 函式表達式與箭頭函式
在 TypeScript 中，也可以使用 ES6 的箭頭函式（Arrow Function）來簡化函式表達式。
例如，一個箭頭函式的加法函式可以寫成：
```tsx=
const add = (x: number, y: number): number => x + y;
```
## **單選題**
1. TypeScript 中，函式陳述式的主要特點是什麼？
A. 可以被賦值給變數
B. 必須要有函式名稱
C. 都必須要回傳 **`void`**
D. 不可以有回傳值
2. 在 TypeScript 中，函式參數的型別註釋主要作用是什麼？
A. 指定函式執行的時間
B. 定義函式的參數和回傳值的型別
C. 確定函式的名稱
D. 調整函式的性能
4. 以下哪個選項正確定義了一個 TypeScript 函式，該函式接受兩個 **`number`** 類型的參數並回傳一個 **`number`**？
A. **`function add(x, y) { return x + y; }`**
B. **`const add = (x: number, y: number) => x + y;`**
C. **`let add = function(x, y) { return x + y; }`**
D. **`add(x: number, y: number): number { return x + y; }`**
5. 如果一個 TypeScript 函式不回傳任何值，它的回傳型別應該是什麼？
A. **`number`**
B. **`string`**
C. **`void`**
D. **`boolean`**
## **實做題**
1. 設計一個 **`multiply`** 函式陳述式，設計兩個 **`number`** 型別的參數，並回傳它們的乘積。
2. 宣告一個 **`concatStrings`** 變數，並賦值匿名箭頭函式，以符合函式表達式，設計兩個 **`string`** 型別的參數，並將它們連接起來。
3. 設計一個函式 **`isGreaterThanTen`** 函式陳述式，設計一個 **`number`** 型別的參數，並檢查該數字是否大於 10，回傳 **`boolean`** 值。
## **面試題(選作)**
使用函式陳述式、函式表達式的時機點是什麼時候？
## 回報流程
將答案寫在 CodePen，並貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
<!-- 解答：
單選題目：B、B、B、C
開發題目：
let score: number = 80;
let message = "Hello, TypeScript!";
let fullName: string = "洧杰";
題目一：
function multiply(x: number, y: number): number {
return x * y;
}
題目二：
const concatStrings = (str1: string, str2: string): string => {
return str1 + str2;
};
題目三：
function isGreaterThanTen(num: number): boolean {
return num > 10;
}
-->
回報區
---
| Discord | CodePen / 答案 |
|:-------------:|:----------------------------------------------------------------:|
|洧杰|[Codepen](https://codepen.io/hexschool/pen/poYgYqW?editors=1010)|
|神奇海螺(Discord 名)|[Codepen](https://codepen.io/codemachine0121/pen/LYaZqyG)|
|展誠|[Codepen](https://codepen.io/hedgehogkucc/pen/YzgWBYZ?editors=1010)|
|連小艾|[Codepen](https://codepen.io/bolaslien/pen/RwdRvJZ?editors=1000)|
|苡安|[Codepen](https://codepen.io/yi-an-yang/pen/JjzKxvX)|
|YH.Lo|[Codepen](https://codepen.io/chloelo/pen/XWGKOxJ)|
|ZS|[Codepen](https://codepen.io/irishuang/pen/eYXzxKq)|
|HsienLu|[Codepen](https://codepen.io/Hsienlu/pen/yLwJwLB)|
|Derrick|[Codepen](https://codepen.io/Derricktang/pen/XWGKGJd?editors=0010)|
|YC|[HackMD](https://hackmd.io/SKoJd3EsTlitnjzCx4Rarg)|
|77_0411|[Codepen](https://codepen.io/chung-chi/pen/KKEMJYL?editors=1100)|
|亞當|[Codepen](https://codepen.io/Adam-Hsu/pen/ZEPOPEY?editors=1010)|
|m_m|[CodePen](https://codepen.io/minnn7716/pen/bGZeJEE)|
|hiYifang|[HackMD](https://hackmd.io/@gPeowpvtQX2Om6AmD-s3xw/B1VlA0_uT)|
|wendy_.li|[HackMD](https://hackmd.io/PcmFgqZwRd-4Ep3-LgK5_Q?both)|
|ethan1331|[CodePen](https://codepen.io/EthanTsai/pen/mdoEYKB)|
|BEN|[CodePen](https://codepen.io/Kao-Yu-Chun/pen/yLwJWqr)|
|rikku1756|[CodePen](https://codepen.io/rikkubook/pen/Babzgyq?editors=1011)|
|Judy ☻|[Codepen](https://codepen.io/hsiaohan/pen/wvOWbbY?editors=1010)|
|BonnieChan|[Codepen](https://codepen.io/Bonnie-chan-the-bold/pen/KKEMONW?editors=0010)|
|Yee|[Codepen](https://codepen.io/alivealife/pen/dyrXxNr)|
|Otis|[Codepen](https://codepen.io/humming74/pen/XWGKvME?editors=1011)|
|JC|[Codepen](https://codepen.io/jcsamoyed/pen/OJqXKpy?editors=0011)
|Mi|[CodePen](https://codepen.io/Mi-Jou-Hsieh/pen/rNRLbPq?editors=1111)|
|Teddy|[CodePen](https://codepen.io/TaideLi/pen/zYbKOPO)|
|Zuo|[CodePen](https://codepen.io/linchinhsuan/pen/poYEzex?editors=1010)|
|hannahTW|[CodePen](https://codepen.io/hangineer/pen/QWoKLRY?editors=1010)|
|LinaChen|[CodePen](https://codepen.io/LinaChen/pen/VwRKZJz)|
| 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/MWxeLzM) |
| jasperlu005 | [Codepen](https://codepen.io/uzzakuyr-the-reactor/pen/ZEPpEwL) |
| Bryan Chu | [CodePen](https://codepen.io/bryanchu10/pen/gOEwOyJ) |
| NiuNiu | [CodePen](https://codepen.io/Dawson-the-bold/pen/RwdGNrm?editors=0010) |
| deedee1215 | [CodePen](https://codepen.io/diddy032/pen/GRejRrX) |
| gail浴池 | [CodePen](https://codepen.io/GailChang/pen/mdoryZP) |
| shaokang | [CodePen](https://codepen.io/tony-hsueh/pen/OJqRVwQ) |
|Henry_Wu | [CodePen](https://codepen.io/hekman1122/pen/YzgGyPE?editors=1010)|
|Mia | [CodePen](https://codepen.io/Mianzi/pen/poYEgNP?editors=1010)|
|時雨|[Codepen](https://codepen.io/jjustin-35/pen/yLwaOLE)|
|Yang|[Codepen](https://codepen.io/Yang-J/pen/jOJMqGv)|
|yunhung|[Codepen](https://codepen.io/ahung888/pen/qBvaRvo)|
|Starr|[CodePen](https://codepen.io/StarrZhong/pen/NWJRjPa)|
|chaya|[CodePen](https://codepen.io/vickyvvv9/pen/NWJRgzQ?editors=1010)|
|erwin阿瀚|[CodePen](https://codepen.io/yohey03518/pen/gOEwGOw)|
|Jack|[CodePen](https://codepen.io/lj787448952/pen/YzgGQVe)|
|puffy|[codepen](https://codepen.io/TernMayDay/pen/rNRMpgZ)|
|wei|[CodePen](https://codepen.io/jweeei/pen/dyrpbyo)|
|薏慈|[CodePen](https://codepen.io/its_wang/pen/WNmGKdq)|
|shan13|[CodePen](https://codepen.io/yishan13-tsai/pen/OJqRaWo)|
|nina.kuo|[codepen](https://codepen.io/ninakuo0814/pen/WNmGXPN)|
|精靈|[CodePen](https://codepen.io/justafairy/pen/XWGNWNm)|
|楓|[CodePen](https://codepen.io/maplestartend/pen/wvOowxp)|
|bonnieli1414|[CodePen](https://codepen.io/bonnieli1414/pen/KKENMdJ?editors=1011)|
|leave3310|[CodePen](https://codepen.io/leave3310-the-looper/pen/JjzbONR?editors=1011)|
|Lisa|[CodePen](https://codepen.io/lisaha/pen/poYNdNB?editors=1111)|
|Trevor Lin|[CodePen](https://codepen.io/0Trevor0/pen/PoLbejr)|
|Tina|[CodePen](https://codepen.io/TinaTing/pen/poYNqvJ?editors=1010)|
|皓皓|[HackMD](https://hackmd.io/@cutecat8110/SyJUywZYp)|
|翰毅|[CodePen](https://codepen.io/yzuigtdw-the-animator/pen/VwRmoax)|
|Yao|[CodePen](https://codepen.io/AlbertoLL/pen/ZEPBgLB)|
|Alyce|[CodePen](https://codepen.io/alycehwy/pen/MWxjMNe)|
|四季春|[CodePen](https://codepen.io/KuoMin/pen/oNVBjOe)|
|Amberhh | [codepen](https://codepen.io/Amberhh/pen/eYXgZxb)|
| 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/NWJdNew) |
|zoe|[Codepen](https://codepen.io/Zoechiueh/pen/NWJdRPV?editors=0011)|
|Alex|[Codepen](https://codepen.io/datsxzqg-the-selector/pen/oNVBwPZ?editors=0010)|
| Rochel |[Codepen](https://codepen.io/rochelwang1205/pen/MWxJqLp?editors=1010)|
| clairechang |[Notion](https://claire-chang.notion.site/Day-3-c652ceb54e5648588f15ee14554c4434)|
| MCBB_4881 |[Codepen](https://codepen.io/ebvaxaah-the-bashful/pen/oNVBrGL?editors=0010)|
| 小米 |[Codepen](https://codepen.io/joanne-wei/pen/oNVZNWb?editors=0012)|
|aki|[code](https://codepen.io/aki168/pen/poYeqao)|
| fanshu0303 | [CodePen](https://codepen.io/JuiHsuanLee0303/pen/bGZqmPq) |
| Yoshi | [CodePen](https://codepen.io/yoshiyyc/pen/xxBrKpY) |
|Snorlax|[HackMD](https://hackmd.io/@snorlaxpock/ryOINV5tT)|
|kevinhes|[CodePen](https://codepen.io/kevinhes/pen/Babdzpo?editors=0011)|
|Nick Lin|[CodePen](https://codepen.io/NickLinP/pen/zYbdPBp?editors=1111)|
| Han | [HACKMD](https://hackmd.io/@laihan/B18o2EaKa) |
| Jay | [CodePen](https://codepen.io/jayredk/pen/mdoBeNJ?editors=0010)
| 大衛 | [CodePen](https://codepen.io/exnsrpjc/pen/oNVpNRP?editors=1011)
| AmberL | [CodePen](https://codepen.io/autum55853/pen/ZEPaMbX)
| Eileen | [CodePen](https://codepen.io/Eileen-io/pen/OJqzKoM)
| 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/wvOjpjb?editors=1010)
| 阿鬥鬥 | [CodePen](https://codepen.io/yvonne217/pen/bGZMPbq)
|Tori|[HackMD](https://hackmd.io/OAdkiOH-S_WkD-LF6IONVA?view)|
Sign in with Wallet
Connect another wallet