Panduan Komplit Asynchronous Programming pada Javascript — Part #2 Callback

Di seri sebelumnya saya membahas tentang konsep dan cara kerja asynchronous. Pada seri ini saya akan coba mengupas lebih dalam salah satu konsep dan teknik pemogramannya yang disebut callback.

Topik bahasan pada seri ini adalah :

Konsep Callback
Callback pada Synchronous
1. Callback sebagai Injeksi sebuah function
2. Callback sebagai Event Listener
Callback pada Asynchronous
1. Callback pada proses ajax
2. Operasi file
Callback Hell

Konsep Callback

Callback sebenarnya adalah function bedanya dengan function pada umumnya adalah di cara eksekusinya. Jika function pada umumnya di eksekusi berurutan dari atas ke bawah maka callback di eksekusi pada point tertentu, itu sebabnya di sebut callback.

Callback disebut juga dengan high-order function. Callback sebenarnya adalah function, bedanya dengan function pada umumnya adalah di cara eksekusinya. Jika function pada umumnya di eksekusi secara langsung sedangkan callback di eksekusi dalam function lain melalui parameter.

Contoh:

Kenapa function bisa di jadikan sebagai parameter ?

Function dalam javascript adalah object atau sering disebut first-class object, yang artinya :

• Function bisa di jadikan parameter
• Function dapat disimpan ke dalam variabel
• Seperti object pada umumnya, function bisa memiliki property dan method
• Function dapat mengembalikan value dalam bentuk function

Kapan Callback digunakan ?

Callback dapat digunakan untuk proses synchronous maupun asynchronous. Beberapa contoh implementasi callback adalah :

• Injeksi atau modifikasi hasil eksekusi sebuah function
• Event listener
• Menangani proses asynchronous

Callback Pada Synchronous

1. Callback sebagai Injeksi sebuah function

Kode diatas cukup sederhana yaitu untuk melakukan operasi penjumlahan. Berikut tantangannya :

• Buatlah function diatas agar bisa melakukan operasi matematika yg lain seperti kurang, bagi, kali dan lain sebagainya.
• Output dari function di atas harus bisa di format ke dalam mata uang

Dengan cara umum kita bisa menyelesaikanya dengan bantuan if atau switch untuk menguji operatornya. Tapi ini akan membuat code lebih panjang dan kurang dinamis. Dengan callback kita dapat membuat function diatas menjadi lebih dinamis

2. Callback sebagai Event Listener

Event Listener adalah function yang di eksekusi karena suatu event contoh ketika berinteraksi dengan DOM seperti event click, focus, keydown,keypress dan lain sebagainya.

Contoh pada Native Javascript

Untuk method lebih lengkap anda dapat melihatnya disini

Jika anda pengguna jquery, pasti sudah terbiasa dengan event listener seperti ini :

Callback Pada Asynchronous

Proses asynchronous identik dengan delay, dimana hasil dari proses tersebut membutuhkan selang waktu tertentu untuk menghasilkan output. Kita akan menemukan proses asynchronous pada proses Ajax, komunikasi HTTP, Operasi file, timer, dsb.

Pada synchronous output di prosess berdasarkan urutan kode.

Contoh :

Tetapi pada proses asynchronous output dari kode yang tuliskan tidak selalu berurutan. Hasilnya tergantung yang mana yang lebih dulu selesai. Perhatikan contoh berikut :

Catatan : setTimeout digunakan untuk simulasi asynchronous. Karena sebenarnya kita tidak bisa membuat proses asynchronous murni.

Perhatikan output dari kode diatas tidak lagi berurutan. Kerena javascript mengerjakan mana yang lebih dulu selesai. Mungkin pada contoh diatas tidak terlalu masalah tapi pada kasus tertentu ini menjadi problem, Contohnya kita ingin menampilkan data yang harus di request terlebih dahulu dengan proses ajax.

Kemungkinan besar hasilnya undefined. Karena belum tentu data sudah tersedia ketika function showResult( ) di eksekusi. Teknik callback dapat kita gunakan untuk problem ini.

Baik sebelum membahas ajax lebih , kita akan coba memperbaiki challange asynchronus di atas dengan memastikan output p1,p2,p3 sesuai urutan.

Solusi :

Solusinya adalah dengan membuat p3 menjadi callback bagi p2.

1. Callback pada proses ajax

Callback pada asynchronous seperti delegasi tugas. Seperti pada contoh sebelumnya maka untuk mengelola komunikasi dengan ajax kita memerlukan callback

Problem :

Solusi:
Solusinya adalah dengan membuat function showResult menjadi callback bagi function requestAjax
data=requestAjax(showResult) // showResult menjadi callback

Berikut code lengkapnya :

2. Operasi file

Operasi file seperti read,write,rename dan delete file sangat umum dalam NodeJS. Operasi file pada nodejs mendukung synchronous dan asynchronous.

Contoh membaca file secara synchronous

Hasil eksekusi code diatas akan membloking keseluruhan prosess hingga proses baca file selesai. Kelemahannya tentu aplikasi akan berhenti sampai proses tersebut selesai ditambah lagi tidak ada manajemen error.

Cara yang paling umum utuk operasi file adalah menggunakan metode asynchonous

Contoh membaca file secara Asynchronous

Untuk API yang lebih lengkap tentang operasi file anda dapat melihatnnya disini

Callback Hell

Callback hell adalah istilah ketika membuat beberapa callback bercabang atau callback di dalam callback. Sebagai contoh menggabung beberapa file ke dalam satu file.

karena readFileContent( ) adalah proses asynchronous maka di kelola dengan callback seperti berikut :

Apa problem kode diatas ?

Sebenarnya dari segi output tidak ada problem, yang menjadi problem adalah

1. Code sulit dibaca, dalam kasus tertentu piramida code bisa menjadi lebih panjang dan sulit untuk di maintenence
2. Tidak ada error handling, jika salah satu proses readFile error sulit di debug bagian yang mana yang error.

Bagaimana Solusinya ?
Solusi pertama adalah dengan membuat kode yang lebih modular agar lebih mudah dibaca. Tapi solusi yang lebih mudah adalah menggunakan promise yang akan saya bahas di bahas seri berikutnya.

Terimakasih semoga bermanfaat. Jika pertanyaan silahkan post di commet box. Sampai jumpa seri async programming selanjutnya dengan topik promise.

Lanjut ke part #3 : Promise →

Artikel ini adalah bagian dari Seri Panduan Komplit Asynchronous Programming pada Javascript :

1. Intro
2. Callback
3. Promise
4. Async/await
5. Generator (coming soon)