JavaScript Event Loop Macerası

Event loop, JavaScript’in yürütme ve çalışma sürecinin ana çekirdeklerinden birisidir. JavaScript’in hayatımıza kattığı kolaylıkların, single-thread olmasına rağmen bunu hissettirmemesinin ana temelidir. JavaScript event loop yapısının anlaşılması; doğru uygulama yapısının çıkartılması, süreçlerin optimize edilebilmesini ve JavaScript nasıl çalışır sorusuyla ile ilgili birçok farklı konunun daha anlaşılmasını sağlar.

JavaScript event loop özünde, kompleks ve bir o kadar da işlevsel işlemlerin dil doğasından soyutlanıp; tüm bu süreçlerin API ile sağlanması amacıyla hayatımıza girmiştir. Bu yapı; tarayıcı üzerinde Browser API ile sağlanırken, runtime’lar üzerinde (nodejs, denojs gibi) ise kullanılan yürütme ortamının API ile sağlanmaktadır.

Toparlamak gerekirse; JavaScript dilini kullanırken bizim elimizi kolaylaştıran, bize ekstra güç veren ve tüm bunların yanında dilin çekirdeğine yerleştirilmeden, bunu API yardımıyla soyutlanarak ortaya çıkan daha yürütülebilir yapının yönetilmesini sağlayan şey event loop’tur.

JavaScript Event Loop Nasıl Çalışır?

Event loop, yukarıda gördüğünüz animasyondaki gibi sahip olduğumuz 3 yapının yönetilmesini ve bu süreçlerin yürütülmesini sağlar. Aslında bu yapıların neler yaptığını ve ne ifade ettiğini anladığımızda event loop kavramı ile de ilgili birçok fikre sahip olabiliriz.

JavaScript Event Loop Kavramları

Stack (Call Stack)

JS ortamında ürettiğimiz fonksiyonlar ve sabit değişkenler.

WebAPIs

JS dili içerisinden soyutlanıp buraya taşınan kompleks işlemlerin yapıldığı kısım. Call Stack üzeriden çağrılan bir fonksiyon eğer bu kompleks işlemlerden birini yapacak ise, bu fonksiyon Call Stack’ten yani ana yürütülme bölümünden ayrılarak WebAPIs üzerinde çalışmaya başlar. Bu aşamada, Call Stack yapımız bir sonraki fonksiyonu yürütmeye başlar.

Callback Queue

Burası sadece, Call Stack boş iken kendi kuyruğunda biriktirdiği yapıları oraya gönderebilmektedir. Bu kuyruğun içerdiği fonksiyonlar ise bizim Call Stack’ten “bu kompleks işlem” diyerek WebAPIs bölümüne yolladığımız ve orada bu işlem gerçekleştirildikten sonra hazır hâle getirildiği fonksiyonlardır. Call Stack’te yer alan tüm süreç yürütüldükten sonra ve artık Call Stack yeni göreve hazır olduğunda Callback Queue, kendi kuyruğunda biriktirdiği fonksiyonları oraya göndermektedir.

Tüm bu yapıyı kodlar üzerinden inceleyelim. Kodun çıktısını incelemeden önce, kod üzerinden yürüteceğiniz tahminler; sizin yapı üzerinde daha fazla hakimiyet kurmanızda yardımcı olacaktır.

Alıştırma 1:

const main = () => {
    console.log('A');
    setTimeout(() => console.log('B'), 0);
    console.log('C');
}

main();

//Çıktı

console.log(‘A’);

console.log(‘C’);

console.log(‘B’);

1. Tanımladığımız main fonksiyonu içerisinde, ilk başta konsola “A” harfini yazdırıyoruz.
2. Ardından bizim “belli bir saniye sonra şu fonksiyonu çalıştır” diyebilmemizi sağlayan setTimeout fonksiyonu Call Stack‘te sıraya geliyor. Bu fonksiyon, üstteki yazımızda bahsettiğimiz gibi kompleks bir işlem ve bu yüzden JS dilinin çekirdeğinde yer almamakla birlikte WebAPIs üzerinde çalışabilmektedir. Bu işlem Call Stack’te sıraya geldikten sonra, WebAPIs’a gönderilir ve bir call stack’te yer alan bir sonraki işleme geçilir.
3. Bir sonraki satırda yer alan konsola “C” harfinin yazdırılması görevi gerçekleştirilir. Tam bu esnada, bizim bir üst satırda WebAPIs’a bu fonksiyonu çalıştır diye gönderdiğimiz fonksiyon burada 0 saniye sonra (yani hemen) içerisindeki fonksiyonu çalışmaya hazır hale getirip, bahsettiğimiz Callback queue’ye gönderir.
4. Callback queue’nün en önemli özelliği Call stack sürecimiz boş ise buraya yeni bir görev gönderebiliyor olmasııdr. Call Stack bir üstteki aşamada C harfini yazdırdıktan sonra artık yeni görev alabilir durumuna geçmiştir.
5. Artık yeni bir göreve sahip olmayan call stack, callback queue’ya WebAPIs’da çalışmaya hâle getirilierek gönderilmiş fonksiyonlardan sırasıyla alıp çalıştırmaya hazır hâldedir. Kuyruktaki konsola “B” harfini yazdırma görevi call stack’e gönderilip, burada yürütülür.
6. Tüm bu süreçler sona erdikten sonra event loop uyku moduna geçmektedir.

setTimeout Neden Belirtilen süre sonunda çalışmaya başlamaz?

Alıştırmada da gördüğümüz üzere, setTimeout fonksiyonuna verdiğimiz 0 saniye parametresine rağmen fonksiyon istediğimiz zamanda çalışmadı. Bunun asıl nedeni event loop yapısının, setTimeout’u browser API ile çalışmaya göndermesi ve gönderdikten sonra stack’in boş hâle gelerek, işlemdeki diğer işleri almaya hazır olmasıdır. Stack, işlemleri yürütmeye devam ederken, bizim az önce Browser API’ya gönderdiğimiz setTimeout fonksiyonu oradaki işlemini tamamlayıp Callback queue‘ya gelir. Bu kuyruktaki işlemler, stack’in boş hâle gelmesini bekledikleri için, tüm stack’teki işlemler tamamlanana kadar setTimeout içerisinde yer alan fonksiyon çalışmaz ve bekler. Stack işlemleri tamamladıktan sonra ise SetTimeout’a birinci parametre olarak verdiğimiz fonksiyon çalışmaya başlar ve görevini tamamlar. Böyle setTimeout’a verdiğimiz saniye değeri tam olarak onun “şu kadar saniye sonra çalış” anlamına gelmediğini anlayabiliyoruz. Buradaki ince detay ise bu saniyenin tamamen “setTimeout’un callback fonksiyonunu minimum şu saniye sonra çalıştır” anlamına geldiğidir.

JavaScript’in en temel mantıklarından birisi olan hatta “JS Single thread’dır” cümlesi duyulduğunda “Nasıl ya?” tepkisini vermemize neden olan event loop nasıl çalışır tarafına bu yazımızda değindik. JavaScript Promises yapısı isimli makalemize göz atmanızı da tavsiye ederiz.

Kaynaklar:

https://medium.com/front-end-weekly/javascript-event-loop-explained-4cd26af121d4

https://javascript.info/event-loop