Callback Fonksiyonları
Callback fonksiyonları (Callback Functions) JavaScript'te başka bir fonksiyona argüman olarak geçirilen ve belirli bir işlem tamamlandıktan sonra çağrılan fonksiyonlardır. Bu fonksiyonlar, özellikle asenkron işlemler ve olay yönetimi sırasında oldukça önemlidir. Örneğin, bir e-ticaret sitesinde kullanıcı bir ürünü sepete eklediğinde, sepete ekleme işlemi tamamlandıktan sonra kullanıcıya bir bildirim göstermek için callback fonksiyonları kullanılır.
Kişisel web sitelerinde, callback fonksiyonları, kullanıcı etkileşimlerini takip etmek, form verilerini işlemek veya içerikleri dinamik olarak güncellemek için kullanılır. Bloglarda, yeni yazılar veya yorumlar sayfa yeniden yüklenmeden gösterilebilir. Haber sitelerinde, kullanıcıların en son haberleri görmesini sağlamak için içerik asenkron olarak yüklenir. E-ticaret sitelerinde, ürün stok durumu veya fiyat değişiklikleri gibi bilgiler kullanıcıya anında yansıtılabilir.
Bu eğitimde, callback fonksiyonlarının nasıl tanımlandığını, nasıl çağrıldığını ve asenkron işlemlerle nasıl çalıştığını öğreneceksiniz. Callback fonksiyonlarını anlamak, bir mektup yazarken adımları doğru sırayla takip etmek veya bir odayı dekore ederken önce duvarları boyayıp sonra mobilyaları yerleştirmek gibi işlemlerin doğru ve düzenli bir şekilde yapılmasını sağlar.
Temel Örnek
javascript// Basic callback function example
function veriIsle(veriler, callback) {
// Convert each item to uppercase
const sonuc = veriler.map(item => item.toUpperCase());
// Call the callback with processed data
callback(sonuc);
}
// Using the callback
veriIsle(\['haber','yazı','yorum'], function(sonuc) {
console.log('İşlenmiş Veri:', sonuc); // Display processed data
});Bu örnekte, veriIsle fonksiyonu iki parametre alır: veriler ve callback. İlk olarak, array içindeki her öğe map() metodu ile büyük harfe çevrilir. Ardından callback fonksiyonu işlenmiş veri ile çağrılır.
Callback fonksiyonları özellikle asenkron işlemlerde önemlidir çünkü işlem tamamlanmadan veri direkt olarak döndürülemez. Örneğin, blog yazıları veya e-ticaret sepet güncellemeleri gibi işlemlerde, callback fonksiyonları işlemin tamamlandığını bildirmek için kullanılır.
Fonksiyon çağrılırken kullanılan anonim fonksiyon, sonucu konsola yazdırır. Bu yapı, callback'lerin olay temelli veya asenkron süreçlerde nasıl kullanıldığını gösterir. Başlangıç seviyesindeki kullanıcılar genellikle neden doğrudan return kullanılmadığını sorabilir; cevap, asenkron işlemlerde verilerin hemen hazır olmamasıdır. Callback, işlemlerin sıralı ve düzenli yürütülmesini sağlar.
Pratik Örnek
javascript// Practical example for an e-commerce site
function sepeteEkle(urun, callback) {
// Simulate network delay
setTimeout(() => {
console.log(`${urun} sepete eklendi`);
// Execute callback after product is added
callback(urun);
}, 1000);
}
// Using the callback
sepeteEkle('Akıllı Telefon', function(eklenenUrun) {
console.log(`Şimdi ${eklenenUrun} ile alışverişe devam edebilirsiniz`);
});Bu pratik örnekte sepeteEkle fonksiyonu bir ürünü sepete ekler ve setTimeout ile ağ gecikmesini simüle eder. Callback fonksiyonu, ürün sepete eklendikten sonra çağrılır ve kullanıcı bilgilendirilir.
Callback fonksiyonları, etkinlik dinleyicileri, API çağrıları ve dinamik içerik yükleme gibi senaryolarda sıkça kullanılır. Örneğin, bir haber sitesinde yeni makaleler arka planda yüklenip kullanıcıya callback aracılığıyla gösterilebilir.
Arrow Function kullanmak, hataları yönetmek ve karmaşık callbackleri küçük fonksiyonlara bölmek önerilir. Bu, callback fonksiyonlarını yönetilebilir ve sürdürülebilir hale getirir.
En iyi uygulamalar ve yaygın hatalar:
En iyi uygulamalar:
1- Arrow Functions ile bağlamı korumak ve okunabilirliği artırmak.
2- Hata yönetimini try/catch veya error-first pattern ile yapmak.
3- UI performansını korumak için callback içinde ağır işlemlerden kaçınmak.
4- Karmaşık callbackleri küçük, modüler fonksiyonlara bölmek.
Yaygın hatalar:
1- Callback'i çağırmayı unutarak işlemlerin yarıda kalması.
2- Döngü veya Event Listener içinde yanlış callback kullanımı, memory leak oluşumu.
3- Hataları yok saymak, beklenmeyen exception’lara yol açar.
4- Callback Hell: derin iç içe callbackler, okunabilirliği düşürür.
Hata ayıklama ipuçları: console.log veya tarayıcı geliştirme araçları ile çalışmanın sırasını takip edin ve callbackleri modüler tutun.
📊 Hızlı Referans
| Property/Method | Description | Example |
|---|---|---|
| callback() | Geçilen callback fonksiyonunu çalıştırır | callback(sonuc) |
| Anonim Fonksiyon | İsimsiz olarak callback olarak geçirilen fonksiyon | function(veri){ console.log(veri); } |
| Arrow Function | Kısa sözdizimi ve this bağlamını korur | veri => console.log(veri) |
| setTimeout | Asenkron gecikmeleri simüle eder | setTimeout(() => callback(veri), 1000) |
| map() | Array elemanlarını dönüştürür | veriler.map(item => item.toUpperCase()) |
Özet ve sonraki adımlar:
Callback fonksiyonları, asenkron işlemler, olay yönetimi ve veri akışının düzenlenmesi için temel bir araçtır. Bu yapıları öğrenmek, daha reaktif ve sürdürülebilir uygulamalar geliştirmenizi sağlar. Callbackler, Promises ve async/await gibi ileri tekniklerin temelini oluşturur. Pratik yapmak için basit veri işleme örneklerinden başlayıp, kişisel web siteleri, bloglar ve e-ticaret senaryolarında uygulamak önerilir.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu konudaki anlayışınızı pratik sorularla test edin.
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek