CodeBlanks Logo Icon CodeBlanks

Callback hell

JavaScript kursu · Orta seviye · Ders 69/134

İç içe callback'lerin oluşturduğu piramit yapısını ve neden problemli olduğunu öğrenirsin.

Callback hell

Bir asenkron işlemin sonucunu başka bir asenkron işlem izlediğinde, callback'leri iç içe yazmak doğaldır. Ama işlem sayısı artınca kod sağa doğru kayar ve okunmaz hale gelir. Bu desene callback hell ya da pyramid of doom denir.

loadUser(id, (err, user) => {
  loadPosts(user, (err, posts) => {
    loadComments(posts, (err, comments) => {
      // her seviye daha içeri kayar
    });
  });
});

Piramit derinleştikçe hata yönetimi, geri dönüş değerleri ve akış kontrolü zorlaşır.

Neden sorunludur?

Callback hell yalnızca estetik bir sorun değildir; gerçek maliyetleri vardır. Hata yönetimi her seviyede tekrarlanmak zorundadır; bir seviyedeki return diğer seviyeleri etkilemez. Döngü ve koşullar iç içe geçince akışı takip etmek zorlaşır.

Ayrıca iç içe callback'lerde değişken adları çakışır: her seviyede err ve result yazmak zorunda kalırsın. Kodu değiştirmek ya da hata ayıklamak da zorlaşır. Bu yüzden sonraki derste bu deseni nasıl düzelteceğini göreceğiz.

Uygulama İç içe iki setTimeout yaz

İç içe iki setTimeout çağrısı yaz. Dış zamanlayıcı 200 ms sonra iç zamanlayıcıyı başlatır. İç zamanlayıcı da 200 ms sonra console.log ile kısa bir mesaj yazdırır. İç setTimeout, dış zamanlayıcının callback'i içinde yer almalı.

Örnek çözümü göster
setTimeout(() => {
  setTimeout(() => {
    console.log('Tamamlandı');
  }, 200);
}, 200);

Kendini test et

  1. Hangisi callback hell belirtisidir?

    • Düz ve kısa fonksiyon zinciri
    • İç içe geçmiş, sağa kayan callback'ler
    • Tek bir senkron fonksiyon
    • Promise kullanımı
    Cevabı göster

    İç içe geçmiş, sağa kayan callback'ler — Doğru! İç içe callback'ler sağa kayarak okunmaz hale gelir.

  2. İç içe callback'i tamamla

    loadUser(id, (err, user) => {
      loadPosts(user, ____ => {
        loadComments(posts, (err, comments) => {});
      });
    });
    Cevabı göster
    loadUser(id, (err, user) => {
      loadPosts(user, (err, posts) => {
        loadComments(posts, (err, comments) => {});
      });
    });
  3. Kavramları eşleştir

    callback hell
    İç içe callback'ler
    pyramid of doom
    Sağa kayan kod
    iç içe callback
    Derin seviye
    return
    Erken çıkış
  4. Callback hell'in temel sorunu nedir?

    • Çok hızlı çalışır
    • Bellek tüketimi fazladır
    • Tarayıcı desteklemez
    • Okunması ve bakımı zordur
    Cevabı göster

    Okunması ve bakımı zordur — Doğru! İç içe geçen yapı okunurluğu ve bakımı zorlaştırır.

Orta seviye bölümündeki tüm dersler