Advance JavaScript 18 - callback

Advance JavaScript 18 - callback

Pengertian callback
Callback adalah sebuah function yang dilewatkan sebagai argumen ke function lain dan dieksekusi setelah operasi tertentu selesai, seringkali dalam konteks operasi asinkron. Dalam JavaScript, callback digunakan untuk menangani respon dari operasi seperti pengambilan data dari server, pengolahan file, atau interaksi pengguna.

Mengapa Menggunakan Callback?
1.Operasi Asinkron.
Ketika melakukan operasi seperti pengambilan data dari server, JavaScript tetap dapat menjalankan kode lainnya tanpa harus menunggu operasi tersebut selesai. Callback memungkinkan kita untuk menentukan tindakan yang akan diambil setelah operasi selesai.
2.Reusable Code: Callback memungkinkan kita untuk menggunakan kode yang sama untuk menangani situasi yang berbeda, dengan memasukkan fungsi callback yang sesuai.

Cara Menggunakan Callback:
1.Mendefinisikan Fungsi Callback: Buat sebuah fungsi yang akan dijalankan setelah operasi selesai.
2.Menggunakan Fungsi Callback: Serahkan fungsi callback sebagai argumen kepada fungsi lain yang memerlukan tindakan setelah operasi selesai.

Contoh Penggunaan Callback:
// Definisi fungsi dengan callback
function greet(name, callback) {
  console.log("Hello, " + name + "!");
  // Memanggil callback setelah pesan sapaan ditampilkan
  callback();
}

// Memanggil fungsi greet dengan menggunakan callback
greet("John", function() {
  console.log("Have a nice day!");
});
```

Dalam contoh ini, ketika fungsi `greet` dipanggil, pesan sapaan "Hello, John!" dicetak, dan kemudian callback yang berisi pesan "Have a nice day!" dieksekusi.

Manfaat Callback:
1.Fleksibilitas: Callback memungkinkan kita untuk menentukan tindakan yang akan diambil setelah operasi selesai, membuat kode lebih fleksibel.

2.Non-Blocking: Callback memungkinkan JavaScript untuk menjalankan operasi asinkron tanpa menghentikan eksekusi kode lainnya.

Dengan memahami callback, Anda dapat membuat kode JavaScript Anda lebih efisien dan dapat diandalkan, terutama dalam konteks operasi asinkron.

Berikut adalah contoh sederhana kode JavaScript yang menunjukkan penggunaan callback dalam operasi asinkron:

// Fungsi untuk meniru pengambilan data dari server secara asinkron
function fetchData(callback) {
  setTimeout(function() {
    const data = "Data yang diambil dari server";
    // Memanggil callback dengan data yang diperoleh setelah 2 detik
    callback(data);
  }, 2000);
}

// Fungsi callback untuk menangani data yang diperoleh
function handleData(data) {
  console.log("Data yang diterima:", data);
}

// Memanggil fungsi fetchData dengan menggunakan callback
console.log("Memulai pengambilan data...");
fetchData(handleData);
console.log("Langkah berikutnya...");
```

Dalam contoh ini, fungsi `fetchData` meniru pengambilan data dari server dengan menggunakan `setTimeout` untuk menunda eksekusi selama 2 detik. Setelah 2 detik, fungsi callback `handleData` dipanggil dengan data yang diperoleh dari server. Pada saat yang sama, langkah berikutnya dalam kode akan tetap dieksekusi, menunjukkan bahwa operasi ini bersifat asinkron.

Berikut adalah contoh kode JavaScript murni yang menggunakan callback untuk mengambil data dari sebuah API secara asinkron:

// Fungsi untuk mengambil data dari API secara asinkron
function fetchDataFromAPI(url, callback) {
  // Membuat objek XMLHttpRequest
  const xhr = new XMLHttpRequest();

  // Mengatur callback untuk menangani perubahan status permintaan
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        // Panggil callback dengan data yang diperoleh jika permintaan berhasil
        callback(null, JSON.parse(xhr.responseText));
      } else {
        // Panggil callback dengan pesan kesalahan jika permintaan gagal
        callback("Error: " + xhr.status);
      }
    }
  };

  // Membuat permintaan GET ke URL API
  xhr.open("GET", url, true);
  xhr.send();
}

// Fungsi callback untuk menangani data yang diperoleh dari API
function handleData(error, data) {
  if (error) {
    console.error("Terjadi kesalahan:", error);
  } else {
    console.log("Data yang diterima:", data);
  }
}

// URL API yang akan diambil
const apiUrl = "https://api.example.com/data";

// Memanggil fungsi fetchDataFromAPI dengan menggunakan callback
console.log("Memulai pengambilan data dari API...");
fetchDataFromAPI(apiUrl, handleData);
console.log("Langkah berikutnya...");
```

Dalam contoh ini, kita menggunakan objek `XMLHttpRequest` untuk membuat permintaan HTTP GET ke URL API yang diberikan. Ketika permintaan selesai, kita memeriksa status permintaan dan panggil callback `handleData` dengan data yang diperoleh jika permintaan berhasil, atau dengan pesan kesalahan jika permintaan gagal.

Berikut adalah contoh kode menggunakan jQuery untuk mengambil data dari sebuah API:

// URL API yang akan diambil
const apiUrl = "https://api.example.com/data";

// Memanggil API menggunakan jQuery Ajax
$.ajax({
  url: apiUrl,
  method: "GET",
  success: function(response) {
    // Menangani respons yang berhasil
    console.log("Data yang diterima:", response);
  },
  error: function(xhr, status, error) {
    // Menangani kesalahan
    console.error("Terjadi kesalahan:", status, error);
  }
});
```

Dalam kode di atas, kita menggunakan metode `$.ajax()` dari jQuery untuk membuat permintaan GET ke URL API yang ditentukan. Kita juga menentukan dua callback, yaitu `success` dan `error`, yang akan dipanggil sesuai dengan hasil permintaan. Jika permintaan berhasil, callback `success` akan dipanggil dengan respons dari API. Jika ada kesalahan dalam permintaan, callback `error` akan dipanggil dengan informasi kesalahan yang diterima.

Sekian penjelasan tentang callback