JavaScript
Callback fonksiyonlar
Bir fonksiyona parametre olarak geçirilen callback mantığını öğrenirsin.
Callback fonksiyonlar
JavaScript'te fonksiyonlar birer değerdir; bu yüzden bir fonksiyonu başka bir fonksiyona parametre olarak geçirebilirsin. Parametre olarak geçirilen fonksiyona callback denir; çünkü dışarıdaki fonksiyon onu uygun zamanda geri çağırır.
function greet(name, callback) {
callback(name);
}
Bu desene higher-order function denir: dışarıdaki fonksiyon, içeriği başka bir fonksiyon olan bir parametre kabul eder. Daha önce gördüğün addEventListener('click', handler) ve setTimeout(fn, 1000) aslında callback alır.
İsimle ya da satır içinde geçirmek
Bir callback'i iki şekilde geçirebilirsin: isimle ya da doğrudan ok fonksiyonu yazarak. İsimle geçirirken parantez kullanmazsın; greet(name, hello) doğru, greet(name, hello()) ise hello'yu hemen çağırır ve sonucunu geçirir.
function hello(name) {
console.log('Merhaba ' + name);
}
greet('Ayşe', hello);
İstersen ok fonksiyonu ile satır içinde de yazabilirsin: greet('Ayşe', (n) => console.log(n)). Her iki yol da geçerlidir; isimle geçirmek büyük fonksiyonlarda okunurluğu artırır.
Uygulama greetUser fonksiyonunu yaz
greetUser adında bir fonksiyon tanımla. İki parametre alsın: name ve callback. Fonksiyon içinde const message değişkeni oluştur ve name'i içeren bir karşılama metni ata. Sonra callback(message) çağrısını yap.
Örnek çözümü göster
function greetUser(name, callback) {
const message = `Merhaba, ` + name;
callback(message);
}
Kendini test et
-
Hangisi bir higher-order function'dır?
// A
function add(a, b) { return a + b; }
// B
function run(fn) { fn(); }
// C
function greet() { console.log('hi'); }
// D
const x = 5;
Cevabı göster
B — Doğru! run bir fonksiyon parametresi alıyor, yani higher-order function.
-
Callback parametresini ekle
function greet(name, ____) {
callback(name);
}
Cevabı göster
function greet(name, callback) {
callback(name);
}
-
Kavramları eşleştir
- callback
- Sonra çağrılan fonksiyon
- higher-order function
- Fonksiyon parametresi alır
- greet(name, hello)
- İsimle geçirme
- greet(name, hello())
- Hemen çağırma
-
addEventListener('click', handleClick()) yazarsan ne olur?
- Hata fırlatılır
- Olay tetiklendiğinde handleClick çalışır
- Hiçbir şey olmaz
- handleClick hemen çağrılır, olay beklenmez
Cevabı göster
handleClick hemen çağrılır, olay beklenmez — Doğru! handleClick() parantezi fonksiyonu anında çağırır; dönüş değeri (undefined) dinleyici olarak eklenir.
Sıradaki ders: Asenkron callback'ler
