Apa itu Fungsi Panggilan Balik di JavaScript?

Artikel ini memberikan pengantar singkat tentang konsep dan penggunaan fungsi callback dalam bahasa pemrograman JavaScript.

Fungsi adalah Objek

Hal pertama yang perlu kita ketahui adalah bahwa dalam Javascript, fungsi adalah objek kelas satu. Dengan demikian, kita dapat mengerjakannya dengan cara yang sama seperti kita bekerja dengan objek lain, seperti menugaskannya ke variabel dan meneruskannya sebagai argumen ke fungsi lain. Ini penting, karena ini adalah teknik terakhir yang memungkinkan kita memperluas fungsionalitas dalam aplikasi kita.

Fungsi Callback

Sebuah fungsi callback adalah fungsi yang dilewatkan sebagai argumen ke fungsi lain, untuk “dipanggil kembali” di lain waktu. Fungsi yang menerima fungsi lain sebagai argumen disebut fungsi tingkat tinggi , yang berisi logika kapan fungsi panggilan balik dijalankan. Kombinasi keduanya inilah yang memungkinkan kami memperluas fungsionalitas kami.

Untuk menggambarkan callback, mari kita mulai dengan contoh sederhana:

function createQuote(quote, callback){ var myQuote = "Like I always say, " + quote; callback(myQuote); // 2 } function logQuote(quote){ console.log(quote); } createQuote("eat your vegetables!", logQuote); // 1 // Result in console: // Like I always say, eat your vegetables!

Dalam contoh di atas, createQuoteadalah fungsi tingkat tinggi, yang menerima dua argumen, yang kedua adalah callback. The logQuoteFungsi sedang digunakan untuk lulus sebagai fungsi callback kami. Saat kami menjalankan createQuotefungsi (1) , perhatikan bahwa kami tidak menambahkan tanda kurung logQuotesaat kami meneruskannya sebagai argumen. Ini karena kami tidak ingin langsung menjalankan fungsi panggilan balik, kami hanya ingin meneruskan definisi fungsi ke fungsi tingkat tinggi agar dapat dijalankan nanti.

Selain itu, kita perlu memastikan bahwa jika fungsi callback yang kita teruskan dalam argumen ekspektasi, kita menyediakan argumen tersebut saat menjalankan callback (2) . Dalam contoh di atas, itu akan menjadi callback(myQuote);pernyataan, karena kita tahu bahwa logQuotemengharapkan kutipan diteruskan.

Selain itu, kami dapat mengirimkan fungsi anonim sebagai callback. Panggilan di bawah ke createQuoteakan memiliki hasil yang sama seperti contoh di atas:

createQuote("eat your vegetables!", function(quote){ console.log(quote); });

Kebetulan, Anda tidak harus menggunakan kata "callback" sebagai nama argumen Anda, Javascript hanya perlu tahu bahwa itu adalah nama argumen yang benar. Berdasarkan contoh di atas, fungsi di bawah ini akan berperilaku persis sama.

function createQuote(quote, functionToCall) { var myQuote = "Like I always say, " + quote; functionToCall(myQuote); }

Mengapa menggunakan fungsi Callback?

Sebagian besar waktu kami membuat program dan aplikasi yang beroperasi secara sinkron . Dengan kata lain, beberapa operasi kami dimulai hanya setelah operasi sebelumnya selesai. Seringkali ketika kami meminta data dari sumber lain, seperti API eksternal, kami tidak selalu tahu kapan data kami akan disajikan kembali. Dalam hal ini kami ingin menunggu respons, tetapi kami tidak selalu ingin seluruh aplikasi kami berhenti sementara saat data kami diambil. Dalam situasi ini, fungsi panggilan balik berguna.

Mari kita lihat contoh yang mensimulasikan permintaan ke server:

function serverRequest(query, callback){ setTimeout(function(){ var response = query + "full!"; callback(response); },5000); } function getResults(results){ console.log("Response from the server: " + results); } serverRequest("The glass is half ", getResults); // Result in console after 5 second delay: // Response from the server: The glass is half full!

Dalam contoh di atas, kami membuat permintaan tiruan ke server. Setelah 5 detik berlalu, respons diubah dan kemudian fungsi panggilan balik kami getResultsdijalankan. Untuk melihat ini beraksi, Anda dapat menyalin / menempelkan kode di atas ke dalam alat pengembang browser Anda dan menjalankannya.

Selain itu, jika Anda sudah terbiasa setTimeout, maka Anda telah menggunakan fungsi callback selama ini. Argumen fungsi anonim yang diteruskan ke setTimeoutpemanggilan fungsi contoh di atas juga merupakan callback! Jadi, callback asli dari contoh tersebut sebenarnya dijalankan oleh callback lain. Berhati-hatilah untuk tidak mengumpulkan terlalu banyak panggilan balik jika Anda bisa membantunya, karena hal ini dapat menyebabkan sesuatu yang disebut "neraka panggilan balik"! Seperti namanya, itu bukanlah hal yang menyenangkan untuk dihadapi.