---
# System prepended metadata

title: 第四週共筆筆記 - <br> 10/21 第四堂：函式設計之術
tags: [週五正課篇, 2022JS直播班, 六角學院]

---

# 第四週共筆筆記 - <br> 10/21 第四堂：函式設計之術
###### tags: `週五正課篇`、`六角學院`、`2022JS直播班`

[講義連結](https://hackmd.io/8_f3hGxvQJqZnvMZCun_3A)
### 共筆簽到區


### 正課開始！~~~~

> 函式
> 設計成指令，在對的時候去執行



#### if 與 function 的差別
- 直接寫 if 的話，.js 裡只會執行一次
- 寫 function 的話，可以依照自己需求，執行多次執行指令


```javascript!

//宣告函式
function moriningAction(){
    console.log("起床");
    console.log("刷牙");
    console.log("洗臉");
    console.log("出門");
}

function nightAction(){
    console.log("回家");
    console.log("刷牙");
    console.log("洗澡");
    console.log("睡覺");
}


//執行函式
morningAction(); 

//上面執行完後，再執行這一行函式
nightAction();  

```
![](https://i.imgur.com/ROWQi6l.png)


> 執行函式中，可以再執行其他函式！

* 整合函式中重複的部分

1.執行`function morningAction()`
2.遇到`bathAction()`
3.先執行`function bathAction()`
4.再回來執行剩下的`function morningAction()`

```javascript!

//宣告函式
function moriningAction(){
    console.log("起床");
    bathAction();  
    //跑到這裡，會先暫停 morningAcrion()，跑去執行 bathAction()，執行完以後，再回來繼續執行
    console.log("出門");
}

function bathAction(){
    console.log("刷牙");
    console.log("洗澡");
}


//執行函式
morningAction(); 

```

#### 參數寫法介紹 (參數、return)

###### 參數
號碼呼叫器

```javascript!
function callNum(){
    console.log(`你目前呼叫的數字是10號`)
}
callNum();
```
Q:console.log 輸出是什麼？
1. undefinde
2. 你目前呼叫的數字是10號
3. 沒有任何東西

A: 2



```javascript!
function callNum(){num
    console.log(`你目前呼叫的數字是${num}號`)
}
callNum(5);
```
Q:console.log 輸出是什麼？
1. undefinde
2. 你目前呼叫的數字是5號
3. 沒有任何東西

A: 2

* 函式裡面帶參數
callNum(5) 小括號裡面，填入想放的參數
傳入 參數 給 function 
有點像是
```javascript!
let num = 5;
```
![](https://i.imgur.com/BevhbV6.png)



* 參數不限制只能帶一個，能帶很多個

```javascript!
function add(num1,num2){
    console.log(num1,num2);
}
add(5,10);
```

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

答案是：3

### 舉例 : 相加器
`可使用兩個參數`
```
function add(num1,num2){
  console.log(num1 + num2);
};

add(5,5); 
add(10,30); 
```
`參數只活在大括弧內，執行後就死掉了，所以不能在呼叫函式後，繼續在函式外部呼叫參數`
```
function add(num1,num2){
  console.log(num1 + num2);
};

add(5,5); 
console.log(num1 + num2);
// 會變成num1 is not defined
```




> undefinded(有宣告變數，但沒賦值)
>  vs 
>  not definede (連變數都沒有宣告)




##### return (中斷的含意)
>最後一個語法
```javascript
function add(num1,num2){
  return num1 + num2;
};

let add1 = add(5,5);
let add2 = add(10,30);
console.log(add1, add2);
```
![](https://i.imgur.com/LlKX958.png)


```javascript
function add(num1,num2){
    console.log(1);
  return num1 + num2;
    console.log(2);
};

let add1 = add(5,5);
let add2 = add(10,30);
console.log(add1, add2);
```
Q:會出現多少個 console.log?

|| A：只有3個console.log|| 

||why:
因為 return 代表 運算結束，就會結束執行function||

```javascript
function add(num1,num2){
    if(2<1){
        return num1+num2;
    }else{
        return 100;
    }
    console.log('qq');
};

let add1 = add(5,5);
let add2 = add(10,30);
console.log(add1, add2);
```
Q:add1, add2 代表多少？
||A : 100 100 
why: 因為遇到return後面函式不執行||

* console.log 印出畫面 除錯而已
* return 才會回傳值

> 函式宣告
> 參數 - 外部value 帶入 fun
> return - 將裡面的直往外傳
> return - 可以有多個

#### KATA
拳路  一套流程，一步一步實作練習，讓功力更好
讓學生增加熟練度
* 程式練習
* 練習歷程
* 發現盲點 解決問題

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