函式 function

為什麼需要學函式？ 其實就是希望一連串的程式都可以包裝成指令。如上圖的機器人，如果沒有下指令的話，他不知道該做什麼事。若透過函式的方式把一連串的程式碼變成一個指令，就可去執行。

函式寫法

我宣告一個變數 a，賦予值為 1 的數字型別

let a = 1;
console.log(a);  // 1

假設機器人一早起床的早起活動指令。

1. 宣告一個函式，函式名稱為 morningAction
2. 執行「大括號」內的資訊

function morningAction(){
  console.log('起床');
  console.log('刷牙');
  console.log('洗臉');
  console.log('出門');
}
morningAction();  // 起床 刷牙 洗臉 出門

函式裡面仍可以執行函式

好處 : 有很常見、很重複的程式，可利用「函式裡面仍可以執行函式」去執行，方便在函式裡做管理。

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

函式參數介紹

1. 宣告一個名稱 a 的函式，裡面有 num 的參數，大括號內顯示執行內容。
2. 當函式執行時，參數帶入函式內，且參數只存活在「大括號」裡，隨著函式執行結束後，參數 num 就不存在了。

function a(num){     // 參數就被賦予數字型別
  console.log(num);
}
a(1);   
a(3);

a(1); 把 1 的數值帶到 (第 1 行) 參數上，就可以在大括號內執行參數。

參數寫法 — 參數只存活在大括號

只可以在函式內呼叫參數，函式執行完後，參數就消失了。

ReferenceError 錯誤碼 : 這類錯誤就要多檢查傳值錯誤，或者某些值不存在。

function a(num, num2){
  console.log(num);
  console.log(num2);
}
a(1, 2);
console.log(num);  // 跳錯，(ReferenceError) num is not defined

參數寫法 — 兩個數字相加工具

在這個 function 裡註冊了 add 這個函式

function add (num, num2){
  console.log(`您加總的數字為 ${ num + num2}`);
}
add(1, 2);  // 您加總的數字為 3

return 寫法

return 回傳 : 把值回傳到外層 (並透過變數賦予上去)

使用 return 把運算後的結果回傳出來

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

let markTotalScore = calcTotalScore(60, 40);
console.log(markTotalScore);  // undefined

我宣告一個變數，變數名稱是 markTotalScore
「等號 =」 : 賦予值
函式執行完後，使用 return 把運算結果回傳

function calcTotalScore (chineseScore, mathScore){
  return chineseScore + mathScore;
}

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

let tomTotalScore = calcTotalScore(100, 100);
console.log(`Tom 的總分為 ${ tomTotalScore }`);  // Tom 的總分為 200

return 宣告 let

• 參數只存活在大括號裡
• 使用 let 宣告變數，也只存活在 block 作用域裡
• 函式執行完後，所有參數都消失，只留下 return 的結果

ReferenceError 錯誤碼 : 這類錯誤就要多檢查傳值錯誤，或者某些值不存在。

function calcTotalScore (chineseScore, mathScore){
  let totalScore = chineseScore + mathScore;
  return totalScore;
}
console.log(totalScore);   
// 跳錯，(ReferenceError) totalScore is not defined

return 可以有多個

return : 可以回傳，同時也中斷函式的執行，後面的程式就不跑了。

function calcTotalScore (chineseScore, mathScore){
  let totalScore = chineseScore + mathScore;
  return totalScore;     // 只執行到這一行
  
  console.log('hello');  // 後面的程式就不跑了
  return 3;              // 後面的程式就不跑了
}

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

✏️ 範例

function checkScore(score){
  if (score >= 60){
    return '及格';
  } else {
    return '不及格';
  }
  console.log('尾巴');  // 這行不會執行
}
let tomScore = checkScore(60);
console.log(tomScore);   // 及格
let markScore = checkScore(30);
console.log(markScore);  // 不及格

✏️ 範例 - 判斷是否為偶數

寫程式沒有最佳辦法，只有當下最適合

小步測試，反覆驗證

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

let 全域與區域變數邏輯

✏️ 範例 — 記錄總共計算了幾次

先宣告變數 count，初始值為 0，拿來記錄執行次數用的

let count = 0;
function test(){
  count += 1;
  console.log('test1');
}
test();
test();
console.log(`您總共記錄了 ${count} 次`);  // 您總共記錄了 2 次

套用到前例的程式碼

let count = 0;
function checkNumber(myInput){
  count += 1;
  if(myInput % 2 == 0){
    return '是偶數'
  } else {
    return '不是偶數'
  }
}
let checkSevenNumber = checkNumber(7);  
console.log(checkSevenNumber); // 不是偶數
console.log(`您總共記錄了 ${count} 次`);  // 您總共記錄了 1 次

若把 count += 1; 放至 return後面，則就不會記錄次數了。 (如下程式碼)
因為只要碰到 return 就中斷程式回傳，不會再執行後面的程式碼。

let count = 0;
function checkNumber(myInput){
  if(myInput % 2 == 0){
    return '是偶數'
  } else {
    return '不是偶數'
  }
  count += 1;
}
let checkSevenNumber = checkNumber(7);  
console.log(checkSevenNumber); // 不是偶數
console.log(`您總共記錄了 ${count} 次`);  // 您總共記錄了 0 次