Belajar Javascript: Memahami Callbacks dan Promises dalam JavaScript

Belajar Javascript: Memahami Callbacks dan Promises dalam JavaScript

Dalam pengembangan aplikasi web modern, pemrosesan asinkronus sangat umum terjadi. Dua konsep yang penting untuk dipahami dalam menangani pemrosesan asinkronus dalam JavaScript adalah "callbacks" dan "promises". Dalam artikel ini, kita akan membahas kedua konsep tersebut serta bagaimana cara mereka membantu dalam mengelola pemrosesan asinkronus dalam JavaScript.

Apa Itu Callbacks dalam Javascript

Callbacks adalah sebuah fungsi yang dikirimkan sebagai argumen ke fungsi lain, dan dieksekusi setelah fungsi tersebut selesai dieksekusi. Callbacks sering digunakan dalam pemrosesan asinkronus untuk menangani respons dari operasi yang membutuhkan waktu, seperti pengambilan data dari server atau pembacaan file.

Contoh penggunaan callback

Pada contoh di atas, fungsi getData memiliki parameter callback yang akan dieksekusi setelah data berhasil diambil.

Apa Itu Promises dalam Javascript

Promises adalah sebuah objek yang mewakili hasil dari operasi asinkronus. Mereka menyediakan cara yang lebih terstruktur untuk menangani pemrosesan asinkronus dan memungkinkan untuk mengaitkan beberapa operasi asinkronus bersama-sama dengan lebih mudah.

Contoh penggunaan promises

Pada contoh di atas, kita membuat sebuah promise dengan menggunakan new Promise(), dan kemudian menggunakan metode then() untuk menangani hasil yang sukses dan metode catch() untuk menangani kesalahan yang mungkin terjadi.

Macam-Macam Callback dalam JavaScript

Dalam pengembangan perangkat lunak dengan JavaScript, callback adalah salah satu konsep yang sangat penting. Callback adalah sebuah fungsi yang diteruskan sebagai argumen ke fungsi lain dan akan dieksekusi setelah operasi tertentu selesai atau suatu peristiwa terjadi. Penggunaan callback memungkinkan kode JavaScript untuk menjadi lebih fleksibel dan asinkronus. Berikut adalah beberapa macam callback yang umum digunakan dalam JavaScript:

1. Callback Synchronous: Callback synchronous adalah jenis callback yang dieksekusi secara langsung setelah fungsi induknya selesai dieksekusi. Ini adalah jenis callback paling sederhana dan umum dalam JavaScript. Contohnya adalah sebagai berikut:

Pada contoh di atas, callbackFunction dieksekusi secara langsung setelah fungsi process selesai dieksekusi.

2. Callback Asynchronous: Callback asynchronous adalah jenis callback yang dieksekusi setelah operasi tertentu selesai dijalankan, biasanya dalam situasi yang memerlukan waktu eksekusi yang lama atau tidak pasti. Contoh paling umum dari callback asynchronous adalah penggunaan setTimeout atau penggunaan fetch dalam JavaScript.

3. Callback Hell: Callback hell terjadi ketika callback bersarang satu sama lain secara dalam dalam kode, membuatnya sulit dibaca dan dipelihara. Ini biasanya terjadi ketika kita memiliki banyak operasi asinkronus yang harus dieksekusi secara berurutan. Untuk menghindari callback hell, bisa digunakan teknik seperti promises atau async/await.

4. Callback di Event Handling: Dalam pengembangan web, callback sering digunakan dalam menangani event. Misalnya, kita bisa menetapkan sebuah fungsi callback untuk dieksekusi ketika pengguna mengklik sebuah tombol atau mengirimkan formulir.

5. Callback dalam Array Methods: Beberapa metode bawaan dalam JavaScript seperti forEach, map, filter, dan reduce juga menerima callback sebagai argumen. Callback ini dieksekusi untuk setiap elemen dalam array atau sebagai bagian dari proses pemrosesan data.

6. Callback dalam Asynchronous Programming: Callback sangat umum digunakan dalam asynchronous programming untuk menangani hasil dari operasi yang memakan waktu, seperti operasi I/O, request HTTP, atau akses ke database.

Macam-Macam Promise dalam JavaScript

