callback

說到callback function，最容易讓人聯想到的，就是等我做完某某事再來找你這個特性了，我們把callbacks當成一個值般地對待，把它傳進另一個函式裡作為引數，像是放進addEventListener()裡的第二個參數，跟瀏覽器說，等到某某事件發生了，在幫我執行這個callbakcs的內容。

這樣可以看出來，callbacks的一個特別的特質，與時間相關，與順序相關，所以在非同步程序裡，使用callbacks是一個能保證順序的方法，也就是做完這個再做那個，然後再做這個...而實作上，利用巢狀可以實現這樣的想法。

callback hell

下面用一個簡單的計時器來看看巢狀callbacks是什麼樣子，所謂的巢狀，就是callbacks裡有callbacks裡再有callbacks....

setTimeout(function () {
  console.log("1 sec passed");
  setTimeout(function () {
    console.log("2 sec passed");
    setTimeout(function () {
      console.log("3 sec passed");
      setTimeout(function () {
        console.log("4 sec passed");
        setTimeout(function () {
          console.log("5 sec passed");
        }, 1000);
      }, 1000);
    }, 1000);
  }, 1000);
}, 1000);

執行結果就是在devTool每秒印出一行訊息，告訴你一秒過了喔，兩秒過了喔..看起來還算直覺啊，感覺還不賴吧！...才怪！！
在真實人生中的巢狀callback寫法，實際上是會讓你的同事和未來的自己想殺掉你的可怕玩意，想像callback的內容是一大串code，而非像上面例子只是一句console.log()，到最後你連這個callback的結束在哪裡都找不到。

為了解決這個，於是ES6 發表了promise來讓大家從callback hell 中爬出來。

今日總結

因為callback function也算是first class function，就稍微看了一些Proessor Frisby's Mostly Adequate Guide to Functional Programming 中譯，實在太有趣了，有關first class function好像也可以寫一篇。

Reference

udemy-The Complete Javascript Course