你聽過「一級玩家」，那你知道「一級函式」嗎？

繼昨天有了函式「大致上」的概念後，今天我們要來瀏覽一下對於JavaScript面試常見的問題啦(￣▽￣)

此後出現的題號皆為List of 1000 JavaScript Interview Questions中的題號

昨天我們有提到函式中不只可以傳入值作為引數，其實也是可以傳入函式作為函式的引數。今天要提到的這一題就是關於這個特性喔！

11. What is a first class function 什麼是一級函式？

In Javascript, functions are first class objects. First-class functions means when functions in that language are treated like any other variable.
For example, in such a language, a function can be passed as an argument to other functions, can be returned by another function and can be assigned as a value to a variable.

@翻譯翻譯

在 JavaScript 中， 函式 是一等公民物件。一等公民函式表示在此語言中會被視為如同其他變數一般。什麼意思呢？
在這個語言中，函式 可以作為引數傳入其他的 函式 中，也可以被當成其他 函式 的回傳值，也可以被指定為是某個變數或常數的值。

範例

以下的這個範例就是把一個 函式(cutNail) 當成一個引數放入其他 函式（interact） 之中：

const cutNail = (catName) => {
  return `Cut ${catName}'s nails. ${catName}: 'Meowˋ^ˊ!!'`
}

function interact(how, who){
  console.log(how(who))
}

interact(cutNail, 'Leo') // "Cut Leo's nails. Leo: 'Meowˋ^ˊ!!'"

@翻譯翻譯：

首先我們定義一個函式 cutNail(catName) ，執行時會回傳 Cut ${catName}'s nails. Leo: 'Meowˋ^ˊ!!' 。
其中catName為定義函式時的參數名稱，而${catName}則為執行時，將該引數的值帶入成為字串的一部分的寫法。好處是在拼湊要輸出的字串時，可以不需要用一堆的+號將變數與字串相連。

注意：當你要使用${ }的寫法時，這個字串要用`(backtic)包起來喔！

在interact這個函式中，我們放入兩個引數，第一個引數是cutNail，這邊我們先利用了上面提到的一等公民其中一個特性：將函式指定給一個常數或變數，然後我們把這個常數作為引數傳入。第二個引數則是一個字串，這邊指的就是我們要interact的對象Leoちゃん。
在interact執行的時候，我們預期要印出"Cut Leo's nails. Leo: 'Meowˋ^ˊ!!'"這樣的訊息。

實際上interact到底做了什麼呢？我們第一個參數how傳入了一個函式，在這個被傳入的函式cutNail是一個箭頭函式，其中可以帶一個參數catName，而在這邊我們帶入的引數是interact的第二個引數，也就是Leoちゃん。接著，裡頭的cutNail會先執行，執行的結果則是return Cut ${catName}'s nails. ${catName}: 'Meowˋ^ˊ!!'，再經由interact的console.log印出來。

你是不是想說那我一開始就直接寫

function interact(catName){
  console.log(( catName => {
    return `Cut ${catName}'s nails. ${catName}: 'Meowˋ^ˊ!!'`
  })(catName))
}

interact('Leo') // "Cut Leo's nails. Leo: 'Meowˋ^ˊ!!'"

不就好了？

嗯～因為為了提高函式的可複用性(reusability)，cutNail可能不僅會在interact使用，可能也會在其他地方用到。所以我們把它拉出來成為一個獨立的函式，會更方便使用。

同時也可以提高interaction這個函式的可複用性，如下新增一個新的函式pet：

function pet(catName){
  return `Pet ${catName}. ${catName}: "Meow♥"`
}

interact(pet, 'Maru') // "Pet Maru. Maru: 'Meow♥'"

這樣子的話，interact就能一用再用、一用再用呢ლ(́◕◞౪◟◕‵ლ)

最後，今天的這個概念有個很經典的應用：curry化，那麼明天就來看看跟curry有關的題目囉！！

後記：

為了讓方法更加好用，我改寫了一下interact、cutNail和pet

function cutNail(catName){
  return { message:`Cut ${catName}'s nails.`, expression: 'ˋ^ˊ！！' }
}

function pet(catName){
  return { message:`Pet ${catName}.`, expression: '♥' }
}

function interact(how, who){
  console.log(how(who).message,`${who}: Meow${how(who).expression}`)
}

interact(pet, 'Maru') // "Pet Maru." "Maru: Meow♥"
interact(cutNail, 'Leo') // "Cut Leo's nails." "Leo: Meowˋ^ˊ！！"

大家也可以試著翻譯翻譯唷(ゝ∀･)

其中我讓cutNail和pet回傳了一個物件，來讓我的interact能印出更多相應的內容。而接下來的27天中，也會選擇幾天提到物件的概念喔！！