Promise adalah objek dalam JavaScript yang merepresentasikan penyelesaian (atau kegagalan) dari suatu operasi asynchronous, dan nilai yang dihasilkan oleh operasi tersebut. Promise digunakan untuk mengatasi callback hell dan membuat kode asynchronous menjadi lebih mudah dibaca dan dikelola. Berikut adalah beberapa macam promise yang umum digunakan dalam JavaScript:

1. Promise Pending: Promise dalam keadaan pending artinya operasi asynchronous yang direpresentasikan oleh promise tersebut belum selesai, dan masih menunggu untuk diselesaikan.

2. Promise Fulfilled (Resolved): Promise dalam keadaan fulfilled (atau resolved) artinya operasi asynchronous telah berhasil diselesaikan dan nilai yang dijanjikan telah dihasilkan. Kondisi ini terjadi ketika fungsi resolve() dipanggil di dalam executor promise.

3. Promise Rejected: Promise dalam keadaan rejected artinya operasi asynchronous telah gagal atau terjadi kesalahan, dan nilai yang dijanjikan tidak dapat dihasilkan. Kondisi ini terjadi ketika fungsi reject() dipanggil di dalam executor promise.

4. Chaining Promises: Chaining promises adalah teknik yang digunakan untuk menjalankan serangkaian operasi asynchronous secara berurutan, dengan mengaitkan beberapa promise bersama. Ini memungkinkan kita untuk menulis kode yang lebih bersih dan lebih mudah dipahami daripada callback hell.

5. Promise.all(): Promise.all() adalah metode yang digunakan untuk mengeksekusi beberapa promise secara paralel dan menunggu hingga semua promise selesai atau satu promise gagal. Hasilnya adalah array nilai yang dihasilkan oleh masing-masing promise yang diselesaikan.

6. Promise.race(): Promise.race() adalah metode yang digunakan untuk mengeksekusi beberapa promise secara paralel dan mengembalikan nilai dari promise pertama yang selesai atau gagal. Ini berguna jika kita ingin menanggapi hasil dari promise yang paling cepat tersedia atau penting.

7. Promise.resolve() dan Promise.reject(): Promise.resolve() adalah metode yang mengembalikan promise yang telah berhasil dengan nilai yang dijanjikan, sedangkan Promise.reject() mengembalikan promise yang telah ditolak dengan alasan tertentu.

8. Async/Await: Async/Await adalah fitur dalam JavaScript yang memungkinkan penulisan kode asynchronous dengan cara yang lebih bersih dan mirip dengan kode synchronous. Ini memanfaatkan promise di belakang layar, dan membuatnya lebih mudah untuk menangani promise dengan gaya penulisan yang lebih linear.

Kelebihan Promises dibanding Callbacks

Lebih mudah dalam menangani pemrosesan asinkronus yang kompleks, terutama ketika terdapat beberapa operasi asinkronus yang perlu dijalankan bersamaan.

Meminimalisir callback hell (penggunaan callback secara bertingkat yang sulit dibaca).

Kesimpulan

Dalam artikel ini, kita telah membahas dua konsep penting dalam JavaScript yang berkaitan dengan pemrosesan asinkronus, yaitu "callbacks" dan "promises". Callbacks adalah fungsi yang dieksekusi setelah suatu operasi selesai, sedangkan promises adalah objek yang merepresentasikan hasil dari operasi asinkronus.

Macam-macam callback telah dijelaskan, mulai dari synchronous callbacks yang dieksekusi secara langsung setelah fungsi utamanya selesai, hingga asynchronous callbacks yang dieksekusi setelah operasi tertentu selesai dijalankan. Kita juga membahas masalah callback hell yang terjadi ketika terlalu banyak callback bersarang dalam kode, dan bagaimana promises dapat mengatasi masalah ini dengan lebih mudah.

Selain itu, berbagai macam promise juga telah dibahas, seperti promise pending, fulfilled, dan rejected, serta teknik chaining promises, Promise.all(), Promise.race(), Promise.resolve(), dan Promise.reject(). Kemudian, kita juga mempelajari fitur Async/Await yang memungkinkan penulisan kode asynchronous dengan lebih bersih dan mirip dengan kode synchronous.

Dalam kesimpulan, pemahaman yang kuat tentang callbacks dan promises sangat penting dalam mengelola pemrosesan asinkronus dalam JavaScript. Dengan menggunakan kedua konsep ini, pengembang dapat membuat kode yang lebih bersih, lebih efisien, dan lebih mudah dipelihara dalam pengembangan aplikasi web modern.

Berbagi :