Fungsi Callback JavaScript - Apa itu Callback di JS dan Bagaimana Menggunakannya

Jika Anda terbiasa dengan pemrograman, Anda sudah tahu fungsi apa dan bagaimana menggunakannya. Tapi apa itu fungsi panggilan balik? Fungsi panggilan balik adalah bagian penting dari JavaScript dan setelah Anda memahami cara kerja panggilan balik, Anda akan menjadi jauh lebih baik dalam JavaScript.

Jadi dalam posting ini, saya ingin membantu Anda memahami apa itu fungsi panggilan balik dan bagaimana menggunakannya dalam JavaScript dengan melalui beberapa contoh.

Apa itu Fungsi Panggilan Balik?

Dalam JavaScript, fungsi adalah objek. Bisakah kita melewatkan objek ke fungsi sebagai parameter? Iya.

Jadi, kita juga bisa melewatkan fungsi sebagai parameter ke fungsi lain dan memanggilnya di dalam fungsi luar. Kedengarannya rumit? Izinkan saya menunjukkannya dalam contoh di bawah ini:

function print(callback) { callback(); }

Fungsi print () mengambil fungsi lain sebagai parameter dan memanggilnya di dalam. Ini valid di JavaScript dan kami menyebutnya "panggilan balik". Jadi fungsi yang dilewatkan ke fungsi lain sebagai parameter adalah fungsi panggilan balik. Tapi itu belum semuanya.

Anda juga dapat menonton versi video dari fungsi panggilan balik di bawah ini:

Mengapa kita membutuhkan Fungsi Callback?

JavaScript menjalankan kode secara berurutan dalam urutan top-down. Namun, ada beberapa kasus di mana kode berjalan (atau harus dijalankan) setelah sesuatu yang lain terjadi dan juga tidak secara berurutan. Ini disebut pemrograman asinkron.

Callback memastikan bahwa suatu fungsi tidak akan berjalan sebelum tugas diselesaikan tetapi akan berjalan tepat setelah tugas selesai. Ini membantu kami mengembangkan kode JavaScript asinkron dan membuat kami aman dari masalah dan kesalahan.

Dalam JavaScript, cara untuk membuat fungsi callback adalah dengan meneruskannya sebagai parameter ke fungsi lain, dan kemudian memanggilnya kembali tepat setelah sesuatu terjadi atau beberapa tugas diselesaikan. Mari kita lihat bagaimana…

Cara membuat Callback

Untuk memahami apa yang saya jelaskan di atas, mari saya mulai dengan contoh sederhana. Kami ingin memasukkan pesan ke konsol tetapi pesan itu harus ada di sana setelah 3 detik.

const message = function() { console.log("This message is shown after 3 seconds"); } setTimeout(message, 3000);

Ada metode bawaan dalam JavaScript yang disebut "setTimeout", yang memanggil fungsi atau mengevaluasi ekspresi setelah periode waktu tertentu (dalam milidetik). Jadi di sini, fungsi "pesan" dipanggil setelah 3 detik berlalu. (1 detik = 1000 milidetik)

Dengan kata lain, fungsi pesan dipanggil setelah sesuatu terjadi (setelah 3 detik berlalu untuk contoh ini), tetapi tidak sebelumnya. Jadi fungsi pesan adalah contoh dari fungsi panggilan balik.

Apa itu Fungsi Anonim?

Alternatifnya, kita bisa mendefinisikan sebuah fungsi secara langsung di dalam fungsi lain, alih-alih memanggilnya. Ini akan terlihat seperti ini:

setTimeout(function() { console.log("This message is shown after 3 seconds"); }, 3000);

Seperti yang bisa kita lihat, fungsi panggilan balik di sini tidak memiliki nama dan definisi fungsi tanpa nama dalam JavaScript disebut sebagai "fungsi anonim". Ini melakukan tugas yang persis sama seperti contoh di atas.

Callback sebagai Fungsi Panah

Jika mau, Anda juga dapat menulis fungsi panggilan balik yang sama dengan fungsi panah ES6, yang merupakan jenis fungsi yang lebih baru di JavaScript:

setTimeout(() => { console.log("This message is shown after 3 seconds"); }, 3000);

Bagaimana dengan Acara?

JavaScript adalah bahasa pemrograman yang digerakkan oleh peristiwa. Kami juga menggunakan fungsi callback untuk deklarasi acara. Misalnya, kita ingin pengguna mengklik tombol:

Click here

Kali ini kita akan melihat pesan di konsol hanya ketika pengguna mengklik tombol:

document.queryselector("#callback-btn") .addEventListener("click", function() { console.log("User has clicked on the button!"); });

Jadi di sini kita memilih tombol pertama dengan idnya, dan kemudian kita menambahkan event listener dengan metode addEventListener. Dibutuhkan 2 parameter. Yang pertama adalah tipenya, "klik", dan parameter kedua adalah fungsi panggilan balik, yang mencatat pesan saat tombol diklik.

Seperti yang Anda lihat, fungsi callback juga digunakan untuk deklarasi peristiwa di JavaScript.

Bungkus

Callback sering digunakan dalam JavaScript, dan saya harap posting ini membantu Anda memahami apa yang sebenarnya mereka lakukan dan bagaimana bekerja dengannya lebih mudah. Selanjutnya, Anda dapat mempelajari tentang JavaScript Promises yang merupakan topik serupa yang telah saya jelaskan di posting baru saya.

Jika Anda ingin mempelajari lebih lanjut tentang pengembangan web, silakan ikuti saya di Youtube !

Terima kasih telah membaca!