JavaScript'te Olay Döngüsü Nasıl Eşzamanlı Kodları Yönetir?

JavaScript, tek bir iş parçacığıyla çalışan bir dil olarak bilinir. Bu da demek oluyor ki, kodunuz aynı anda yalnızca bir işi yapabilir. Peki, o zaman tarayıcıdan veri çekmek veya bir düğmeye tıklamaya yanıt vermek gibi eşzamanlı (asenkron) işlemleri nasıl gerçekleştiriyor? Cevap, JavaScript'in olay döngüsü (event loop) adındaki mekanizmada gizli.

Bu sistem, JavaScript'in tek iş parçacığı sınırlamasını aşmasına ve dış kaynaklarla (örneğin ağ istekleri veya zamanlayıcılar) etkileşime girmesine olanak tanır. Olay döngüsünün nasıl çalıştığını anlamak için, JavaScript'in arka planda kullandığı temel yapıları incelemek gerekiyor.

Call Stack: Kodunuzun Sırası

Call Stack, adından da anlaşılacağı gibi, bir yığın veri yapısıdır ve LIFO (Son Giren İlk Çıkar) ilkesiyle çalışır. JavaScript motoru, herhangi bir fonksiyon çağrıldığında onu bu yığına ekler. Örneğin:

function birinci() {
  ikinci();
}

function ikinci() {
  console.log("Merhaba");
}

birinci();

Bu kod çalıştırıldığında:

• birinci() yığına eklenir.
• birinci(), ikinci()'yi çağırır ve onu yığının üzerine ekler.
• ikinci() tamamlandığında yığından çıkarılır.
• Ardından birinci() yığından çıkarılır.

Global kod (fonksiyon dışında yazılan kodlar) da ilk olarak yığına eklenir, çünkü JavaScript motoru bir dosyayı okuduğunda Global Execution Context'i oluşturur ve bunu call stack'in en altına yerleştirir.

Web API'ler: Dış Dünyaya Köprü

JavaScript'in kendisi yalnızca veri işleme ve mantık yürütmeyle ilgilenir. Tarayıcıya erişimi yoktur — tıklamalar, ağ istekleri veya zamanlayıcılar gibi işlemler, Web API'ler aracılığıyla gerçekleşir. Bu API'ler, tarayıcının sunduğu ve JavaScript'in kullanabileceği fonksiyonlardır.

Örneğin:

• fetch(): Ağ üzerinden veri almak için.
• setTimeout(): Belirli bir süre sonra bir fonksiyonu çalıştırmak için.
• addEventListener(): Kullanıcı etkileşimlerine yanıt vermek için.

Bu işlemler, JavaScript'in ana iş parçacığının dışında, tarayıcının kendi iş parçacığında gerçekleşir. Bu sayede, JavaScript'in ana akışı bloke olmadan uzun süren işlemler yapılabilir.

Node.js'te Farklılıklar

Tarayıcı dışında kullanılan Node.js'te, Web API'lerin yerini libuv adlı bir kütüphane alır. Node.js ayrıca, Microtask Queue'dan bile daha yüksek önceliğe sahip olan nextTick Queue'yu da yönetir.

Görev Kuyrukları: Geri Çağrılar İçin Bekleme Alanı

JavaScript'teki eşzamanlı işlemler tamamlandığında, sonuçlarını işlemek için bir kuyruğa eklenirler. Bu kuyruklar ikiye ayrılır:

1. Mikrogörev Kuyruğu (Microtask Queue)

Mikrogörevler, JavaScript motorunun içinde gerçekleşen ve hemen tamamlanan işlemlerdir. Bu kuyruğa eklenen geri çağrılar, öncelikli olarak işlenir. Mikrogörevlerin örnekleri:

• Promise.then()
• Promise.catch()
• async/await
• queueMicrotask()

Mikrogörevler, mevcut senkron kod tamamlandıktan hemen sonra işlenir. Olay döngüsü, call stack boşaldığında mikrogörev kuyruğunu tamamen boşaltana kadar diğer kuyruklara geçmez.

