CALLBACK VS PROMISE - PERBEDAAN DAN KEGUNAAN

Dalam bahasa JavaScript, kita sering menemui operasi asynchronous, seperti mengambil data dari API, memproses file, atau menjalankan tugas lain yang membutuhkan waktu. Untuk menangani operasi tersebut, kita perlu mengenal callback dan promise.

Meskipun callback dan promise memiliki tujuan yang sama, yaitu mengelola operasi asynchronous, keduanya memiliki perbedaan dari segi cara kerja dan implementasinya. Artikel ini akan membahas perbedaan callback dan promise, mencakup kelebihan, kekurangan, serta waktu yang tepat untuk menggunakannya.

Sebelum itu, jika kamu belum memahami terkait operasi asynchronous, simak artikel berikut terlebih dahulu:

• Apa Itu Async?

Apa Itu Callback?

Callback adalah fungsi yang akan diteruskan dalam bentuk argumen ke fungsi lain saat fungsi tersebut telah menyelesaikan operasi atau tugasnya. Pendekatan ini merupakan cara lama dalam JavaScript untuk menangani operasi asynchronous.

Berikut contoh dalam menuliskan kode Callback:

function fetchData(callback) {
	setTimeout(() => {
		const data = { id:2, name: “Skodev” };
		callback(null, data); // panggil callback dengan nilai null (tidak error)

		// contoh jika error, gunakan kode dibawah dan hapus kode callback di atas
		callback(error)
}, 3000);
}


// untuk memanggil data
fetchData((error, data) => {
	if (error) {
		console.log(“Error:”, error);
	} else {
		console.log(“Data telah berhasil diambil, proses berjalan lancar”, data);
	}
});

Kelebihan Callback

• Dapat digunakan untuk tugas yang sederhana karena gampang dimengerti dan diimplementasikan secara langsung.
• Callback dapat didukung oleh semua versi Javascript tanpa perlu adanya tambahan fitur yang harus digunakan.

Kekurangan Callback
Terdapat callback hell yang menjadi kekurangan dari callback itu sendiri. Penggunaan callback yang bersarang atau nested callback, kode akan sulit dibaca maupun dipelihara, sehingga tidak efisien dalam menjalankan proyek. Selain itu, penanganan error dari penggunaan callback juga cukup rumit, karena error yang harus ditangani harus satu persatu level callback-nya.

Apa Itu Promise?

Promise adalah objek yang digunakan untuk menjalankan operasi secara langsung dan yang akan mempresentasikan hasil akhirnya, baik dengan nilai yang berhasil (fulfilled), ditolak (rejected), atau operasi masih diproses dan belum ada hasil (pending). Pada dasarnya, promise akan memberikan nilai saat dipanggil. Jadi, promise akan dijalankan dengan memasukkan nilai yang diharapkan, lalu promise tersebut baru dijalankan. Kamu dapat menggunakan promise untuk menangani operasi asynchronus secara lebih terstruktur dan dapat menghindari permasalahan callback hell.

Berikut contoh dalam menuliskan kode Promise:

function fetchData(isSuccess) {
	return new Promise ((resolve, reject) => {
		setTimeout(() => {
			if (isSuccess) {
				resolve("Data berhasil diambil");	// Jika data berhasil
			} else {
				reject("Gagal mengambil data"); // Jika data gagal
			}
		}, 3000); // simulasi waktu tunggu sebanyak 3 detik
	});
}

// untuk memanggil data dengan simulasi berhasil
fetchData(true)
	.then((data) => {
		console.log("Resolve:", data);
	})
	 .catch((error) => {
 		console.log("Reject:", error);
	});


// untuk memanggil data dengan simulasi berhasil
fetchData(false)
	.then((data) => {
		console.log("Resolve:", data);
	})
	 .catch((error) => {
 		console.log("Reject:", error);
	});

Penjelasan Kode di atas:

1. Kita menggunakan fetchData() dengan menerima parameter isSuccess atau nilai Boolean untuk menentukan apakah promise dapat berhasil atau diselesaikan (resolve) atau ditolak (reject).
2. Selain itu, terdapat setTimeout yang digunakan untuk mensimulasikan proses operasi mengambil data dari server.
3. Kita juga menggunakan logika if-else pada kode tersebut untuk menentukan jika parameter isSuccess bernilai true, maka promisie akan berhasil atau resolve, dan sebaliknya.

Kelebihan Promise
Dalam menggunakan promise pada kode, kamu dapat terhindar dari masalah Callback hell dengan bantuan .then() yang mampu membuat kode kamu lebih mudah dibaca. Error yang terjadi dapat ditangani lebih mudah disatu tempat, berbeda dengan Callback saat menangani error harus menyesuaikan dengan tingkat atau tempat dari error tersebut. Dalam penanganan error ini, promise menggunakan .catch().

Kekurangan Promise
Terdapat kekurangan dari penggunaan promise, khususnya pemula, sebab harus lebih ekstra dalam memahaminya. Syntax Promise yang lebih kompleks dibandingkan callback, sehingga butuh waktu lebih dalam memahaminya. Selain itu, promise tidak didukung oleh browser yang menggunakan JavaScript dengan versi lama.

Kapan Waktu yang Tepat Menggunakan Callback atau Promise?

Kamu dapat menggunakan callback pada kode, jika kamu sedang membuat proyek kecil atau operasi asinkronun yang sederhana dan saat library yang kamu gunakan tidak mendukung promise atau versi lama.

Jika ingin menggunakan promise, saat kamu sedang mengerjakan proyek yang kompleks atau operasi asinkronun yang saling bergantung atau bertingkat. Gunakan promise jika ingin kode yang dihasilkan lebih terstruktur, bersih dan mudah di-debug. Jangan lupa, pastikan kamu menggunakan library modern yang mendukung ES6.

Kesimpulan

Callback dan Promise merupakan dua pendekatan atau metode dalam menangani operasi asinkron dalam bahasa pemrograman JavaScript. Penggunaan Callback lebih sederhana namun kekurangannya rawan terhadap callback hell dan menangani errornya cukup rumit. Sedangkan penggunaan promise sendiri lebih kompleks dibanding callback, namun dalam menangani error lebih mudah, bersih dan terstukrur.

Selain itu, terdapat pendekatan baru dalam menangani operasi asinkron, yakni asyn/await sebagai pilihan proyek modern lain selain pendekatan promise.

Baca selengkapnya terkait asyc/await melalui artikel berikut:

• Async-Await

Selamat belajar!