JavaScript 101: Event Loop

2 min readJan 11, 2024

Merhaba! JavaScript 101 serisinin 13. yazısına hoş geldiniz. Bu yazıda, JavaScript’in temel asenkron programlama yapısını sağlayan ve kritik bir konu olan “Event Loop” (Olay Döngüsü) konseptini ele alacağız. Event Loop, JavaScript’in asenkron işlemleri nasıl yönettiğini anlamak için önemli bir anahtardır.

1. Event Loop Nedir?

Event Loop, JavaScript’in çalışma mantığının temelini oluşturan bir mekanizmadır. JavaScript, tek bir iş parçacığı (thread) üzerinde çalışır ve bu iş parçacığı, Event Loop sayesinde asenkron işlemleri yönetir.

Genel olarak, JavaScript bir işlemi başlatır ve bu işlem tamamlanıncaya kadar bekler. Ancak, asenkron işlemler (örneğin, AJAX çağrıları, setTimeout gibi) tamamlandığında, bu işlemler Event Loop’a devredilir.

2. Call Stack (Çağrı Yığını)

Call Stack, JavaScript’in çalışma sırasını takip ettiği veri yapısını temsil eder. Her fonksiyon çağrıldığında, call stacke eklenir. Fonksiyon işlemini tamamladığında veya bir asenkron işlem başlatıldığında, call stacktençıkarılır.

function sayHello() {
  console.log('Merhaba!');
}

function greet() {
  sayHello();
}

greet();

Yukarıdaki örnekte, greet fonksiyonu call stacke eklenir, ardından içinde çağrılan sayHello fonksiyonu eklenir. sayHello fonksiyonu tamamlandığında, sırasıyla call stackten çıkarılırlar.

3. Callback Queue (Callback Kuyruğu)

Callback Queue, asenkron işlemlerin tamamlanması ve Event Loop’a devredilmesi sonrasında işlemlerin beklediği bir kuyruktur. Bu kuyruk, asenkron işlemlerden gelen callback fonksiyonlarını içerir.

setTimeout(() => {
  console.log('Zaman aşımı gerçekleşti!');
}, 2000);

Yukarıdaki örnekte, setTimeout fonksiyonu call stackten çıkarıldıktan sonra, belirtilen süre geçtikten sonra Callback Queue'ya eklenir. Event Loop, call stack boşaldığında bu kuyruğu kontrol eder ve işlemleri sırayla çağırır.

4. Event Loop’un İşleyişi

Event Loop, Call Stack’i ve Callback Queue’yu sürekli olarak kontrol eder. Eğer Call Stack boşsa ve Callback Queue’da işlem bekliyorsa, Event Loop sıradaki işlemi Call Stack’e ekler. Bu işlem, asenkron işlemlerin ardı ardına çalışmasını sağlar.

console.log('1. İşlem');

setTimeout(() => {
  console.log('2. İşlem');
}, 0);

console.log('3. İşlem');

Yukarıdaki örnekte, sırasıyla “1. İşlem”, “3. İşlem” ve “2. İşlem” yazdırılır. Çünkü setTimeout asenkron bir işlemdir ve 0 milisaniye sonra bile olsa, Call Stack boşaldığında Callback Queue'dan çekilir.

5. Mikro Görevler (Microtasks) ve Makro Görevler (Macrotasks)

Event Loop, iki farklı türde görevi yönetir: Mikro Görevler ve Makro Görevler.

Mikro Görevler (Microtasks): Promise’lerin çözülmesi gibi kısa süren görevlerdir. Mikro görevler, Callback Queue’den önce Call Stack’e eklenir.
Makro Görevler (Macrotasks): Timer fonksiyonları (setTimeout, setInterval) gibi uzun süren görevlerdir. Makro görevler, Callback Queue’den sonra Call Stack’e eklenir.

console.log('1. İşlem');

setTimeout(() => {
  console.log('2. İşlem');
}, 0);

Promise.resolve().then(() => {
  console.log('3. İşlem');
});

console.log('4. İşlem');

Yukarıdaki örnekte, sırasıyla “1. İşlem”, “4. İşlem”, “3. İşlem” ve “2. İşlem” yazdırılır. Çünkü mikro görev (Promise) önce gerçekleşir, ardından makro görev (setTimeout) çalışır.

Event Loop’un bu özellikleri, JavaScript’in asenkron yapısını anlamamızı sağlar. Bu, özellikle web tarayıcılarındaki kullanıcı etkileşimleri ve network işlemleri gibi durumlar için önemlidir. Umarım bu yazı, Event Loop ve asenkron programlama konusundaki temel kavramları anlamanıza yardımcı olur.
JavaScript serüveninizde başarılar :)