JS Callback Helvası: Promise’ler ve Async/Await ile Kurtuluş Hikayesi

Callback Hell: Kabus Nasıl Başladı?

Eğer bir gün JavaScript yazdıysanız, şu senaryoya kesin denk gelmişsinizdir:

getUserData(function(user) {
  getPosts(user.id, function(posts) {
    getComments(posts[0].id, function(comments) {
      console.log(comments);
    });
  });
});

İşte karşınızda bir “callback piramidi”! Bu yapı, kodunuzu okuyan birinin (ve hatta sizin) gözlerinden yaş getirir. Bu kadar karmaşa yetmezmiş gibi, bir yerde hata çıkarsa, neyin nereye gittiğini anlamak için Sherlock Holmes’ten yardım almanız gerekebilir.

Callback Hell’in Yan Etkileri

Callback Hell, sadece estetik bir sorun değil, ciddi yan etkileri olan bir problem:

Okunabilirlik Sorunu: Kod, kitap gibi okunabilir olmaktan çıkıp bir bulmacaya dönüşüyor.
Hata Yönetimi Zorluğu: Bir callback içinde hata olduğunda, o hatayı bulup yönetmek bir işkenceye dönüşüyor.
Bakım Kabusu: Yarın sabah gelip bu kodu düzeltmek zorunda kalacağınızı düşünün… Kahveniz bile bu kabusu hafifletemez.

Ve bu noktada, Leonardo DiCaprio’nun o ünlü sorusu akla geliyor:
“Bu kodun sonu gerçekten açık mı kalacak?”

Promise: İlk Umut Işığı

JavaScript topluluğu, callback’lere alternatif olarak Promise adında bir çözümle geldi. Promise, size şu sözü veriyor:

“Kodun daha okunabilir ve yönetilebilir olacak, söz!”
JS

Promise’ler sayesinde yukarıdaki kod şu hale gelebiliyor:

getUserData()
  .then(user => getPosts(user.id))
  .then(posts => getComments(posts[0].id))
  .then(comments => console.log(comments))
  .catch(error => console.error("Bir şeyler ters gitti!", error));

Ne kadar düzenli görünüyor, değil mi? Artık kodunuzla bir şeyler yaparken, bir tabloya bakar gibi keyifle okuyabilirsiniz.

Async/Await: Kodunuzda Zaman Yolculuğu

Tam her şey daha iyiye gidiyor derken, JavaScript bize bir sürpriz daha yaptı: Async/Await. Promise’lerin tatlı dili bir yana, async/await kodunuzu daha da basitleştirir ve neredeyse senkron bir kod yazıyormuş gibi hissettirir.

Yukarıdaki örneği async/await ile yazalım:

async function fetchComments() {
  try {
    const user = await getUserData();
    const posts = await getPosts(user.id);
    const comments = await getComments(posts[0].id);
    console.log(comments);
  } catch (error) {
    console.error("Bir şeyler ters gitti!", error);
  }
}

Gördüğünüz gibi, kod şimdi daha düz bir yapıya sahip. Neredeyse bir günlük okur gibi, değil mi? “Önce kullanıcı verisini al, sonra gönderileri çek, ardından yorumları getir ve sonunda sonucu göster.” Her şey net, tertemiz.

Async/Await’in Avantajları

Okunabilirlik: Artık kodunuzu yazan kişi değil, okuyacak olan kişi kazanıyor.

Hata Yönetimi: try-catch bloklarıyla hataları daha düzgün bir şekilde ele alabilirsiniz.

Geliştirici Mutluluğu: Kod yazmak artık bir işkence değil, bir sanat.

Callback Hell’den Kurtuluş: Kodunuzun Mutlu Sonu

Bir yazılımcı olarak, hayaliniz kodunuzun tıpkı güzel bir film gibi akıcı olmasıdır. Promise’ler ve async/await sayesinde, bu hayal gerçek oldu. Callback Hell canavarını öldürdük ve şimdi kodumuzda düzen, huzur ve mutluluk var.

Unutmayın, “Her büyük kodun arkasında, okunabilir bir tasarım yatar.” (Bu söz tam olarak böyle değildi sanki ama; neyse siz anladınız). Bu tasarımı yakalamak için Promise ve async/await kullanmayı öğrenin. Bir gün kodunuzla gurur duymanız gerektiğinde, ona bir bakış atın ve deyin ki: “Bu, baştan sona benim eserim.”

Ve kim bilir, belki bir gün, bir başka yazılımcı sizin kodunuzu okuyup şunu söyler:

“Bu kodun gerçekten bir sonu varmış!” 😊
Başka bir yazılımcı!