Quick actions

cmd+k|ctrl+k

Navigation

Languages

Asynchronous - Synchronous : Callback Function

Snippet info

Language

JavaScript

Visibility

public

Author

tulangrusuk.ku

Created

2020-08-04T17:35:05Z

Updated

2020-08-05T11:22:16Z

function br(){
    console.log("");
}

/* Callback Function
Bagaimana menangani suatu nilai yang didapatkan secara asynchronous 
pada program yang berjalan secara synchronous. 
Contohnya kasus nya seperti kode berikut:*/
const getCake = () => {
    let cake = null;
    console.log("Sedang membuat kue, silakan tunggu....")
    setTimeout(() => {
        cake = "kue Selesai"
    }, 3000);
    return cake;
}

const cake = getCake();
console.log(cake);

/* Apa itu callback function? Mari kita bayangkan kembali melalui pandangan 
dunia nyata. Kita menunggu pesanan kopi datang di meja kita tapi , 
pada saat itu juga kita tidak bisa berada terus di tempat itu karena 
ada urusan mendadak. Pada kasus ini mungkin terdapat dua aksi yang bisa 
kita lakukan:

(Synchronous) Kita tetap menunggu di meja hingga kopi itu datang dan 
kemudian meninggalkan kedai kopi.
(Asynchronous) Kita meminta tolong kepada teman kita untuk menerima kopi itu, 
dan bertemu nanti untuk memberikan kopinya. Sehingga kita tidak perlu 
menunggu untuk meninggalkan kedai kopi. 

Nah pada JavaScript, teman kita berperan layaknya callback function. 
Ia diperintahkan pada sebuah fungsi asynchronous kemudian akan 
dipanggil/digunakan ketika tugas itu selesai.

Bagaimana cara melakukannya? Yang pertama kita tambahkan parameter dengan 
nama callback pada fungsi asynchronous.*/

const getCofee = callback => {
    let cofee = null;
    console.log("Kopi sedang dibuat, silakan tunggu :)");
    setTimeout(() => {
        cofee = "Cofee Selesai, selamat menikmati :)";
        //Kemudian kita panggil/gunakan callback yang diisikan dengan data 
        //yang akan dibawa (cofee) ketika task selesai dilakukan.
        callback(cofee);
    },3000);
    /*Setelah menggunakan callback diatas, fungsi tidak perlu lagi 
    mengembalikan nilai. Sehingga kita bisa hapus kode return cake; */
    //return cofee;
};

br();
//memanggil fungsi getCofee
getCofee(cofee => {
    console.log(cofee);
})
INFO