# 淺談 JavaScript Callback Function

## 就字面初步認識 callback function
`callback` 在中文可能會被翻成回呼、回調，假使從中文字面看不出所以然，那就改用英文的角度來看看吧！英文中 "call back" 有**等一下再回來做某事**的意思，例如：回撥電話。
`callback function` 就字面上可理解成 ── **待會再執行的函式**，就是一種**先不要**的概念。

## 什麼是 callback function

先來看看 MND 的定義
> A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

簡單來說「從參數傳入一個函式再執行它」這個動作，在 JacaScript 中被稱為 **callback**，而被傳入的函式就是所謂的 **callback function**。

不懂沒關係，我們用兩個函式來舉例說明

function printResult(data) {
    return console.log(`result: ${data}`);
}

function sum(a, b, callback_func) {
    const ans = a + b;
    callback_func(ans);
}

sum(10, 10, printResult)

output

result: 20

以上面的程式碼來說，在呼叫 `sum()` 時傳入了三個參數 (兩個 number 和一個 function)，於此例中 `printResult()` 就是 callback function。

### 注意！callback function **不可以**加上括號`()`！

// 正確
sum(10, 10, printResult)

// 錯誤
sum(10, 10, printResult())

加了括號就會得到一個 `Uncaught TypeError: callback_func is not a function` 的錯誤。如果你覺得奇怪，為什麼我的 funciton 不是 funciton，那我們就把原本的程式碼補上 log 來看看

function printResult(data) {
    console.log("[2] do printResult")
    return console.log(`[3] result: ${data}`);
}

function sum(a, b, callback_func) {
    const ans = a + b;
    console.log("[1] 參數 callback_func 是: ", callback_func)
    callback_func(ans);
}

sum(10, 10, printResult)

output

[1] 參數 callback_func 是:  ƒ printResult(data) {
    console.log("[2] do printResult")
    return console.log(`[3] result: ${data}`);
}
[2] do printResult
[3] result: 20

上面的 [2]、[3] 是因為 `sum()` callback 才印出來 ，就是 `callback_func(ans);` 這行。

接著試試錯誤的寫法

sum(10, 10, printResult())

output

[2] do printResult
[3] result: undefined
[1] 參數 callback_func 是:  undefined
Uncaught TypeError: callback_func is not a function

你會發現**先不要執行**的 callback function ── `printResult()` 直接執行了！所以才會先印出 [2]、[3]，輪到 `sum(10, 10, printResult())` 執行時，`printResult()` 已經執行完畢，第三個參數等於沒有傳入東西是 `undefined`，等到 `sum()` callback 時就出錯，然後跳錯誤訊息。

###### tags: `JavaScript` `筆記`