2. Görev Kuyruğu (Task Queue / Macrotask Queue)

Görev kuyruğu, dış kaynaklarca (örneğin Web API'ler) tamamlanan işlemlerin geri çağrılarını depolar. Bu kuyruğun örnekleri:

• setTimeout()
• setInterval()
• fetch()

Görevler, mikrogörevlerden sonra işlenir. Olay döngüsü, mikrogörev kuyruğunu boşalttıktan sonra görev kuyruğundan bir öğeyi call stack'e aktarır.

Olay Döngüsü: Tüm Süreci Koordine Eden Mekanizma

Olay döngüsü, JavaScript'in sonsuz bir döngü gibi çalışan çekirdek bileşenidir. Temel görevi, call stack, mikrogörev kuyruğu ve görev kuyruğu arasındaki senkronizasyonu sağlamaktır. İşleyiş sırası şu şekildedir:

1. Call stack boşalana kadar kod senkron olarak çalışır.
2. Call stack boşaldığında, olay döngüsü mikrogörev kuyruğunu tamamen boşaltır.
3. Mikrogörev kuyruğu boşaldıktan sonra, görev kuyruğundan bir öğeyi call stack'e aktarır.
4. Call stack'e aktarılan görev tamamlandığında, olay döngüsü tekrar mikrogörev kuyruğunu kontrol eder.
5. Döngü bu şekilde devam eder.

Bir Örnek Üzerinden Tam Süreci Anlamak

Aşağıdaki basit JavaScript kodunu inceleyelim:

function topla(a, b) {
  return a + b;
}

console.log("Senkron 1");
console.log(topla(5, 5));

setTimeout(() => {
  console.log("Eşzamanlı 2");
}, 0);

Promise.resolve("Eşzamanlı 1").then((mesaj) => {
  console.log(mesaj);
});

console.log("Senkron 2");

Kodun çalışma sırası şu şekilde gerçekleşir:

1. Global Execution Context call stack'e eklenir.
2. console.log("Senkron 1") call stack'e eklenir, çalıştırılır ve çıkarılır.
3. topla(5, 5) call stack'e eklenir. Fonksiyonun sonucu hesaplanır ve console.log(10) çalıştırılır.
4. setTimeout() call stack'e eklenir, tarayıcının Web API'sinde bir zamanlayıcı başlatır ve hemen call stack'ten çıkarılır. Zamanlayıcı tamamlandığında, geri çağırma fonksiyonu görev kuyruğuna eklenir.
5. Promise.resolve() call stack'e eklenir ve .then() geri çağırma fonksiyonu mikrogörev kuyruğuna eklenir.
6. console.log("Senkron 2") call stack'e eklenir, çalıştırılır ve çıkarılır.
7. Global Execution Context call stack'ten çıkarılır.
8. Call stack boş olduğundan olay döngüsü mikrogörev kuyruğunu boşaltır ve console.log("Eşzamanlı 1") çalıştırılır.
9. Mikrogörev kuyruğu boşaldıktan sonra, görev kuyruğundaki setTimeout geri çağırma fonksiyonu call stack'e aktarılır ve console.log("Eşzamanlı 2") çalıştırılır.

Bu süreç, JavaScript'in nasıl tek iş parçacığıyla bile eşzamanlı işlemleri yönetebildiğini gösteriyor. Olay döngüsü ve görev kuyrukları, modern web uygulamalarının performansını ve yanıt verme süresini doğrudan etkileyen kritik bileşenlerdir.

Günümüzde, Node.js ve tarayıcı ortamlarında kullanılan bu mekanizma, JavaScript'in tek iş parçacığı sınırlamasının ötesine geçmesine olanak tanır. Yeni projeler geliştirirken veya performansı optimize ederken, olay döngüsünün ve kuyrukların nasıl çalıştığını anlamak, daha verimli ve öngörülebilir uygulamalar inşa etmenize yardımcı olacaktır.