Day06 JavaScript Higher-Order Function（高階方程式）

Higher-Order Function（高階方程式） 是什麼

Higher-Order Function簡稱HOF，是指一個以function作為參數的function或者回傳function的function，我知道目前聽起來非常抽象，我們舉一個我們之前就已經看過的例子。

以Function作為參數的HOF

在第三天的內容裡，我們看見內建的document這個object的內建method：addEventListener()，他的使用格式是這樣：

在之前的例子裡，我們監聽”click”(滑鼠點擊事件），讓畫面被點擊的時候出現alert。

值得再次注意的是傳進去的fireAfterClick() 並沒有加上括號，我們只是給他工具，不是要他馬上用，詳見我們第三天提到的例子。

今天再一次看addEventListener()的理由是，它就是一個HOF，因為它其中一個參數是function fireAfterClick()。

這件事情在程式語言的世界裡是很特別的，因為在某些其他語言（例如C++）裡面，你不能以function作為argument，只能是string、number之類的值。在JavaScript內可以做到這件事情。下一個例子可能也會讓學過C++的人感到震驚。

回傳Function的HOF

如果你要寫幾個加法的function，你可以這樣寫。

把指定的數字x放進去，每個function就會按照指定的加法規則計算出結果，並且回傳。這裡出現了關鍵字return，會把計算的結果回傳，幾天後會有關於它更詳細的解釋。

問題就是，其中大部分的規則都是重複的，我們可以試著整理下這個規則，下面的內容看起來會很可怕，我會慢慢解釋。

相對於本來的回傳一個number，這裡回傳的是一個function（你可以看見他也有完整的function 名稱(){} 關鍵字及符號結構）。由於createAddNumber()回傳的是function，它被稱為HOF。相較於其他語言JS顯得很特別，因爲function居然可以回傳function，function在JS裡面被當作一般的string或number對待。

既然JS裡function被當成string或number一樣對待，他也可以被放進變數裡面，像這樣。

我們把回傳的function指定成變數（就像設定 let myNumber = 5 那樣）。這件事在某些語言裡面是不能發生的，因為這樣JS常被認為是彈性最高的語言之一。

雖然把加法特地改成這樣確實有些多此一舉，但它成功解釋了function回傳function的情境。在目前的情況下，我們把加法邏輯整理了起來，重複利用。換句話說，我們現在正在用createAddNumber()裡重複的邏輯來製作addOne()、addTwo()、addThree()…。

接著我們實際測試。

以addOne()為例，傳入5，它就會計算 5 + 1，得到結果為6並回傳，最後我們用document.write()將6印在畫面中。

內建的HOF

之前就有提到JS裡面內建了幾乎數不清的method可以使用，其中有不少都是HOF（以function作為參數或者回傳function）。其中最強大、最常見的非array的method莫屬。

假設我們現在有一個array，裡面存了我最喜歡的顏色。

每個array裡面都有一個內建的method：forEach()。這個method可以讓我們很方便的對array裡的每一項內容做重複的操作。它需要一個參數：一個function來告訴它你想對array裡的每項做什麼操作。例如我想將最喜歡的顏色都寫成句子「I love color: ___. 」，印在畫面上。

為了方便閱讀，我們一樣在結尾加上HTML的換行符號<br>。最後看起來就會像下面這樣：

這時候如果加上新的顏色'orange'，它也會自動的新增在畫面，非常方便。

由於forEach()裡面的參數是另外一個function，它就是HOF。像這樣在array裡面內建的HOF還有非常非常多，包含常常用到的map()、filter()等等，在下個單元會講到。

小結

相信現在讀到你已經頭昏腦脹，有太多新的名詞、新的內建method出現。但別擔心，我們的重點還是了解，Higher-Order Function就是參數是另一個function或者回傳另一個function的函數，在程式語言裡面這是相對特別的用法。在JavaScript裡有非常多實用且常見的內建method，它們都是HOF，所以學習HOF對於了解JavaScript的運作有非常大的重要性。

而明天是我覺得學習function以來最重要的觀念。他們可以用來分類function，讓你知道很快地知道某個function預期的行為結果，那就是Mutating Function和Returning Function兩者之間的差異。

Resource

今日Codepen

連結

Credits

• Learn JavaScript: Full-Stack from Scratch — Brad Schiff
• Web Programming — Rick Huang
• https://openprocessing.org/sketch/1561900/ — Chang Wen Han
• https://chartogne-taillet.com/fr — Bruno Simon
• https://www.apple.com/apple-vision-pro/ — Apple
• https://claude.ai — Anthropic

關於我

我是Erkin, 一個網站開發者。
有任何疑問或是想勘誤的話歡迎聯繫。

• Github
• Mail
• Website
• 請杯咖啡