JavaScript'te Event Loop: Başlangıç Rehberi
Merhaba arkadaşlar, bugün sizlere JavaScript'te Event Loop'tan bahsedeceğim. Bu konu, özellikle JavaScript ve web geliştirme öğrenmeye yeni başlayanlar için oldukça önemlidir. Gelin, adım adım bu önemli kavramı öğrenelim.
Event Loop Nedir?
JavaScript, tek iş parçacıklı (single-threaded) bir dildir ve eş zamanlı (synchronous) olarak çalışır. Yani, JavaScript kodu yukarıdan aşağıya doğru, bir seferde sadece bir işlemi yaparak çalışır. Peki, bu durumda JavaScript nasıl asenkron (asynchronous) işlemleri gerçekleştirir? İşte bu noktada Event Loop devreye girer.
Event Loop, JavaScript'in asenkron işlemleri gerçekleştirmesine olanak tanıyan bir döngüdür. Bu döngü, Call Stack (Çağrı Yığını), Web APIs ve Task Queue (Görev Kuyruğu) gibi yapılar arasında sürekli olarak çalışarak, JavaScript'in eş zamanlı çalışma sınırlamalarını aşmasına yardımcı olur.
Call Stack (Çağrı Yığını)
Call Stack, JavaScript'teki işlemlerin sırayla gerçekleştirildiği yapıdır. İşlemler, yukarıdan aşağıya doğru sırasıyla çalışır ve her işlem tamamlandığında Call Stack'ten çıkar. Eğer yeni bir işlem çağrılırsa, bu işlem Call Stack'in en üstüne eklenir ve çalışmaya başlar.
Web APIs
JavaScript, web tarayıcıları üzerinde çalışırken, web tarayıcısı tarafından sunulan çeşitli API'lere (Application Programming Interfaces) erişim sağlar. Bu API'ler, JavaScript'in temel işlemlerine ek olarak, asenkron işlemler gerçekleştirmesine olanak tanır. Örnek olarak, setTimeout, fetch ve addEventListener gibi işlemler Web APIs sayesinde gerçekleştirilir.
Task Queue (Görev Kuyruğu)
Task Queue, asenkron işlemlerin tamamlanmasının ardından bekletilen işlemlerin sırasını tutan bir yapıdır. Web APIs tarafından tamamlanan asenkron işlemler, Task Queue'ya eklenir ve Call Stack'in boşalmasını bekler.
Event Loop Çalışma Prensibi
JavaScript'te Event Loop'un çalışma prensibi, şu şekildedir:
- Öncelikle, Call Stack'teki (Çağrı Yığını) işlemler yukarıdan aşağıya doğru gerçekleştirilir.
- Eğer Call Stack'teki bir işlem, asenkron bir işlem (örneğin: setTimeout, fetch gibi) içeriyorsa, bu işlem Web APIs tarafına yönlendirilir ve burada işlem gerçekleştirilir.
- Asenkron işlem tamamlandığında, bu işlem Task Queue'ya (Görev Kuyruğu) eklenir.
- Event Loop, sürekli olarak Call Stack'in boş olup olmadığını kontrol eder. Eğer Call Stack boş ise, Event Loop, Task Queue'daki işlemleri Call Stack'e aktarır ve bu işlemler gerçekleştirilir.
Kod Örneği
Şimdi, Event Loop'un nasıl çalıştığını daha iyi anlamak için basit bir örnek üzerinden gidelim:
console.log("Merhaba");
setTimeout(function() {
console.log("Dünya");
}, 1000);
console.log("JavaScript");
Bu kodu çalıştırdığımızda, şu çıktıyı alırız:
Merhaba
JavaScript
Dünya
Burada neler olduğunu Event Loop kavramıyla açıklayalım:
- İlk olarak,
console.log("Merhaba");Call Stack'te çalışır ve "Merhaba" yazdırılır. - Ardından,
setTimeoutfonksiyonu Call Stack'e gelir ve asenkron bir işlem olduğu için Web APIs tarafına yönlendirilir. Bu süre zarfında 1 saniyelik (1000 ms) bekleme süresi başlar. - Sonrasında,
console.log("JavaScript");Call Stack'te çalışır ve "JavaScript" yazdırılır. - Bu sırada,
setTimeoutiçindeki bekleme süresi dolmuştur ve bu işlem Task Queue'ya eklenir. - Event Loop, Call Stack'in boş olduğunu görünce Task Queue'daki işlemi Call Stack'e aktarır.
console.log("Dünya");Call Stack'te çalışır ve "Dünya" yazdırılır.
Böylece, Event Loop sayesinde asenkron işlemler gerçekleştirilmiş olur.
Sonuç
JavaScript'te Event Loop, asenkron işlemleri gerçekleştirmek için önemli bir kavramdır. Call Stack, Web APIs ve Task Queue gibi yapılar arasında sürekli olarak çalışarak, JavaScript'in eş zamanlı çalışma sınırlamalarını aşmasına yardımcı olur. Bu sayede, JavaScript ile daha karmaşık ve performanslı uygulamalar geliştirebiliriz.
Umarım bu başlangıç rehberi Event Loop kavramını daha iyi anlamanıza yardımcı olmuştur. JavaScript öğrenmeye ve geliştirmeye devam edin!
