---
# System prepended metadata

title: 函式function

---

# 函式function
> 設定一個指令重複執行去做使用

## 函式寫法教學

```javascript=
//機器人-早起活動-起床刷牙早起出門
function morningAction(){
    console.log('起床');
    console.log('刷牙');
    console.log('洗臉');
    console.log('出門');
}//到這裡只是註冊函式
morningAction();//這裡才是執行函氏大括號裡面的內容
//會印出
//起床 刷牙 洗臉 出門
```

### 註冊多組函式流程
```javascript=
function morningAction(){
    console.log('起床');
    console.log('刷牙');
    console.log('洗臉');
    console.log('出門');
}
function nightAction(){
    console.log('回家');
    console.log('刷牙');
    console.log('洗臉');
    console.log('睡覺');
}
morningAction();
nightAction();
//會印出
//起床 刷牙 洗臉 出門 回家 刷牙 洗臉 睡覺
```

### 函式裡面仍可以執行函式
```javascript=
function morningAction(){
    console.log('起床');
    cleanHead();//若沒加小括號，他只會在記憶體運行，不會秀出來，所以依定要加小括號
    console.log('出門');
}
function nightAction(){
    console.log('回家');
    cleanHead();
    console.log('睡覺');
}
function cleanHead(){
    console.log('刷牙');
    console.log('洗臉');
}
morningAction();
nightAction();
//會印出
//起床 刷牙 洗臉 出門 回家 刷牙 洗臉 睡覺
//東西很常重複可另外建一個函式出來
```

### 函式參數介紹（小括號裡面的值）
```javascript=
function(num){
    console.log(num);
}
a(1);
//會印出 1
//num和let const不大一樣，是函式裡面的參數
//當這個函式{大括號}結束之後，console.log(num)裡面的參數就會跟著消失了
//num就不會存在了
```

### 參數可放 2 個以上

```javascript=
function(num,num2){
    console.log(num);
    console.log(num2);
}
a(1,2);

//會印出 1 2
```

:::warning
參數只存活在大括號
:::

### 參數寫法-兩個數字相加工具
```javascript=
//透過函式
//函式 兩個數字相加工具
function add(num1,num2){
    console.log(`您加總的數字為${num1+num2}`)
}
add(2,3);//印出 "您加總的數字為5"
//因為我們已經註冊了一個function add的函式進去，
//因此我們可以透過add(4,5)直接執行函式
```

### 參數寫法-全域變數
```javascript=
//透過函式
//函式 兩個數字相加工具
let b = "qq"
function add(num1,num2){
    console.log(`您加總的數字為${num1+num2}`)
    console.log(b);
}
//let b = "qq" 放這裡也能印出來
add(2,3);
//印出 "您加總的數字為5" "qq"
//在大括號裡面讀取不到資料，就會往外找有沒有相對應的賦予值
```

### return 寫法教學
> 希望資料回傳到外層就可使用return



```javascript=
//國文分數＋數學分數的總計算機
function calcTotalScore(chineseScore,mathScore){
    //console.log(chineseScore+mathScore);這只會印出來
    return chineseScore + mathScore;
}

let markTotalScore = calcTotalScore(40,60);
//宣告markTotalScore變數，
//賦予右邊的值(函式須先執行完，然後使用return把運算結果傳到這)
```

### return 宣告 let
```javascript=
//國文分數＋數學分數的總計算機
function calcTotalScore(chineseScore,mathScore){
    //console.log(chineseScore+mathScore);
    let totalScore = chineseScore + mathScore;
    //運算式若太長可以在這裡進行變化
    //只要記得{大括號}中的最後一句要使用return回傳結果即可
    return totalScore;
}

let markTotalScore = calcTotalScore(40,60);
console.log(`Mark的總分數為${markTotalScore}`)
```


### return 可以有多個
> return 可以中斷函式的執行
```javascript=
//檢查學生成績是否及格的函式

function checkScore(score){
    if(score>=60){
        return "及格";
        //return 會中斷函式的執行，因此執行到這會結束，不會印出“尾巴”
    }else{
        return "不及格";
    }
    console.log("尾巴");
}

let tomScore = checkScore(60);
console.log(tomScore);
//會印出“及格”
```

## 箭頭函式寫法
```javascript=
/* 傳統函式 */
let cat = function(name){
	return ` 我的貓貓叫 ${name} `
}
console.log (cat('Miu'))
	// " 我的貓貓叫 Miu "


/* 箭頭函式 */
let arrowCat = (name) => {
	return ` 我的貓貓叫 ${name} `
}
console.log (arrowCat('Miu'))
	// " 我的貓貓叫 Miu "
```

宣告變數、並賦予它函式，我們稱這段 code 為「 函式表達式 」
上面範例都屬於 函式表達式。

　

其實我們還可以把那個箭頭函式再簡寫：
```javascript=
/* 箭頭函式簡寫 */
let arrowCat = (name) => ` 我的貓貓叫 ${name} `
console.log (cat('Miu'))
	// " 我的貓貓叫 Miu "
```

什麼！ 大括號直接拿掉了嗎 Σ(´□`;)

這個寫法是 函式表達式限定！
箭頭後面不加大括號的話、就是 return 的意思。

所以我們 console 得到的結果都是一樣滴。

上面那段code 還可以再簡寫喔 ！

```javascript=
/* 箭頭韓式簡寫 */
let arrowCat = name => ` 我的貓貓叫 ${name} `
console.log (cat('Miu'))
	// " 我的貓貓叫 Miu "
```
看得出來差在哪嗎？
把參數 name 的小括號拿掉惹。

但要注意 只有一個參數時、才能把小括號拿掉喔。
啊如果今天沒有參數時、小括號還是要裝上去 ! 

### 判斷是否為偶數 - 畫流程圖
:::success
* 寫程式沒有最佳解法，只有當下最適合
* 小步測試，反覆驗證
* 消除重複的 code
:::