# <font class="h2">函式是什麼?</font>

###### tags: `javascript`
<style>
.h2 {
background: linear-gradient(135deg,#fff,#537479) ;
color: #537479;
display:block;
padding: 6px 5px;
border-radius: 4px;
}
.h3 {
background: linear-gradient(180deg,#fff 50%,#c9d5d4) ;
color: #537479;
display:block;
padding: 6px 5px;
border-bottom: 3px solid #537479;
}
.h4 {
color: #537479;
font-weight:bold;
font-size:1.1em;
}
</style>
<br>


「函式」指的是將一或多段程式指令包裝起來，可以==重複使用，消除重複性==也方便維護。
:::info
輸入→編譯(函式)→輸出
:::
<br>

### <font class="h4">➤執行函數</font>

function greet(){
console.log('歡迎光臨!')
console.log('請問你要點些什麼?')
}
// function為宣告函式，greet為函式名稱

greet();
//執行函式得到解果

如果指令很重複，就可以利用函式再帶函式去執行

function morningAction(){
    console.log("起床");
    cleanHead();
    console.log("睡覺");
}
function nightAction(){
    console.log("回家");
    cleanHead();
    console.log("睡覺");
}
function cleanHead(){
    console.log("刷牙");
    console.log("洗臉");
}
morningAction();//"起床""刷牙""洗臉""出門"

<br>

### <font class="h4">➤函式參數</font>

範例一:

function a(num){
    console.log(num);
}
a(1)//1

範例二-兩個數字相加小工具:

function count(oneNum,twoNum){
    let total = oneNum +twoNum;
    console.log("總價格:"+total+"元")
}

count(8,2);
//帶入值得到結果

<br>

### <font class="h3">回傳return</font>
回傳是將「控制權」從函數轉移到其「呼叫方」
return可以回傳值，也可以回傳物件

:::info
:bulb:參數只會存活在大括號裡

function calcTotalScore(chineseScore,mathScore){
    console.log(chineseScore+mathScore);
}
let markTotalScore =calcTotalScore(40,60);
console.log(markTotalScore);//undefined

使用return

function calcTotalScore(chineseScore,mathScore){
    return chineseScore + mathScore;
}
let markTotalScore =calcTotalScore(40,60);
console.log(markTotalScore);//100

:::
範例:

function getHamPrice(num){
    let hamPrice = 50;
    let total = hamPrice * num;
    return total;
}

var tom = getHamPrice(10);
console.log(tom);//得到值為500

:::info
**return與console.log的差異**
- return回來的值，我們是可以做運用的，有實際的控制權。如果我們需要對function所回傳的值做後續的處理，那麼就必須要return回傳值。
- console.log比較像是查看狀態，檢視(印出)我們想知道的環節、輔助我們debug
:::
<br>

### <font class="h4">➤return 可以有多個</font>

:::info
:bulb:return可以中斷函式執行，後面的程式就不跑了
:::

function calcTotalScore(chineseScore,mathScore){
    let totalScore = chineseScore + mathScore;
    return totalScore;
    console.log('hello')//第一個return之後的程式都不會跑
    return 3;
}
let tomTotalScore = calcTotalScore(100,100);
console.log('Tom的總分為${tomTotalScore}');

return 可以有多個範例

function checkScore(score){
    if(score >= 60){
        return'及格';
    }else{
        return'不及格';
    }
}

let tomScore = checkScore(60);
console.log(tomScore);

範例-偶數判斷:

function checkNumber(myInput){
    if(myInput%2 == 0){
        return"是偶數";
    }else{
        return"不是偶數"
    }
}
let checkSevenNumber = checkNumber(7);
console.log(checkSevenNumber)

<br>

### <font class="h4">➤所有函式一定會回傳值</font>
所有函式一定會回傳值，沒有return的話還是會傳undefined

var a = {
  name: 'a'
}

function changeData(param) {
  param.name = 'b'

}
var b = changeData(a)
console.log(b)  //undefined

### <font class="h3">let 全域與區域變數</font>
:arrow_right:[範圍鍊](https://hackmd.io/@grayshine/SJx6xzlDt)

如果內層找不到變數可以使用，就會向外查找
<br>

計算次數功能範例

let count = 0;

function test(){
    count+=1;
}
test();
console.log(`目前您紀錄了${count}次`)//1

let c =4;
function numAdd(a,b){
    let c =3;
    console.log(c);
}
console.log(c);//4，let宣告的變數作用域在區塊作用域內，外面讀不到

:::info

function fn(){
    a = 0;
}
console.log(a);
//會得到a為0

let c = 4;
function numAdd(a,b){
    c =10;
}
console.log(c);//4

沒宣告的話，會是全域「屬性」
:bulb:沒有宣告的話，會造成全域汙染，變得髒。要盡可能去宣告變數
:::

<br>

:::info

let c = 4;
function fn(){
    let c = 2//2會被8覆蓋
    c = 8;
}
console.log(c);//4

:bulb:先找碗內，再找碗外
:::
<br>

### <font class="h4">➤範例</font>
**範例一_字串相加**

//input
talk("早上好");
talk("晚上好");

// output
// "hi，早上好"
// "hi，晚上好"

:::spoiler

function talk(message){
    console.log('hi',message);
}

talk("早上好");
talk("晚上好");

:::

<br>

**範例二_數字處理**

let data = 0;
//input
count(2);
count(3);
count(5);

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

:::spoiler

let data = 0;
function count(num){
    data+=num;
    console.log(data);
};
count(2);
count(3);
count(5);
//函數可以幫外部(全域)去累加資料

:::
<br>

**範例三_數字**

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

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

:::spoiler

:::
<br>

**範例四_兩位數四舍五入**

twoFixed(1.8888) 
twoFixed(3.1234)

// output
// 1.89
// 3.13

:::spoiler

function twoFixed(num){
    console.log(num.toFixed(2));
}
twoFixed(1.8888) 
twoFixed(3.1234)

:::
<br>

**範例五_BMI**

calcBmi(178,69) 

//output
//21.78

:::spoiler

//BMI = 體重(公斤) / 身高2(公尺2)
function calcBmi(height,weight){
    let bmi = weight/(height/100)**2;
    console.log(bmi.toFixed(2));
}
calcBmi(178,69)

:::
<br>

**範例六_檢查是否需要帶雨具+if**

checkWeater("雨天"); // 要帶雨具
checkWeater("晴天"); //不用帶雨具

:::spoiler

function checkWeater(weather){
    if(weather == "雨天"){
        console.log("要帶雨具");
    } else if (weather == "晴天"){
        console.log("不用帶雨具");
    };
    
};
checkWeater("雨天"); // 要帶雨具
checkWeater("晴天"); //不用帶雨具

:::
<br>

**範例七_增加陣列資料**

let data = [];
add("hello"); 
add("你好嗎？"); 
// output 
// ["hello","你好嗎？"]

:::spoiler

let data = [];
function add(str){
    data.push(str)
    console.log(data);
}
add("hello"); 
add("你好嗎？"); 

:::

**範例八_增加陣列物件資料**

let data = [];
add("洧杰","男生"); 
add("葉子","女生"); 

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

:::spoiler

let data = [];
function add(name,sex){
    let obj = {};
    obj.name = name;
    obj.sex = sex
    data.push(obj);
    console.log(data);
}
add("洧杰","男生"); 
add("葉子","女生");

:::
<br>

**範例九_取物件資料**

const bmiStatesData = {
  "overThin": {
    "state": "過輕",
    "color": "藍色"
  },
  "normal": {
    "state": "正常",
    "color": "紅色"
  }
}
checkBmiStates("overThin"); //你的體重過輕，指數為藍色
checkBmiStates("normal"); //你的體重正常，指數為紅色

:::spoiler

const bmiStatesData = {
    "overThin": {
        "state": "過輕",
        "color": "藍色"
    },
    "normal": {
        "state": "正常",
        "color": "紅色"
    }
}
function checkBmiStates(str){
    body = bmiStatesData[str];
    console.log()
    console.log(`你的體重${body.state}，指數為${body.color}`);
}
checkBmiStates("overThin");
checkBmiStates("normal");

:::