JavaScript Event Loop

Yasemin Cüni
FLO Teknoloji
Published in
3 min readJun 9, 2023

JavaScript, tarayıcı tabanlı uygulamaların ve web sayfalarının geliştirilmesinde yaygın olarak kullanılan bir programlama dilidir. JavaScript’in bu başarısının temelinde, asenkron programlama yetenekleri yatar. Event Loop, JavaScript’in asenkron yapısının temelini oluşturur ve uygulamanın kesintisiz bir şekilde çalışmasını sağlar. Bu makalede, JavaScript’in event loop mekanizmasını öğreneceğiz.

Event Loop Nedir?

Event loop, JavaScript’in asenkron işlemleri yönetmek için kullandığı bir mekanizmadır. JavaScript’in tek bir iş parçacığı (thread) üzerinde çalıştığı durumlarda, event loop işlemleri sırayla ve uygun bir şekilde yönetir. JavaScript’in asenkron yapısının temelini oluşturur ve JavaScript motorlarının (örneğin, V8 veya SpiderMonkey) içerisinde bulunur.

Event Loop’un çalışma mantığı, aşağıdaki adımlarla açıklanabilir:

  1. İşleme (Call Stack): JavaScript kodu, fonksiyon çağrılarıyla birlikte bir işlem yapılması gerektiğini belirtir. Bu işlemler, call stack adı verilen bir veri yapısında saklanır. Call stack, çağrıların yapıldığı sırayı takip eder ve çalıştırılması gereken fonksiyonların bir listesini tutar.
  2. Web API’ler: Tarayıcı veya diğer ortamlar(Örneğin, Node.js gibi sunucu tarafı JavaScript çalıştırma ortamları) tarafından sağlanan araçlardır ve JavaScript tarafından çağrılan işlemleri gerçekleştirmek için kullanılırlar. Web API’lerini kullanarak, setTimeout, XMLHttpRequest ve fetch gibi işlemler gerçekleştirilir. Web API’leri, işlemleri asenkron olarak çalıştırır ve tamamlandıklarında bir callback fonksiyonunu çağırmak üzere plan yaparlar.
  3. Callback Kuyruğu (Callback Queue): Web API’leri, tamamlanan işlemlerin sonucunda çağrılacak olan callback fonksiyonlarını bir kuyruğa ekler. Bu kuyruk, callback fonksiyonlarının sırasını ve işlemlerin tamamlandığı zamanlamayı korur.
  4. Event Loop: Call Stack’in boş olup olmadığını sürekli olarak kontrol eder. Eğer call stack boşsa, callback kuyruğundaki bir callback fonksiyonunu alır ve call stack’e ekleyerek çalıştırır. Bu sayede, asenkron işlemler sırayla ve uygun bir şekilde gerçekleştirilir.

Bu döngü, JavaScript programı çalıştığı sürece devam eder. Event loop mekanizması, JavaScript’in asenkron işlemleri yönetmesini ve tarayıcıda etkileşimli deneyimlerin gerçekleşmesini sağlar.

Microtask Kuyruğu

Event loop’un işleyişini anlatırken, microtask kuyruğunun da önemli bir rol oynadığını belirtmek gerekir. Microtask kuyruğu, Callback kuyruğuna benzer şekilde çalışır ancak callback kuyruğundan biraz farklıdır. Microtask kuyruğu, Promise’lar ve async/await yapısı gibi microtask’leri içeren işlemleri saklar. Event loop, Call Stack boş olduğunda öncelikli olarak Microtask kuyruğunu kontrol eder ve Microtask’leri çalıştırır. Daha sonra, callback kuyruğunu kontrol eder ve Callback’leri çalıştırır. Bu nedenle, Microtask’ler Callback’lere göre öncelikli olarak çalışır.

Bir örnek ile detaylandıralım.

Yukarıda kod örneğinde;

  1. İlk olarak, “1. İşlem” logu konsola yazdırılır.
  2. setTimeout fonksiyonu çağrılır ve 0ms (sıfır milisaniye) süreyle bir zamanlayıcı başlatılır. Bu, Web API’lerini kullanarak asenkron bir işlemi planlamamızı sağlar.
  3. Promise.resolve().then yapısı kullanılarak bir Promise oluşturulur. Bu Promise, Microtask olarak adlandırılan öncelikli bir kuyruğa eklenir.
  4. “4. İşlem” logu konsola yazdırılır.
  5. Call stack kontrol edilir. Eğer boş ise, Event Loop devreye girer ve callback kuyruğundaki işlemleri kontrol eder.
  6. Microtask kuyruğu kontrol edilir ve Promise.resolve().then yapısı içindeki callback fonksiyonu çalıştırılır. Bu nedenle, “2. İşlem (Promise)” logu konsola yazdırılır.
  7. Callback kuyruğu kontrol edilir ve setTimeout’in zamanlayıcısı 0ms süre sonunda tamamlanır. Bu durumda, “3. İşlem (Timeout)” logu konsola yazdırılır.

Kodun görselleştirilmiş haline aşağıdaki videodan erişebilirsiniz.

Bu adımlar, event loop mekanizmasının çalışma mantığını göstermektedir. Özetle, JavaScript kodu sırayla çalıştırılırken, asenkron işlemler Web API’leri kullanarak planlanır ve tamamlandıklarında callback kuyruğuna veya microtask kuyruğuna eklenir. Event Loop, Call Stack’in boş olup olmadığını sürekli olarak kontrol eder ve boş olduğunda sıradaki işlemi alarak çalıştırır. Böylece, asenkron işlemler sırayla ve uygun bir şekilde gerçekleştirilir.

Özetle;

JavaScript’in event loop mekanizması, asenkron programlamayı mümkün kılar ve JavaScript uygulamalarının hızlı ve etkileşimli olmasını sağlar. Bu makalede, event loop’un nasıl çalıştığını, Call Stack, Web API’leri, Callback kuyruğu ve Microtask kuyruğu gibi kavramları ele aldık. Event Loop, JavaScript kodunun sırayla ve uygun bir şekilde çalışmasını sağlar, böylece asenkron işlemler düzgün bir şekilde yönetilir. Bu bilgiler, biz JavaScript geliştiricileri için önemli bir temel oluşturur ve etkili asenkron programlama becerileri geliştirmemize yardımcı olur.

Konuyla ilgili sormak istediğiniz soru olursa bana her zaman mesaj atabilirsiniz. 🎈

--

--