---
# System prepended metadata

title: 第四堂：函式設計之術
tags: [JS 直播班 - 2024 秋季班]

---

# 第四堂：函式設計之術

## 開課提醒
1. 錄影
2. 下週一提供每日助教~~爆肝~~發問服務！10/21(一)-11/29（五） 每週一到週五於 Discord 每日活動頻道
    ![](https://hackmd.io/_uploads/SkF0-c7f6.png)
3. [第三週週報](https://liberating-turtle-5a2.notion.site/EP3-7dbcf7e840014ee59e3c95871c508117?pvs=4)
3. 中場休息公布部分獎品

## 今日上課知識點
1. 函式
2. 邏輯題目練習
---

## 函式 function 
將一整組的功能程式碼寫成一個函式，之後可以重覆再使用

**函式語法：**

- 函式宣告
    ```javascript
    function 函式名稱(){
      console.log('函式');
    }
    ```
- 函式呼叫（執行）
    ```javascript
    函式名稱()
    ```
- 範例
    ```javascript
    function callNum(){
      console.log('呼叫一號') 
    }
    callNum();
    ```
**函式參數：**
參數是函式與外部環境溝通的管道

- 參數寫法
    ```javascript
    function callNum(num){
      console.log(`呼叫${num}號`) 
    }
    callNum(5); // 呼叫5號
    ```
- 參數只能在 function 大括號內使用
    ```javascript
    function callNum(num){
      console.log(`呼叫${num}號`) 
    }
    callNum(5); // 呼叫5號
    console.log(`呼叫${num}號`); // num is not defined
    ```
- 帶多個參數，參數是有順序的！
    ```javascript
    function addNum(num1, num2){ 
      console.log(num1, num2); // 1, 2
    }

    addNum(1,2)
    ```

**function return：**
將函式內的東西傳到函式外面，通常會回傳函式執行完的結果

- return
    ```javascript
    function addNum(num1, num2){
      return num1+num2;
    }

    const num = addNum(1,2);
    console.log(num); // 3
    ```
- return 會中斷函式
    ```javascript
    function addNum(num1, num2){
        console.log(1);
        return num1+num2;
        console.log(2);
    }

    addNum(1,2); 
    ```
- return 與 console.log 寫法差異
    ```javascript
    function addNum(num1, num2){
      console.log(num1+num2);
    }

    const num = addNum(1,2);
    console.log(num); // undefined
    ```
    > console.log 只是將結果「印」出來，並沒有把結果帶出函式外
      console.log 是 開發時過程中使用，正式專案內不會出現


## if 與 function
```javascript
function addNum(num1, num2){
  if (2>1) {
	return num1+num2;
  } else {
	return 100;
  }
}
addNum(1,2); // 3
```
> 直接寫 if 的話，js 裡只會執行一次
  寫 function 的話，可以依照自己需求，執行多次執行指令

## 抽考一
* [46~50題目](https://chalk-freedom-ec6.notion.site/Part-1-46-50-3b71ce9efb0d4f7c9803961e27a39264)
<!-- 解答：32122 -->

## input output 練習
* [示意流程圖](https://miro.com/app/board/uXjVLZnW4kU=/)


### 題目列表
**字串相加**
``` javascript
//input
talk("早安");
talk("晚安");

// output
// "hi，早安"
// "hi，晚安"
```

<!-- 解答：
```javascript
function talk(text){
  return `hi，${text}`;
}
``` -->

**數字處理**
``` javascript
let data = 0;

//input
count(2);
count(3);
count(5);

// output
//2
//5
//10
```

<!-- 解答：
```javascript
function count(num) {
  return data+=num
}
``` -->


**數字**


``` javascript
//input
count(2); 
count(3); 
count(5); 

// output
// 4
// 9
//25
```

<!-- 解答：
```javascript
 function count(num) {
   return num*num
 }
```
 -->
 
**兩位數四舍五入**
``` javascript
//input
twoFixed(1.8888) 
twoFixed(3.1234)

// output
// 1.89
// 3.12
```

<!-- 解答：
``` javascript
function twoFixed(num){
  return Number(num.toFixed(2))
}
``` -->

**BMI** 

``` javascript
//input
calcBmi(178,69) 

//output
//21.78
```

<!-- 解答：
function calcBmi(height, weight){
  return Number((weight / (height/100)**2).toFixed(2))
} -->

**檢查是否需要帶雨具+if**

``` javascript
//input
checkWeather("雨天"); 
checkWeather("晴天"); 

// output
// 要帶雨具
// 不用帶雨具
```

<!-- 解答：
``` javascript
function checkWeather(status){
  if(status === "雨天") {
   return '要帶雨具'
  } else if(status === "晴天"){
    return '不用帶雨具'
 }
} 
```
-->

**增加陣列資料**

``` javascript
let data = [];

//input
add("hello"); 
add("你好嗎？"); 

// output 
// ["hello","你好嗎？"]

```

<!-- 解答：
``` javascript
function add(str){
  data.push(str)
  return data
}
``` -->

**增加陣列物件資料**

``` javascript
let data = [];

//input
add("洧杰","男生"); 
add("葉子","女生"); 

// output 
//[
// {name:"洧杰",gender:"男生"},
// {name:"葉子",gender:"女生"}
//]
```

<!-- 解答：
``` javascript
function add(name, gender){
    const obj = {};
    obj.name = name;
    obj.gender = gender;
    data.push(obj);
    return data
}
``` -->
**取物件資料** 
``` javascript
const bmiStatesData = {
  overThin: {
    state: "過輕",
    color: "藍色"
  },
  normal: {
    state: "正常",
    color: "紅色"
  }
}
// input
checkBmiStates("overThin"); 
checkBmiStates("normal"); 

// output 
// 你的體重過輕，指數為藍色
// 你的體重正常，指數為紅色
```

<!-- 解答：
``` javascript
function checkBmiStates(status){
  return `你的體重${bmiStatesData[status].state}，指數為${bmiStatesData[status].color}`
}
``` -->

## 抽考二
* [51~55題目](https://chalk-freedom-ec6.notion.site/Part-2-51-55-c6e273e42f314308872fc098267cade4?pvs=4)

<!-- 解答：22213 -->

* [56~60題目](https://chalk-freedom-ec6.notion.site/Part-3-56-60-5ee63fa6f38140228f91312ff2d8513a?pvs=4)

<!-- 解答：12331 -->
---

## 本週任務
1. 主線任務
    達求職門檻工程師水準等級為 10 分鐘，每日練一遍當起手式，10/21(ㄧ) 開始到 11/3(日) 每天早上 9:05 發 discord 訊息，張貼自己的練功情況

    ```
    此為 BMI kata 分享區，請在討論串 上分享：
    1.你今天 BMI kata 練習第幾遍？
    2.覺得學習過程中，哪些細節可以優化？
    3. 下次練習，你想刻意練習哪些內容？
    ```
    > [洧杰練 Vim 範例](https://www.youtube.com/watch?v=eRLAKhi-6HE&list=PL3TsqJC8EmwTSlkFE7Zu-Bt6HqDG1fH_U)
3. 小組任務
4. [週末任務](https://discord.com/channels/801807326054055996/1296682944424972388/1296682947096875049)：請出一題 function input、output 題目，tag 上一位學生解題