昨天還在幫哈納找朋友，

今天寫著寫著突然發現另一個問題。

假設我想讓哈納打招呼：

console.log("哈納：你好！");

小橘也要：

console.log("小橘：你好！");

布丁也要：

console.log("布丁：你好！");

……

等一下。

所以有幾隻貓，我就要複製幾次是不是？？？

這樣下去不是在寫 JavaScript，

是在練習 Ctrl + C、Ctrl + V 吧 ==

所以今天來看看可以把重複程式碼收起來的東西——

Function（函式）。

Function：這段先幫我包起來！

先來一個最簡單的：

function sayHello() {
  console.log("哈納：你好！");
}

目前只是把程式碼放進函式裡，

它還不會自己執行。

要真的叫它工作，還要：

sayHello();

結果：

哈納：你好！

所以目前可以先理解成：

function = 先把一段要做的事情包起來。

需要的時候再叫它出來。

很好。

終於不用一直複製貼上了 XD

可是不能每次都只有哈納吧？

如果寫：

function sayHello() {
  console.log("哈納：你好！");
}

那不管呼叫幾次：

sayHello();
sayHello();
sayHello();

都還是：

哈納：你好！
哈納：你好！
哈納：你好！

哈納：

到底要我打幾次招呼啦？？？

所以這時候可以加上參數。

function sayHello(name) {
  console.log(name + "：你好！");
}

接著：

sayHello("哈納");
sayHello("小橘");
sayHello("布丁");

結果：

哈納：你好！
小橘：你好！
布丁：你好！

欸～

這樣就方便多了。

name 就像先留一個位置，

等呼叫函式的時候再告訴它：

今天到底是哪隻貓要上班。

Function 還可以把結果還給我

假設今天想算兩個數字加起來：

function add(a, b) {
  return a + b;
}

使用：

const result = add(10, 20);

console.log(result);

結果：

30

這裡的：

return

就是把函式計算完的結果傳回來。

所以不是每個 function 都只能：

console.log();

它也可以真的算完東西之後，

把答案交回來。

昨天其實早就偷偷用過 Function 了

回頭看昨天的 map()：

const newCats = cats.map(function(cat) {
  return cat.name;
});

欸？

這裡不是就有：

function(cat)

嗎？

原來昨天就已經偷偷在用函式了。

只是當時我的注意力全部都在：

哈納到底有沒有被找到 XD

還有另一種寫法：箭頭函式

JavaScript 也很常看到這種：

const sayHello = (name) => {
  console.log(name + "：你好！");
};

使用方式一樣：

sayHello("哈納");

結果：

哈納：你好！

這就是 Arrow Function（箭頭函式）。

甚至如果內容很簡單，還可以寫成：

const sayHello = name => console.log(name + "：你好！");

第一次看到真的會覺得：

括號呢？？function 呢？？怎麼突然剩一支箭？？？

但看久之後其實滿常遇到的。

今天先知道它跟函式有關就好。

不要一次把自己嚇跑 XD

今天先這樣記

function sayHello(name) {
  console.log(name + "：你好！");
}

就是：

把重複的事情包起來，需要時再叫它做。

如果需要把資料傳進去：

sayHello("哈納");

就用參數。

如果需要把結果拿回來：

return

就把結果傳出去。

今天的小心得

以前很容易覺得 Function 好像只是：

「把程式碼包起來。」

但今天重新寫一次之後，

覺得它比較像是在幫程式碼分工。

不要所有事情都塞在一起，

也不要同一段一直複製。

不然哪天要修改一句話，

結果發現同樣的程式碼散落在 20 個地方……

那時候真的會很想問自己：

當初到底為什麼不寫 Function？？？

好啦。

今天至少成功讓哈納不用一直重複打招呼了 XD

Day 18，完成！