---
robots: noindex, nofollow
tags: JavaScript
---

# JavaScript 基礎課程 (4)

## 上週課程提要
* Scope
<img src="https://ae01.alicdn.com/kf/H3806612bdb9d447397a49a3aad7dc70bf.jpg" />
* ESLint

## 今日進度
* Function（函式）
* 什麼是 `function`？
* 如何定義與呼叫 function
* 使用 function 的好處
* 資料型別：`undefined`

## Function（函式）

### 什麼是 function？
* 程式裡的小程式、一組共同執行的命令
* 想像成你要找一個機器人助手幫你做事
1. 先跟他講請他做「什麼事」
2. 口頭一步一步教他要依序做哪些事
3. 以後叫他做同樣的事，就直接說做某某事情，不用重新教一遍

### 構成 function 的四大元素
1. 名稱
2. 參數（parameter）
3. 要執行的程式碼
4. 回傳值

### 定義與呼叫 function

// 定義 function
function doSomething() {
  // 程式碼放在這邊。
  // 定義時，這些程式碼還不會執行。
  // 等到 function 被呼叫時，
  // 這些程式碼才會執行。
}

// 呼叫 function
doSomething();

> 我們常用的 `console.log()` 其實就是在呼叫一個內建的 function 哦！

#### 範例

function sayHi() {
  console.log('嗨！');
  console.log('我是 Arthur');
  console.log('很高興認識你');
}

sayHi();
// 嗨！
// 我是 Arthur
// 很高興認識你

### 有參數的 function

#### 範例

// 遇到 Chris
console.log('嗨！Chris');
console.log('我是 Arthur');
console.log('很高興認識你');

// 遇到 Aimi
console.log('嗨！Aimi');
console.log('我是 Arthur');
console.log('很高興認識你');

// 遇到 Gwen
console.log('嗨！Gwen');
console.log('我是 Arthur');
console.log('很高興認識你');

// 遇到 Bear
console.log('嗨！Bear');
console.log('我是 Arthur');
console.log('很高興認識你');

// --- 使用 function 改寫 ---

function sayHiTo(name) {
// 不一定要叫 name，可以自由命名
  console.log('嗨！' + name);
  console.log('我是 Arthur');
  console.log('很高興認識你');
}

sayHiTo('Chris');
sayHiTo('Aimi');
sayHiTo('Gwen');
sayHiTo('Bear');

使用 function 的好處：減少重複的程式碼，利於閱讀、維護。

### 有回傳值的 function

function getMyName() {
  return 'Arthur';
  console.log('What is my name?'); // 這行不會執行
}

let name = getMyName();
console.log(name) // 'Arthur'

保留字 `return` 只能在 function 裡面使用，它會**中斷** function 的執行並回傳後面接的值。

#### 回傳隨機小數的內建 function
[Math.random()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Math/random)：回傳介於 0 ~ 1（不包含 1）的隨機小數

let firstNumber = Math.random(); // 0.10352701228143335
let secondNumber = Math.random(); // 0.9552299608460508 

#### 範例：美元轉換成新臺幣

function turnUsdIntoTwd(usd) {
  // 假設匯率介於 25.0 ~ 25.9

  // 產生隨機匯率
  let exchangeRate = 25 + Math.random();

  // 將美元換算成新臺幣
  let twd = usd * exchangeRate;

  // 回傳計算結果
  return twd;
}

console.log(turnUsdIntoTwd(10));
console.log(turnUsdIntoTwd(25));

#### 多個參數

function calculate(a, b, c) {
  console.log('a + 1 = ' + (a + 1));
  console.log('b + 2 = ' + (b + 2));
  console.log('c + 3 = ' + (c + 3));
}

calculate(10, 20, 30);
// a + 1 = 11
// b + 2 = 22
// c + 3 = 33

#### 不傳參數

function print(value) {
  console.log(value);
}

print(); // undefined

如果沒有傳參數給 function 的話，那個參數預設是 `undefined`。

## 資料型別：`undefined`
表示變數「還沒」有值的狀態。若僅宣告變數不賦值，直接存取該變數的話，會得到 `undefined`。如果 function 沒有回傳值的話，它也會是 `undefined`。

// 宣告變數時賦值
let name = 'Arthur';

// 宣告變數時不賦值
let name; // undefined
name = 'Arthur'; // 'Arthur'

### 範例

function sayHiTo(someone) {
  let name = someone;

  if (name === undefined) {
    name = '';
  }

  console.log('嗨！' + name);
  console.log('我是 Arthur');
  console.log('很高興認識你');
}

### w6 作業
:::danger
繳交期限：**4/11（週日）23:59**
:::

#### 一、程式改寫
- 讓 ESLint 檢查 w4 作業，並修正它找出的錯誤
- 修正完 ESLint 檢查出的錯誤後，用 function 改寫
- 改寫完後，把 `src` 資料夾上傳到 Netlify，再把網址傳到 monday board 的 w6 程式作業

// 預期改寫完後會變成（名字可自由取）：
function evaluateCourse(parameterOne, parameterTwo, ...) {
  // ...

  // return ...
}

let isWorthIt = evaluateCourse(...);
console.log(isWorthIt); // true or false

##### 範例

function evaluateCourse(time, difficulty) {
  let shouldTakeThisCourse;

  if (time > 12 && difficulty < 3) {
    shouldTakeThisCourse = true;
  } else {
    shouldTakeThisCourse = false;
  }

  return shouldTakeThisCourse;
}

let isFirstCourseWorthIt = evaluateCourse(10, 1);
console.log(isFirstCourseWorthIt); // false

let isSecondCourseWorthIt = evaluateCourse(15, 2);
console.log(isSecondCourseWorthIt); // true

let isThirdCourseWorthIt = evaluateCourse(13, 5);
console.log(isThirdCourseWorthIt); // false

#### 二、透過 Slack 發問
可問上課的內容、跟 JavaScript 有關的問題、看不懂的 ESLint 錯誤訊息、寫作業遇到的困難⋯⋯等

---

<div style="display: flex; justify-content: space-between;">
<a href="https://hackmd.io/@gsscsid/javascript-basics-3">⬅️&nbsp;JavaScript 基礎入門課程 (3)</a>
<a href="https://hackmd.io/@gsscsid/javascript-basics-5">JavaScript 基礎入門課程 (5)&nbsp;➡️</a>
</div>