Javascript Callback Function

3 min read Jun 20, 2024
Javascript Callback Function

Fungsi Callback dalam JavaScript

Fungsi callback adalah fungsi yang dilewatkan sebagai argumen ke fungsi lain, dan dipanggil oleh fungsi tersebut setelah operasi tertentu selesai.

Konsep Fungsi Callback

Bayangkan Anda memesan makanan di restoran. Anda memberikan pesanan Anda ke pelayan, dan pelayan mengatakan "Saya akan memberitahu Anda ketika pesanan Anda siap." Pelayan dalam kasus ini adalah fungsi utama yang menerima pesanan Anda (fungsi callback). Setelah pesanan Anda siap, pelayan akan memanggil Anda kembali (menjalankan fungsi callback) untuk memberitahu Anda bahwa pesanan Anda sudah siap.

Dalam JavaScript, fungsi callback sering digunakan untuk menangani operasi asinkron, seperti fetching data dari server atau menangani event.

Penggunaan Fungsi Callback

Berikut adalah beberapa contoh penggunaan fungsi callback dalam JavaScript:

1. Event Listener

const button = document.getElementById("myButton");

button.addEventListener("click", function() {
  console.log("Tombol ditekan!");
});

Dalam contoh ini, addEventListener adalah fungsi utama yang menerima dua argumen: nama event ("click") dan fungsi callback. Fungsi callback akan dijalankan ketika event click terjadi pada tombol.

2. setTimeout

setTimeout(function() {
  console.log("Halo dunia!");
}, 2000);

setTimeout adalah fungsi utama yang menerima dua argumen: fungsi callback dan delay dalam milidetik. Fungsi callback akan dijalankan setelah delay yang ditentukan.

3. Fetch API

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

fetch adalah fungsi utama yang menerima URL sebagai argumen. Fungsi then digunakan untuk menentukan fungsi callback yang akan dijalankan setelah operasi fetch selesai. Dalam contoh ini, fungsi callback pertama mengubah response menjadi JSON, dan fungsi callback kedua menampilkan data di konsol.

Keuntungan Fungsi Callback

  • Meningkatkan Kejelasan Kode: Fungsi callback membantu memecah kode menjadi bagian-bagian yang lebih kecil dan lebih mudah dibaca.
  • Mengatur Asinkronitas: Fungsi callback memungkinkan kita untuk menangani operasi asinkron dengan cara yang mudah dan terstruktur.
  • Meningkatkan Fleksibilitas: Fungsi callback memungkinkan kita untuk meneruskan fungsi yang berbeda ke fungsi utama, sehingga memberikan fleksibilitas dalam cara kita menangani operasi.

Kesimpulan

Fungsi callback adalah konsep penting dalam JavaScript yang memungkinkan kita untuk menangani operasi asinkron dan membuat kode lebih terstruktur. Dengan memahami konsep fungsi callback, kita dapat menulis kode JavaScript yang lebih efisien dan mudah dibaca.