新手小白聊Function

--- title: 新手小白聊Function tags: 文章發布,JavaScript description: 淺談Function是甚麼 date: 2022/03/22 --- :::info 前情提要：此為初入新手村的超級菜鳥，淺談JavaScript裡的【Function】(淺談結果寫超長)，僅供參考~ 敬請指教修正:bow::bow::bow: ::: # 新手小白聊Function **Function f(x)=3x+2** 有沒有對於上方的公式看起來非常的熟悉，想到以前數學課一元一次方程式，二元一次方程式...好多好多的方程式，可怕的是滿天飛的xyz :confounded: 對於初入新手村的我而言，最最最最頭痛的莫過於：我甚麼時候要用function?甚麼時候要放參數?又甚麼時候會要return???? 等等!參數是甚麼? return又是甚麼??? (哎呀呀~頭都要開始痛了 :fearful::fearful::fearful: --- :bell:**function是在定義輸入值(參數)與輸出值(結果)之間的關係，並且給他一個名稱** ## 函數 Function 首先，我們先來看看以前熟悉的(或至少看過的)一元一次方程式，以f(x)=3x+2為例： - 數學老師說：當你將==未知數x==等於1時，代入方程式裡面計算的方式會是像：f(1)=3x1+2這樣，x=1帶入，最後==得到一個結果==等於5。如果未知數x等於3時，代入則會得到11的答案，此未知數x也可以稱為變數，也就是會不斷改變的一個數字。有沒有稍微有點點感覺啦~(好像沒有 但有沒有發現，當方程式裡面的x代入各種數值的時候，這一個方程式f(x)=3x+2，就會給我一個答案，也因此它可以被==重複使用==。輸入一個值，給出一個值。就像你去便利商店買東西，給一塊錢得到一顆糖果:candy: 或許在此我們可以說 :bell:**當你有需要重複使用的事情時，就可以使用function** 那這樣在javaScript裡會是甚麼樣的呢? ```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 關鍵字建立函式 --- ### :point_right:function的命名在javaScript的結構上，可以幫function命名。能讓人較快速的知道此function是要進行什麼樣的事情。命名的方式可分為 - 具名函式 Named Function - 匿名函式 Anonymous Function ```javascript= //沒有命名 const hello = function(){ console.log(123) } hello() //印出123 //有命名aaa const hello = function aaa(){ console.log(123) } hello() //印出123 ``` 至於要用哪一個好呢??還是要看實際的狀況判斷，具名的可以叫他的名字出來~就能重複使用。 #### 小堤外：箭頭函式arrow - ES6之後出現的東西，比原本的函式有更簡短的寫法。 - 只能拿來取代匿名函式但在物件導向的時候，本質不太一樣。 - 屬於匿名函式的一種，不能命名 ```javascript= //原本的寫法 const hello = function(){ console.log(123); } //箭頭函式的寫法 const hello = ()=>{ console.log(123); }; hello(); //印出123 ``` :mag_right: 後續延伸物件導向 --- --- ### :point_right:function的參數寫在小括號()內的屬於function的參數，就像前面提到的未知數x一樣，就屬於參數，也是function的輸入值。有別於以往數學上的未知數常用的只有xyz，在JS裡面，function的參數可以是number、list等這些看起來像英文單字的參數，他其實就是一個被帶入的值，所以長甚麼樣子都可以，只要他在她的{}內有找到相對應使用的功能就可以。 - 在function裡面的**參數可以有很多個**，並且用逗號區格 - 可以有**預設值**：讓function變得更有彈性，幫助流程控管，如果少帶引數給他的時候，就會出現預設值 - 可以用引數作為參數 - 也可以以物件作為參數 :mag_right: 甚麼是物件作為參數?後續延伸那些可以做參數使用 ```javascript= 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元，所以你只得到大麥克單點或是麥香雞套餐。(可以這樣比喻嗎:sweat_smile: :question: 甚麼時候要用參數呢當有引數需要被代入function時，就可以使用參數；就像是紙箱(function)一樣，把需要的工具(code block)放進去，需要用的時候打開紙箱(calling function)。沒有參數的function就像是事件的集合體，直接進行作用區內的事情。 :::success :bulb:比較：引數(argument)與參數(paramter) - 引數是當我們呼叫函數時，傳遞給他的值 (媽媽給你錢) - 參數是我們在函式定義中所列出的變數 (你要買的麥當當) ::: ### :point_right:function的作用區`{}` 在大括號或稱花括號內，套用function的參數。就像數學f(x)={3x+2}給他一個大括號，他就在大括號內計算，最終給你一個值(結果)。在function內定義的變數與外層是不同的世界。 ```javascript= function fu() { let a = 'Ray'; } console.log(a); // a is not defined ``` ### :point_right:function的宣告直接用function時，呼叫hello()放哪裡都可以但如果有兩個function時，後面定義的會把前面的覆蓋 ```javascript= hello() function hello(){ console.log(123); console.log("aaa"); } //印出123,aaa ``` ```javascript= function hello(){ console.log(123); } function hello(){ console.log("aaa"); } hello() //印出aaa ``` :mag_right: 定義function的方式有哪些呢? --- :::warning :raised_hands:簡單小結論 - function是一個物件(object)也是一種值 - 可以被呼叫：透過名稱+小括號呼叫他 - 有屬於自己的作用區 - 可以帶入參數 - function也可以作為引數使用 - function裡面也可以包function ::: :mag_right:後續會再來談其他的宣告方式var/let/const，以及==function的return示甚麼== :scream::scream::scream:新手小白努力了解學習~持續修正調整更新中:scream::scream::scream: --- :::spoiler **參考資料** - [mozilla函式-JavaScript](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Functions) - [有點長的淺談 JavaScript function 函式](https://w3c.hexschool.com/blog/cb6e361) - [學JS的心路歷程 Day7-函式（二） arguments](https://ithelp.ithome.com.tw/articles/10204008) - [重新認識 JavaScript: Day 10 函式 Functions 的基本概念](https://ithelp.ithome.com.tw/articles/10191549) ::: :::spoiler 延伸閱讀參考 - [隱含引數](https://ithelp.ithome.com.tw/articles/10204008) :::