# 第四週課程重點筆記
###### tags: `JS 課程重點筆記` `2021` `JS直播班` `秋季班` `六角學院`
## :mag_right: 函式的功能
:robot_face: 設定函式就如同設定指令，類似於教機器人做事的步驟。
:robot_face: 由於函式可以重複被呼叫的特性，當有需要被**重複使用**的步驟，就能考慮將程式碼包裝成函式。
```
差異比較：
函式可多次呼叫、重複執行，但 if 判斷式只會執行一次。
```
## :mag_right: HOW TO 宣告、呼叫函式
```
前情提要：
宣告函式概念類似於宣告變數 (函式與變數都屬於陳述式)，
宣告之後必須再度透過呼叫函式，它才會執行大括號內的指令，
反之就只會暫時存在記憶體中。
let a = 1;
console.log(a);
```
```javascript=
// 宣告 2 個函式
function morningAction(){
console.log('起床');
console.log('刷牙');
console.log('洗臉');
console.log('吃早餐');
console.log('出門');
}
function eveningAction(){
console.log('返家');
console.log('吃晚餐');
console.log('刷牙');
console.log('洗臉');
console.log('睡覺');
}
// 呼叫函式
morningAction();
eveningAction();
// 註：函式的小括號用來代入參數
```
## :mag_right: 函式與參數的關係：input & output
### 流程：輸入 :arrow_right: 編譯 :arrow_right: 輸出
```javascript=
function addNumber(a,b,c){
console.log(a+b+c);
}
addNumber(6,6,6);
//回傳 18
//輸入：參數(6,6,6)
//編譯：function
//輸出：console.log
```
## :brain: 函式的設計思考方法
:::success
:bulb: **以數字相減器為例：**
1. 先列出核心公式，即先找出一個算式確保「功能」的運作。
2. **SOP**：輸入(參數)、(function)編譯、輸出
:::
####
```javascript=
//STEP1 先寫出功能
//向函式許願：我想要一個有相減功能的酷東東
let a = 7;
let b = 2;
console.log(`a跟b相減的結果為${a-b}`);
//STEP2 找出變因
//變因即是參數，在範例中，變數 a 跟變數 b 就是變因
//STEP3 構思函式
//有了參數就可以製作函式
function minusNumber(a, b){
console.log(`a跟b相減的結果為${a-b}`);
}
minusNumber(3, 3);
//回傳 0
```
## :mag_right: 函式與變數
* let 跟 const 宣告的變數，作用域只限區塊作用域
```javascript=
let a = 4;
function num(){
let a = 3;
}
num();
console.log(a);
// 回傳 a 是 4
```
* 重新賦值：會先從內找，函式內找不到對應的變數，再往外找
```javascript=
let c = 8;
function addNum(a, b){
c = 9;
console.log(c);
// 回傳 c 為 9
}
addNum(4, 4);
console.log(c);
// 回傳 c 為 9;
```
* 函式內宣告過的變數，接受在函式內重新賦予值
```javascript=
let c = 3;
function addNum(a, b){
let c = 4;
c = 8;
console.log(c);
// 回傳 c 為 8
}
addNum(2,2);
console.log(c);
// 回傳 c 為 3
```
## :dart: 試題練習：函式的 input & output 執行資料處理
### :one: 函式處理字串
```javascript=
function talk(message){
console.log('hi，' + message)
}
//input
talk("早上好");
talk("晚上好");
// output
// "hi，早上好"
// "hi，晚上好"
```
### :two: 函式幫外部變數累加數字
```javascript=
let data = 0;
function count(num){
data+=num;
console.log(data)
}
//input
count(2);
count(3);
count(5);
//output
2
5
10
```
### :three: 函式取小數點後二位數
```javascript=
function twoFixed(num){
console.log(num.toFixed(2));
}
twoFixed(1.8888)
twoFixed(3.1234)
// output
// 1.89
// 3.12
```
### :four: 函式將字串儲存到陣列中
```javascript=
let data = []
function add(str){
console.log(data)
}
add("hello");
add("hello，你好嗎？");
//output
// ["hello"]
// ["hello，你好嗎？"]
// 這一題是字串資料直接推到陣列中
```
### :five: 函式將物件儲存到陣列中
```javascript=
let data = [];
function add(data1, data2){
let obj = {};
obj.name = data1;
obj.sex = data2;
data.push(obj);
console.log(data)
}
add("洧杰","男生");
add("葉子","女生");
// output
//[
// {name:"洧杰",sex:"男生"},
// {name:"葉子",sex:"女生"}
//]
// 這一題是物件推到陣列中
```
### :six: 函式從物件取值，再組出字串
```javascript==
const bmiStatesData = {
"overThin": {
"state": "過輕",
"color": "藍色"
},
"normal": {
"state": "正常",
"color": "紅色"
}
}
function checkBmiStates(str){
console.log(`
你的體重${bmiStatesData[str].state}，
指數為${bmiStatesData[str].color}`)
}
checkBmiStates("overThin"); //你的體重過輕，指數為藍色
checkBmiStates("normal"); //你的體重正常，指數為紅色
```
## :mag_right: 函式回傳值：return
函式內計算完後的結果，只會儲存在函式之內。
除非透過 **return** 回傳出去
```javascript=
function power(num){
console.log(num*num); //印出 25
}
let numNum = power(5);
console.log(numNum); //印出 undefined
```
### :arrow_heading_down: 若計算結果要傳送到指定位置，就用 return 傳到 function 外部。
```javascript=
function power(num){
return num*num // 25
}
let cacuNumber = power(5); //把函式運算結果存在變數才能 return 到 function 外
console.log(cacuNumber); //印出 25
```
### :arrow_heading_down: let 宣告的變數作用域在區塊作用域內，也要用 return 傳到 function 外部。
```javascript=
function addNum(a, b){
let totalNum = a + b;
return totalNum
}
const sum = addNum(5, 3);//把函式運算結果存在變數才能 return 到 function 外
console.log(sum) // 8
```
### :warning: return 結果後，函式就中止跳出
```javascript=
function power(num){
console.log(4)
if(num > 5){
console.log('2')
return 1
}else{
return 0
}
}
let numNum = power(5);
console.log(numNum);
```
## :mag_right: funtion & method 的差異
```javascript=
// function 寫法
funtion sayHelloInEnglish(){
console.log('Hello!')
}
// 呼叫 function
sayHelloInEnglish();
// method 寫法 (function 包在物件裡)
let sayHello = {
inEnglish: function(){
console.log('Hello!')
},
inChinese: function(){
console.log('你好')
},
inFrench: function(){
console.log('Bonjour!')
}
}
// 呼叫 function
sayHello.inFrench();
// 綁定監聽事件
const english = document.querySelector('.english')
const chinese = document.querySelector('.chinese')
const french = document.querySelector('.french')
// method in addEventListener
english.addEventListener('click', sayHello.inEnglish)
// 箭頭函示
chinese.addEventListener('click', ()=>sayHello.inChinese())
// function in addEventListener
french.addEventListener('click', function(){
sayHello.inFrench()
})
```
## :mag_right: funtion expression
```javascript=
const greeting = function(name){
console.log(`Hello, ${name}!`);
}
greeting('visitors');
```
## :mag_right: arrow function
```javascript=
// 1
const greeting = (name) => {
console.log(`Hello, ${name}!`);
}
// 2 ( ) 可簡化, 前提是參數只有一個
const greeting = name => {
console.log(`Hello, ${name}!`);
}
greeting('visitors');
// 3
const greeting = (time, name) => {
console.log(`Good ${time}, ${name}!`);
}
greeting('night', 'visitors');
```
Sign in with Wallet
Connect another wallet