前情提要：此為初入新手村的超級菜鳥，淺談JavaScript裡的【Function】(淺談結果寫超長)，僅供參考~ 敬請指教修正

新手小白聊Function

Function f(x)=3x+2
有沒有對於上方的公式看起來非常的熟悉，想到以前數學課一元一次方程式，二元一次方程式…好多好多的方程式，可怕的是滿天飛的xyz

對於初入新手村的我而言，最最最最頭痛的莫過於：我甚麼時候要用function?甚麼時候要放參數?又甚麼時候會要return???
等等!參數是甚麼? return又是甚麼???
(哎呀呀~頭都要開始痛了

---

function是在定義輸入值(參數)與輸出值(結果)之間的關係，
並且給他一個名稱

函數 Function

首先，我們先來看看以前熟悉的(或至少看過的)一元一次方程式，
以f(x)=3x+2為例：

• 數學老師說：當你將未知數x等於1時，代入方程式裡面計算的方式會是像：f(1)=3x1+2這樣，x=1帶入，最後得到一個結果等於5。如果未知數x等於3時，代入則會得到11的答案，此未知數x也可以稱為變數，也就是會不斷改變的一個數字。

有沒有稍微有點點感覺啦~(好像沒有

但有沒有發現，當方程式裡面的x代入各種數值的時候，這一個方程式f(x)=3x+2，就會給我一個答案，也因此它可以被重複使用。輸入一個值，給出一個值。就像你去便利商店買東西，給一塊錢得到一顆糖果

或許在此我們可以說

當你有需要重複使用的事情時，就可以使用function

那這樣在javaScript裡會是甚麼樣的呢?

function hello() { //此hello為方程式的命名
  console.log(123);
  console.log(456);
  console.log(789);
}
hello(); //印出123,456,789

函式結構：主要分為三個區域

• 函式的名稱，如範例hello為function的命名
• 包圍在小括號()裡面的為function的參數
• 包圍在大括號或稱花括號{}內的，為此function的作用區

關於函式

• 函式是構成javascript的基本要素之一
• 啟動的時候要連同小括號一起，呼叫function
• function是一種物件(object)也是一種可以被呼叫的值

定義函式的方式

• 函式宣告（Function Declaration）
• 函式運算式（Function Expressions）
• 透過 new Function 關鍵字建立函式

---

function的命名

在javaScript的結構上，可以幫function命名。能讓人較快速的知道此function是要進行什麼樣的事情。
命名的方式可分為

• 具名函式 Named Function
• 匿名函式 Anonymous Function

//沒有命名
 const hello = function(){
     console.log(123)
 }
 hello() //印出123
 //有命名aaa
 const hello = function aaa(){
     console.log(123)
 }
 hello() //印出123

至於要用哪一個好呢??還是要看實際的狀況判斷，具名的可以叫他的名字出來~就能重複使用。

小堤外：箭頭函式arrow

• ES6之後出現的東西，比原本的函式有更簡短的寫法。
• 只能拿來取代匿名函式但在物件導向的時候，本質不太一樣。
• 屬於匿名函式的一種，不能命名

//原本的寫法
const hello = function(){
    console.log(123);
}
//箭頭函式的寫法
const hello = ()=>{
  console.log(123);
};
hello(); //印出123

後續延伸物件導向

---

function的參數

寫在小括號()內的屬於function的參數，就像前面提到的未知數x一樣，就屬於參數，也是function的輸入值。

有別於以往數學上的未知數常用的只有xyz，在JS裡面，function的參數可以是number、list等這些看起來像英文單字的參數，他其實就是一個被帶入的值，所以長甚麼樣子都可以，只要他在她的{}內有找到相對應使用的功能就可以。

• 在function裡面的參數可以有很多個，並且用逗號區格
• 可以有預設值：讓function變得更有彈性，幫助流程控管，如果少帶引數給他的時候，就會出現預設值
• 可以用引數作為參數
• 也可以以物件作為參數

甚麼是物件作為參數?後續延伸那些可以做參數使用

function hello(a, b) { //a,b是參數
  console.log(a);
  console.log(b);
}
hello("aaa", 456); //"aaa",456是引數

//參數可以有預設值
function hello(a, b = 1, c = 2) {
  console.log(a);
  console.log(b);
  console.log(c);
}
hello("aaa", 456);
//印出aaa,456,2
//沒有給第三個引數時，則出現參數的預設值=2

因此，同一個function被使用時，參數的數量不會不同，因為是被定義的，但引數的數量可能會不一樣(多給或少給)，就像你每天固定要買麥當當，但媽媽可能多給你10元或是少給你5元，所以你只得到大麥克單點或是麥香雞套餐。(可以這樣比喻嗎

甚麼時候要用參數呢
當有引數需要被代入function時，就可以使用參數；就像是紙箱(function)一樣，把需要的工具(code block)放進去，需要用的時候打開紙箱(calling function)。
沒有參數的function就像是事件的集合體，直接進行作用區內的事情。

比較：引數(argument)與參數(paramter)

• 引數是當我們呼叫函數時，傳遞給他的值 (媽媽給你錢)
• 參數是我們在函式定義中所列出的變數 (你要買的麥當當)

function的作用區{}

在大括號或稱花括號內，套用function的參數。就像數學f(x)={3x+2}給他一個大括號，他就在大括號內計算，最終給你一個值(結果)。在function內定義的變數與外層是不同的世界。

function fu() {
  let a = 'Ray';
}
console.log(a); // a is not defined

function的宣告

直接用function時，呼叫hello()放哪裡都可以
但如果有兩個function時，後面定義的會把前面的覆蓋

hello() 
function hello(){
    console.log(123);
    console.log("aaa");
}
//印出123,aaa

function hello(){
    console.log(123);
}
function hello(){
    console.log("aaa");
}
hello() //印出aaa

定義function的方式有哪些呢?

---

簡單小結論

• function是一個物件(object)也是一種值
• 可以被呼叫：透過名稱+小括號呼叫他
• 有屬於自己的作用區
• 可以帶入參數
• function也可以作為引數使用
• function裡面也可以包function

後續會再來談其他的宣告方式var/let/const，以及function的return示甚麼

新手小白努力了解學習~持續修正調整更新中

---

參考資料

• mozilla函式-JavaScript
• 有點長的淺談 JavaScript function 函式
• 學JS的心路歷程 Day7-函式（二） arguments
• 重新認識 JavaScript: Day 10 函式 Functions 的基本概念

延伸閱讀參考

• 隱含引數