---
# System prepended metadata

title: "\U0001F3C5 3/12 (五) 每日任務"
tags: [JS 直播班 - 2021 春季班]

---

# 🏅 3/12 (五) 每日任務
###### tags: `JS 直播班 - 2021 春季班`

function 觀念總複習
---
建議同學都將以下程式碼貼入 CodePen 執行、觀察結果。

### 觀念一: 函式寫法教學 ([參考章節](https://courses.hexschool.com/courses/1289881/lectures/30669708))

```js=
// 步驟一: 命名函式 (在此 morningAction 是自定義的名稱)
function morningAction() {
    // 定義函式執行內容
    console.log("刷牙");
    console.log("洗臉");
} 

// 步驟二: 呼叫函式 (函式可以重複使用)
morningAction();
morningAction();
```

### 觀念二: 函式裡面仍可以執行函式 ([參考章節](https://courses.hexschool.com/courses/1289881/lectures/30669758))

```js=
function morningAction() {
    // 函式內部也可以呼叫其他函式，好處是可以重複利用程式碼、簡潔版面。
    cleanHead();
    console.log("出門");
} 
function cleanHead() {
    console.log("刷牙");
    console.log("洗臉");
} 
morningAction();
```

### 觀念三: 函式參數觀念 ([參考章節1](https://courses.hexschool.com/courses/1289881/lectures/30669761)、[參考章節2](https://courses.hexschool.com/courses/1289881/lectures/30669762))

1. 函式可以帶入自定義的參數 (在此為 num1, num2)，並在呼叫函式的時候傳入。
```js=
function callNum(num1, num2){
    let total = num1 + num2;
    console.log(total);
}
// num1 等於 1, num2 等於 2
callNum(1, 2);
// num1 等於 2, num2 等於 4
callNum(2, 4);
```

2. 參數只存活在大括號。

```js=
function callNum(num){
    // 在此可以成功呼叫 num
    console.log(num);
}
callNum(1);
// 函數外部不可以呼叫 num，這行會報錯
console.log(num);
```

### 觀念四: 函式的 return 觀念 ([參考章節1](https://courses.hexschool.com/courses/1289881/lectures/30669766)、[參考章節2](https://courses.hexschool.com/courses/1289881/lectures/30669770))
１. 函式可以用 return 回傳一個值，並可以將該值賦予給其他變數。
```js=
function calcTotalScore(chineseScore, englishScore){
    let total = chineseScore + englishScore;
    return total;
}

// 將 calcTotalScore 的回傳值賦值給 markScore。
let markScore = calcTotalScore(60, 50);
console.log(markScore);
```

2. return 會中斷函式執行，可以有多個 return、搭配 if else 做使用。
```js=
function calcTotalScore(chineseScore, englishScore){
    let total = chineseScore + englishScore;
    
    // 在此因為 total > 100，所以在第一個 if 函式就中斷了
    if(total > 100){
        return `總分 ${total}，做的好啊 mark`;
    }else{
    	return `總分 ${total}，考得不是很好 mark`;
    }

    // 以下的 return 都不會執行
    return chineseScore;
    return englishScore;
}

let markScore = calcTotalScore(60, 50);
console.log(markScore);
```

問題
---
請親自撰寫一次以上觀念一 ~ 觀念四的程式碼，並可以用註解強化知識點。


回報流程
---
將答案寫在 CodePen 並複製 CodePen 連結貼至 thread 中回報就算完成了喔! 解答請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/6UoJVtD.png)