Masukkan Password
23 Callback & Fungsi Anonim
Lecture ini melanjutkan langsung dari Function Expression yang baru saja kamu pelajari.
Kalau sebelumnya kita belajar:
let greetings = function() {
console.log("Hello");
};
Sekarang kita akan melihat kenapa function yang disimpan sebagai value itu sangat berguna.
Ada dua konsep utama:
- Callback Function
- Anonymous Function
Dan ada satu konsep pendukung yang sangat penting:
- JavaScript bersifat event-driven
Kita bahas dari dasar supaya tidak terasa membingungkan.
1. Konsep paling penting: function bisa dikirim sebagai argument
Sebelumnya kamu sudah belajar bahwa function bisa disimpan di variable:
let greetings = function() {
console.log("Hello");
};
Karena function adalah sebuah value, function juga bisa dikirim ke function lain.
Misalnya:
function sayHello() {
console.log("Hello");
}
Kita bisa melakukan:
someFunction(sayHello);
Perhatikan:
someFunction(sayHello);
bukan:
someFunction(sayHello());
Ini sangat penting.
sayHello
Artinya:
“Kirim function
sayHello.”
sayHello()
Artinya:
“Jalankan function
sayHellosekarang.”
Jadi:
sayHello
↓
function sebagai value
sedangkan:
sayHello()
↓
jalankan function
↓
hasil return
2. Apa itu Callback Function?
Callback function adalah function yang kita berikan sebagai argument kepada function lain, kemudian function penerima tersebut yang memanggilnya.
Definisi sederhananya:
Function A menerima Function B sebagai input, lalu Function A memanggil Function B.
Contoh:
function doSomething(callback) {
callback();
}
function sayHello() {
console.log("Hello");
}
doSomething(sayHello);
Alurnya:
doSomething(sayHello)
↓
sayHello dikirim ke doSomething
↓
callback = sayHello
↓
callback()
↓
sayHello()
↓
"Hello"
Output:
Hello
Nah, sayHello disebut callback function.
Kenapa?
Karena sayHello:
- dikirim sebagai argument ke
doSomething() - kemudian dipanggil dari dalam
doSomething()
3. Analogi sederhana callback
Bayangkan kamu menyuruh temanmu:
“Tolong kerjakan tugas matematika. Kalau sudah selesai, kabari saya.”
Secara konsep:
Kamu
↓
mengerjakan sesuatu
↓
selesai
↓
memanggil callback
↓
"Sudah selesai!"
Function utama adalah orang yang mengerjakan tugas.
Callback adalah instruksi:
“Setelah selesai, lakukan ini.”
Jadi callback sangat cocok untuk situasi:
“Lakukan sesuatu dulu, setelah selesai lakukan hal berikutnya.”
4. Contoh sederhana tanpa event
Misalnya:
function doHomework(subject, callback) {
console.log(`Started working on my ${subject} homework`);
callback();
}
Kita juga punya:
function homeworkFinished() {
console.log("Finished my homework");
}
Kemudian:
doHomework("math", homeworkFinished);
Apa yang terjadi?
Langkah 1
Kita memanggil:
doHomework("math", homeworkFinished);
Ada dua argument:
"math"
homeworkFinished
Langkah 2
Parameter menerima argument:
function doHomework(subject, callback)
Maka:
subject → "math"
callback → homeworkFinished function
Secara konsep:
subject
↓
"math"
callback
↓
function homeworkFinished() {
console.log("Finished my homework");
}
Langkah 3
Function menjalankan:
console.log(`Started working on my ${subject} homework`);
Output:
Started working on my math homework
Langkah 4
Kemudian:
callback();
Ingat, callback sekarang berisi function homeworkFinished.
Jadi:
callback();
sebenarnya sama seperti:
homeworkFinished();
Maka muncul:
Finished my homework
Output akhirnya:
Started working on my math homework
Finished my homework
5. Kenapa saat mengirim callback tidak menggunakan ()?
Ini salah satu bagian yang paling sering membingungkan pemula.
Kita menulis:
doHomework("math", homeworkFinished);
bukan:
doHomework("math", homeworkFinished());
Kenapa?
Karena kita ingin mengirim function-nya, bukan menjalankannya sekarang.
Tanpa ()
homeworkFinished
artinya:
“Ini function-nya.”
Dengan ()
homeworkFinished()
artinya:
“Jalankan function ini sekarang.”
Bayangkan:
homeworkFinished
↓
"Ini alatnya, silakan gunakan nanti."
homeworkFinished()
↓
"Gunakan alatnya sekarang."
Callback membutuhkan alat/function-nya, supaya function lain bisa menentukan kapan alat tersebut dijalankan.
6. Inilah alasan callback sangat berguna
Misalnya:
function doHomework(subject, callback) {
console.log(`Started working on ${subject}`);
// setelah pekerjaan selesai
callback();
}
Kita bisa memberikan callback yang berbeda:
function finished() {
console.log("Homework finished");
}
Kemudian:
doHomework("Math", finished);
Atau:
function submit() {
console.log("Submit homework");
}
doHomework("Math", submit);
Function doHomework() tidak perlu tahu secara detail apa yang harus dilakukan setelah selesai.
Dia hanya tahu:
“Saya punya callback. Kalau pekerjaan selesai, panggil callback.”
Ini membuat kode lebih fleksibel.
7. Sekarang masuk ke JavaScript Event-Driven
Lecture kemudian membahas sesuatu yang sangat penting:
JavaScript adalah event-driven programming language.
Maksudnya apa?
JavaScript banyak bekerja berdasarkan event/peristiwa.
Contoh event:
- user klik tombol
- user mengetik
- mouse bergerak
- halaman selesai dimuat
- timer selesai
- data dari server selesai diterima
- form dikirim
- dan lain-lain
Konsepnya:
EVENT TERJADI
↓
JALANKAN CODE
Callback sangat sering digunakan untuk hal ini.
8. Contoh setTimeout()
Lecture menggunakan:
setTimeout()
Misalnya:
setTimeout(function() {
console.log("Hello");
}, 1000);
Ini memiliki dua argument:
argument 1 → function
argument 2 → 1000
1000 berarti:
1000 milliseconds = 1 second
Function yang diberikan sebagai argument adalah callback.
Jadi:
function() {
console.log("Hello");
}
adalah callback untuk setTimeout().
9. Apa yang dilakukan setTimeout()?
Secara sederhana:
setTimeout(callback, 1000);
bisa dibaca:
“Tolong jalankan
callbacksetelah timer 1000 ms selesai.”
Jadi:
setTimeout()
↓
tunggu sekitar 1 detik
↓
callback dijalankan
10. Tapi JavaScript tidak berhenti menunggu
Ini bagian yang sangat penting.
Misalnya:
function first() {
setTimeout(function() {
console.log("First function called");
}, 1000);
}
function second() {
console.log("Second function called");
}
first();
second();
Orang yang baru belajar mungkin berpikir:
first()
↓
tunggu 1 detik
↓
First function called
↓
second()
↓
Second function called
Bukan begitu.
Outputnya:
Second function called
First function called
11. Kenapa second() muncul lebih dulu?
Mari kita lihat apa yang terjadi.
Ketika:
first();
dipanggil, JavaScript masuk ke:
function first() {
setTimeout(function() {
console.log("First function called");
}, 1000);
}
Kemudian menjalankan:
setTimeout(..., 1000);
JavaScript mengatakan kepada lingkungan browser secara sederhana:
“Pasang timer. Kalau sudah 1 detik, jalankan callback ini.”
Tetapi JavaScript tidak berhenti total selama 1 detik.
JavaScript lanjut:
second();
Maka:
first()
↓
setTimeout()
↓
timer dimulai
↓
JavaScript lanjut
↓
second()
↓
"Second function called"
↓
1 detik berlalu
↓
callback dijalankan
↓
"First function called"
12. Analogi restoran
Bayangkan kamu di restoran.
Kamu memesan makanan:
“Saya pesan nasi goreng.”
Pelayan tidak berdiri di depan dapur selama 20 menit sambil berkata:
“Saya harus menunggu nasi goreng sampai selesai baru boleh melayani pelanggan lain.”
Tidak.
Pelayan:
Terima pesanan
↓
Kirim ke dapur
↓
Lanjut melayani pelanggan lain
↓
Makanan selesai
↓
Berikan makanan
setTimeout() kurang lebih seperti:
“Kerjakan nanti setelah kondisi waktunya terpenuhi.”
Callback adalah:
“Ini yang harus dilakukan ketika sudah selesai.”
13. Kenapa lecture mengatakan JavaScript tidak mengeksekusi “sesuai urutan”?
Sebenarnya perlu sedikit hati-hati memahami kalimat tersebut.
JavaScript tetap mengeksekusi kode synchronous sesuai urutan.
Misalnya:
console.log("A");
console.log("B");
console.log("C");
hasilnya:
A
B
C
Yang berbeda adalah ketika kita menggunakan operasi asynchronous seperti timer, network request, event, dan sebagainya.
Contoh:
console.log("A");
setTimeout(() => {
console.log("B");
}, 1000);
console.log("C");
Output:
A
C
B
Kenapa?
Karena callback B menunggu timer selesai, sedangkan JavaScript bisa melanjutkan ke C.
Jadi mental model yang lebih tepat:
JavaScript menjalankan kode synchronous sesuai urutan, tetapi pekerjaan asynchronous bisa selesai/dieksekusi kemudian.
14. Hubungan asynchronous dengan callback
Inilah alasan callback sangat penting.
Misalnya:
setTimeout(callback, 1000);
Kita mengatakan:
“Jangan jalankan callback sekarang. Jalankan nanti ketika timer selesai.”
Jadi callback bisa dianggap sebagai:
“Kode yang akan dijalankan nanti ketika suatu kondisi/event sudah terjadi.”
Contoh lain nanti kamu akan menemukan:
User klik tombol
↓
callback dijalankan
atau:
Data dari server selesai
↓
callback dijalankan
atau:
Timer selesai
↓
callback dijalankan
15. Sekarang bedakan Callback Function dan Anonymous Function
Ini dua istilah yang sering muncul bersamaan, tetapi sebenarnya bukan hal yang sama.
Callback
Menjelaskan peran function.
Anonymous
Menjelaskan apakah function punya nama atau tidak.
Ini sangat penting.
16. Callback function bisa memiliki nama
Contoh:
function homeworkFinished() {
console.log("Finished my homework");
}
doHomework("Math", homeworkFinished);
homeworkFinished adalah:
- sebuah named function
- sekaligus callback function
Kenapa callback?
Karena dikirim ke:
doHomework(..., homeworkFinished)
dan dipanggil oleh doHomework().
17. Callback juga bisa berupa anonymous function
Daripada membuat:
function homeworkFinished() {
console.log("Finished my homework");
}
kita bisa langsung menulis:
doHomework("Math", function() {
console.log("Finished my homework");
});
Function ini tidak mempunyai nama.
Jadi disebut:
Anonymous Function
Dan karena function tersebut diberikan sebagai callback kepada doHomework(), maka dia juga merupakan:
Anonymous Callback Function
18. Kenapa disebut Anonymous?
Karena tidak punya nama.
Bandingkan:
Named function
function homeworkFinished() {
console.log("Finished");
}
Ada nama:
homeworkFinished
Anonymous function
function() {
console.log("Finished");
}
Tidak ada nama.
19. Bedah anonymous callback
Kode:
doHomework("Math", function() {
console.log("Finished my homework");
});
Mari kita pecah:
doHomework(
"Math",
function() {
console.log("Finished my homework");
}
);
Argument pertama:
"Math"
akan masuk ke:
subject
Argument kedua:
function() {
console.log("Finished my homework");
}
akan masuk ke:
callback
Jadi:
subject
↓
"Math"
callback
↓
anonymous function
Kemudian:
callback();
menjalankan anonymous function tersebut.
20. Kenapa anonymous function berguna?
Misalnya callback hanya akan digunakan satu kali.
Daripada membuat:
function homeworkFinished() {
console.log("Finished my homework");
}
doHomework("Math", homeworkFinished);
kita bisa langsung:
doHomework("Math", function() {
console.log("Finished my homework");
});
Lebih ringkas.
Karena function tersebut hanya dibutuhkan di tempat itu.
21. Analogi anonymous function
Bayangkan kamu punya seseorang yang namanya tidak penting.
Kamu hanya berkata:
“Tolong lakukan ini sekarang.”
Tidak perlu mengetahui namanya.
Begitu juga:
doHomework("Math", function() {
console.log("Finished my homework");
});
Kita tidak peduli nama function tersebut.
Kita hanya mengatakan:
“Setelah homework selesai, jalankan kode ini.”
22. Tapi satu koreksi penting dari lecture
Lecture mengatakan anonymous function:
“hanya bisa digunakan sekali.”
Untuk level pembelajaran ini, anggap saja demikian dalam konteks contoh tersebut.
Tapi secara teknis, anonymous function tidak berarti function tersebut mustahil digunakan lebih dari sekali.
Misalnya:
let x = function() {
console.log("Hello");
};
x();
x();
Function tersebut tidak punya nama sendiri, tetapi bisa dipanggil berkali-kali melalui variable x.
Jadi pengertian yang lebih akurat:
Anonymous function adalah function yang tidak memiliki nama function sendiri.
Sering kali anonymous function digunakan sebagai callback yang hanya diperlukan di satu tempat, sehingga terlihat seperti “dipakai sekali”.
23. Callback dan Anonymous adalah konsep berbeda
Ini harus benar-benar kamu pisahkan.
Misalnya:
function finished() {
console.log("Finished");
}
doHomework("Math", finished);
finished adalah:
Named Function
+
Callback Function
Sedangkan:
doHomework("Math", function() {
console.log("Finished");
});
function tersebut adalah:
Anonymous Function
+
Callback Function
Jadi:
CALLBACK
= peran function
ANONYMOUS
= function tidak memiliki nama
24. Contoh lain yang sangat sederhana
Misalnya kita membuat:
function processData(callback) {
console.log("Processing data...");
callback();
}
Kemudian:
processData(function() {
console.log("Processing complete");
});
Function:
function() {
console.log("Processing complete");
}
adalah:
- anonymous → karena tidak punya nama
- callback → karena diberikan ke
processData()dan dipanggil olehprocessData()
25. Callback dengan parameter
Callback juga bisa menerima data.
Contoh:
function processUser(name, callback) {
console.log(`Processing ${name}`);
callback(name);
}
Callback:
function finished(name) {
console.log(`${name} has been processed`);
}
Kemudian:
processUser("John", finished);
Output:
Processing John
John has been processed
Perhatikan:
callback(name);
Function utama memberikan data kepada callback.
Ini nanti sangat sering kamu lihat dalam JavaScript.
26. setTimeout() adalah contoh callback yang nyata
Contoh:
setTimeout(function() {
console.log("Time is up!");
}, 2000);
Di sini:
function() {
console.log("Time is up!");
}
adalah anonymous function.
Dan juga callback function.
Jadi satu function bisa disebut dengan dua istilah sekaligus:
anonymous
+
callback
Karena:
- anonymous → tidak punya nama
- callback → dikirim ke
setTimeout()dan dijalankan nanti oleh mekanisme timer
27. Callback bukan berarti selalu asynchronous
Ini juga penting untuk pemahaman jangka panjang.
Callback tidak selalu berarti asynchronous.
Contoh:
function doSomething(callback) {
callback();
}
Ini callback, tetapi synchronous.
doSomething(function() {
console.log("Hello");
});
Function callback langsung dijalankan oleh doSomething().
Tidak ada timer atau proses menunggu.
Jadi:
Callback ≠ otomatis asynchronous.
Callback hanya berarti:
“Function yang diberikan kepada function lain untuk dipanggil oleh function tersebut.”
Callback bisa synchronous atau asynchronous.
28. Hubungan semua konsep
Sekarang kita gabungkan semuanya:
Function adalah value
↓
Function bisa disimpan dalam variable
↓
Function bisa dikirim sebagai argument
↓
Function yang dikirim dan dipanggil oleh
function lain = CALLBACK FUNCTION
↓
Callback sering digunakan untuk event
↓
JavaScript banyak bekerja berdasarkan event
↓
Callback sangat penting untuk asynchronous code
Sedangkan:
Function tidak punya nama
↓
ANONYMOUS FUNCTION
Anonymous function sering digunakan sebagai callback:
someFunction(function() {
// code
});
29. Pola yang harus kamu kenali
Ketika melihat:
someFunction(function() {
// ...
});
langsung berpikir:
Oh!
Ada function dikirim sebagai argument.
Berarti kemungkinan besar ini callback.
Dan karena function-nya tidak punya nama,
berarti ini anonymous function.
Contoh:
setTimeout(function() {
console.log("Hello");
}, 1000);
Analisisnya:
setTimeout
↓
menerima function
↓
function tersebut adalah callback
↓
function tersebut tidak punya nama
↓
anonymous function
↓
dijalankan setelah timer selesai
30. Perbedaan callback parameter dengan nama function
Di contoh lecture:
function doHomework(subject, callback) {
...
}
callback sebenarnya hanya nama parameter.
Kamu bebas menggunakan nama lain:
function doHomework(subject, afterFinished) {
console.log(`Started ${subject}`);
afterFinished();
}
Kemudian:
doHomework("Math", function() {
console.log("Finished");
});
Tetap bekerja.
Jadi callback bukan keyword JavaScript.
Ini:
function doHomework(subject, callback)
hanya berarti:
“Parameter kedua saya namai
callback.”
Bisa saja:
function doHomework(subject, fn)
atau:
function doHomework(subject, afterFinished)
Yang penting value yang diterima parameter tersebut adalah sebuah function.
31. Kesalahan paling umum #1: menggunakan ()
❌ Salah untuk mengirim function:
doHomework("Math", homeworkFinished());
Ini akan menjalankan homeworkFinished terlebih dahulu.
Yang dikirim kemudian adalah hasil return dari function tersebut.
Yang benar:
doHomework("Math", homeworkFinished);
32. Kesalahan paling umum #2: lupa memanggil callback
Misalnya:
function doHomework(subject, callback) {
console.log(`Started ${subject}`);
// callback tidak dipanggil
}
Kemudian:
doHomework("Math", function() {
console.log("Finished");
});
Output:
Started Math
Tidak ada:
Finished
Karena function hanya diberikan:
callback
tetapi tidak pernah dijalankan:
callback();
33. Kesalahan paling umum #3: mengira callback harus bernama callback
Tidak.
Ini valid:
function doHomework(subject, fn) {
console.log(`Started ${subject}`);
fn();
}
Kemudian:
doHomework("Math", function() {
console.log("Finished");
});
fn adalah callback.
Nama callback hanyalah konvensi supaya kode lebih mudah dipahami.
34. Kesalahan paling umum #4: mengira anonymous = callback
Tidak selalu.
Anonymous hanya berarti:
function tidak memiliki nama.
Contoh:
let x = function() {
console.log("Hello");
};
Ini anonymous function.
Tetapi belum tentu callback.
Kenapa?
Karena belum dikirim ke function lain.
Sedangkan:
doSomething(function() {
console.log("Hello");
});
anonymous function tersebut juga merupakan callback karena diberikan ke doSomething().
35. Perbandingan lengkap
| Konsep | Artinya |
|---|---|
| Function | blok kode yang dapat dipanggil |
| Function Expression | function disimpan sebagai value, biasanya dalam variable |
| Callback | function yang dikirim ke function lain dan dipanggil oleh function tersebut |
| Anonymous Function | function yang tidak memiliki nama |
| Event | sesuatu yang terjadi, misalnya klik atau timer selesai |
| Asynchronous | pekerjaan yang penyelesaiannya bisa terjadi kemudian tanpa menghentikan alur utama |
36. Contoh lengkap dari lecture
Kita buat versi sederhana:
function doHomework(subject, callback) {
console.log(`Started working on my ${subject} homework`);
callback();
}
function homeworkFinished() {
console.log("Finished my homework");
}
doHomework("Math", homeworkFinished);
Alurnya:
doHomework("Math", homeworkFinished)
↓
homeworkFinished
↓
callback
↓
callback()
↓
homeworkFinished()
Output:
Started working on my Math homework
Finished my homework
37. Versi anonymous function
Kita tidak perlu membuat homeworkFinished():
function doHomework(subject, callback) {
console.log(`Started working on my ${subject} homework`);
callback();
}
doHomework("Math", function() {
console.log("Finished my homework");
});
Output tetap:
Started working on my Math homework
Finished my homework
Bedanya:
Sebelumnya
function homeworkFinished()
↓
punya nama
↓
dikirim sebagai callback
Sekarang
function()
↓
tidak punya nama
↓
langsung dikirim sebagai callback
38. Contoh asynchronous dengan setTimeout
Sekarang kita gabungkan:
function doHomework(subject, callback) {
console.log(`Started working on my ${subject} homework`);
setTimeout(function() {
console.log("Finished my homework");
callback();
}, 1000);
}
doHomework("Math", function() {
console.log("Now I can relax");
});
Secara konsep:
doHomework()
↓
"Started working..."
↓
setTimeout()
↓
timer berjalan
↓
JavaScript bisa mengerjakan hal lain
↓
1 detik selesai
↓
callback setTimeout dijalankan
↓
"Finished my homework"
↓
callback utama dijalankan
↓
"Now I can relax"
Ini sudah mulai menunjukkan kenapa callback sangat penting dalam JavaScript.
39. Kenapa materi ini penting untuk DOM nanti?
Lecture mengatakan nanti callback akan semakin jelas ketika kamu belajar DOM.
Contoh yang nanti akan sering kamu temui:
button.addEventListener("click", function() {
console.log("Button clicked");
});
Ini pola yang sama!
Kita memberikan function:
function() {
console.log("Button clicked");
}
kepada:
addEventListener()
Function tersebut akan dijalankan ketika event click terjadi.
Jadi:
User klik button
↓
event terjadi
↓
callback dijalankan
↓
console.log("Button clicked")
Sekarang kamu bisa melihat kenapa lecture sengaja memperkenalkan callback sebelum masuk ke DOM.
40. Mental model yang paling mudah
Anggap callback sebagai:
“Ini function-nya. Kamu yang panggil nanti ketika waktunya sudah tepat.”
Misalnya:
doHomework("Math", homeworkFinished);
dibaca:
“Kerjakan homework Math. Kalau sudah selesai, panggil
homeworkFinished.”
Sedangkan:
homeworkFinished();
dibaca:
“Panggil
homeworkFinishedsekarang.”
Ini perbedaan fundamental.
🎯 Cheat Sheet
1. Function sebagai value
let greet = function() {
console.log("Hello");
};
2. Function sebagai argument
doSomething(greet);
3. Callback
function doSomething(callback) {
callback();
}
doSomething(greet);
greet → callback.
4. Anonymous function
function() {
console.log("Hello");
}
Tidak punya nama.
5. Anonymous callback
doSomething(function() {
console.log("Hello");
});
Function tersebut:
Anonymous
+
Callback
6. Jangan tertukar
greet
→ kirim function
greet()
→ jalankan function
7. setTimeout
setTimeout(function() {
console.log("Hello");
}, 1000);
Callback dijalankan setelah timer selesai.
🧠 Inti yang harus benar-benar kamu pahami
Ada empat level pemahaman dari lecture ini:
LEVEL 1
Function adalah value
↓
bisa disimpan di variable
LEVEL 2
Function adalah value
↓
bisa dikirim sebagai argument
LEVEL 3
Function yang dikirim ke function lain
dan kemudian dipanggil oleh function tersebut
↓
CALLBACK FUNCTION
LEVEL 4
Kalau function tersebut tidak punya nama
↓
ANONYMOUS FUNCTION
Dan semuanya terhubung dengan event:
FUNCTION
↓
bisa jadi value
↓
bisa dikirim sebagai argumen
↓
CALLBACK
↓
┌───────────────┴────────────────┐
↓ ↓
synchronous asynchronous
↓ ↓
function langsung function dipanggil
dipanggil nanti setelah event
terjadi
↓
setTimeout
click event
network
dll.
Kalimat paling penting dari lecture ini:
Callback = function yang diberikan kepada function lain untuk dipanggil oleh function tersebut.
Dan:
Anonymous function = function yang tidak memiliki nama.
Jadi jangan menyamakan keduanya. “Callback” menjelaskan peran function, sedangkan “anonymous” menjelaskan apakah function tersebut punya nama atau tidak.