Callback fonksiyonlar

JavaScript kursu · Orta seviye · Ders 66/134

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;
```
- A
- B
- C
- D
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.

Callback fonksiyonlar