Cara menggunakan javascript callback interview questions

Question

Jika kalian sudah biasa dengan bahasa pemrograman, pasti kalian sudah mengetahui apa itu, kegunaan, dan cara menggunakan fungsi (function). Tetapi, apa itu fungsi Callback (Callback Function)? Callback Function adalah salah satu bagian penting dari JavaScript dan ketika kalian mengetahui cara kerjanya, kalian akan merasa lebih baik ketika menggunakan JavaScript.

Table of Contents Show

Apa itu Fungsi Callback?
Mengapa Fungsi Callback Penting?
Cara Membuat Callback
Apa itu Fungsi Anonymous?
Callback Sebagai Fungsi Arrow
Bagaimana Dengan Event?

Yasya El Hakim April 16, 2020 - November 03, 2021

Jika kalian sudah biasa dengan bahasa pemrograman, pasti kalian sudah mengetahui apa itu, kegunaan, dan cara menggunakan fungsi (function). Tetapi, apa itu fungsi Callback (Callback Function)? Callback Function adalah salah satu bagian penting dari JavaScript dan ketika kalian mengetahui cara kerjanya, kalian akan merasa lebih baik ketika menggunakan JavaScript.

Jadi, pada artikel kali ini, saya akan membantu kalian untuk memahami apa itu fungsi Callback dan bagaimana cara menggunakannya pada JavaScript beserta beberapa contohnya.

Daftar Isi [Sembunyikan]

Apa itu Fungsi Callback?

Pada JavaScript, fungsi adalah objek. Dapatkah kita melewati objek ke fungsi sebagai parameter? Jawabannya, bisa.

Jadi, kita juga dapat melewati fungsi sebagai parameter ke fungsi lainnya dan memanggilnya didalam fungsi lainnya. Bingung? Mari kita lihat contoh berikut:


function print(callback) {
    callback()
}

Fungsi print() membawa fungsi lain sebagai paremeter dan dipanggil dari dalamnya. Contoh diatas tetap valid dan kita memanggilnya "callback". Jadi sebuah fungsi yang dilewati ke fungsi lainnya sebagai parameter adalah fungsi callback. Tetapi tidak semuanya.

Mengapa Fungsi Callback Penting?

JavaScript menjalankan kode secara berurutan dari atas ke bawah. Bagaimanapun juga, terdapat beberapa kasus dimana kode berjalan (atau harus berjalan) setelah semuanya telah terjadi dan tidak berurutan. Hal tersebut dikenal dengan istilah Asynchronous Programming.

Callback dapat memastikan bahwa fungsi tidak akan berjalan sebelum suatu tugas telah diselesaikan tetapi tetap berjalan ketika tugas sudah selesai. Hal tersebut tentu saja dapat membantu kita untuk mengembangkan kode Asynchronous pada JavaScipt dan menjaga kita dari suatu masalah dan kesalahan.

Pada JavaScript, cara untuk membuat fungsi callback adalah melewatinya sebagai parameter ke fungsi lainnya, kemudian memanggilnya kembali setelah suatu hal telah terjadi atau beberapa tugas telah diselesaikan. Sekarang, mari kita lihat cara membuatnya.

Cara Membuat Callback

Untuk memahami apa yang telah saya jelaskan diatas, mari kita mulai dengan contoh yang simple. Disini, kita ingin melihat pesan log pada console tetapi setelah melewati waktu 3 detik:


const pesan = function() {
    console.log("Pesan ini akan muncul setelah 3 detik.");
}

setTimeout(pesan, 3000);

Kode diatas adalah metode built-in pada JavaScript yang disebut dengan "SetTimeout", yang dapat memanggil fungsi atau mengevaluasi expresi setelah periode waktu yang telah diberikan (dalam satuan milidetik). Jadi, disini fungsi "pesan" akan dipanggil setelah 3 detik dilewati. (1 detik = 1000 milidetik).

Dengan kata lain, fungsi pesan akan dipanggil setelah suatu hal telah terjadi (dalam contoh ini telah melewati 3 detik), tetapi tidak sebelumnya. Jadi, fungsi pesan adalah contoh dari fungsi callback.

Apa itu Fungsi Anonymous?

Alternatifnya, kita dapat mendefinisikan suatu fungsi langsung didalam fungsi lainnya sebagai pengganti dari pemanggilan. Contohnya akan terlihat seperti berikut:


setTimeout(function() {
    console.log("Pesan ini akan muncul setelah 3 detik.");
}, 3000);

Seperti yang sudah kita lihat, fungsi callback disini tidak memiliki nama dan suatu definisi fungsi yang tidak memiliki nama pada JavaScript dikenal dengan istilah "Anonymous Function". Kode diatas akan bekerja sama seperti contoh kode sebelumnya.

Callback Sebagai Fungsi Arrow

Jika kalian mau, kalian juga dapat menulis fungsi callback yang sama sebagai fungsi arrow ES6, yaitu tipe fungsi pada JavaScript yang lebih baru:


setTimeout(() => {
    console.log("Pesan ini akan muncul setelah 3 detik.");
}, 3000);

Bagaimana Dengan Event?

JavaScript adalah bahasa pemrograman event-driven. Kita juga dapat menggunakan fungsi callback untuk deklarasi event. Contoh, kita ingin user untuk mengeklik sebuah tombol:


<button id="tombol-callback">Klik Disini</button>

Sekarang waktunya untuk melihat pesan pada console hanya ketika user mengeklik tombol diatas:


document.querySelector("#tombol-callback").addEventListener("click", function() {
    console.log("User telah mengeklik tombol");
});

Jadi, disini kita memilih tombol dengan id nya "#tombol-callback", kemudian kita menambahkan event listener dengan metode addEventListener. Hal tersebut telah mengambil dua parameter. Parameter pertama adalah tipenya, "click", dan kedua adalah fungsi callback yang akan menampilkan pesan log ketika tombol di klik.

Seperti yang sudah kalian lihat, fungsi callback juga dapat digunakan untuk deklarasi event pada JavaScript.

Kesimpulan

Callback sering digunakan pada JavaScript, dan saya berharap artikel ini dapat membantu kalian dalam memahami apa itu serta bagaimana cara kerjanya dengan mudah.

Jika artikel ini bermanfaat, silahkan bagikan ke teman kalian. Jika kalian memiliki pertanyaan, silahkan tulis pada kolom komentar dibawah ini. Terimakasih.

Share:

Label:JavaScript Programming Web Development

Yasya El Hakim

404 Not Found!