M

MLOG

Türkçe

JavaScript Olay Döngüsünü basitleştirme: Her seviyeden geliştirici için, eşzamansız programlama, eşzamanlılık ve performans optimizasyonunu kapsayan kapsamlı bir rehber.

Olay Döngüsü: Eşzamansız JavaScript'i Anlamak

Web'in dili olan JavaScript, dinamik doğası ve etkileşimli ve duyarlı kullanıcı deneyimleri yaratma yeteneği ile bilinir. Ancak, temelinde JavaScript tek iş parçacıklıdır, yani aynı anda yalnızca bir görev yürütebilir. Bu bir zorluk yaratır: JavaScript, bir sunucudan veri getirme veya kullanıcı girdisi bekleme gibi zaman alan görevleri, diğer görevlerin yürütülmesini engellemeden ve uygulamayı yanıt vermez hale getirmeden nasıl halleder? Cevap, eşzamansız JavaScript'in nasıl çalıştığını anlamada temel bir kavram olan Olay Döngüsünde yatmaktadır.

Olay Döngüsü Nedir?

Olay Döngüsü, JavaScript'in eşzamansız davranışını güçlendiren motordur. JavaScript'in tek iş parçacıklı olmasına rağmen, birden fazla işlemi eşzamanlı olarak işlemesine izin veren bir mekanizmadır. Onu, zaman alan işlemlerin ana iş parçacığını engellememesini sağlayarak görev akışını yöneten bir trafik kontrolcüsü olarak düşünün.

Olay Döngüsünün Temel Bileşenleri

Bunu `setTimeout` kullanarak basit bir örnekle açıklayalım:

console.log('Başlangıç');

setTimeout(() => {
 console.log('setTimeout İçinde');
}, 2000);

console.log('Son');

Kodun nasıl çalıştığına dair bir örnek:

  1. `console.log('Başlangıç')` ifadesi yürütülür ve konsola yazdırılır.
  2. `setTimeout` işlevi çağrılır. Bu bir Web API işlevidir. Geri çağırma işlevi `() => { console.log('setTimeout İçinde'); }`, 2000 milisaniyelik (2 saniye) bir gecikmeyle birlikte `setTimeout` işlevine geçirilir.
  3. `setTimeout` bir zamanlayıcı başlatır ve kritik olarak ana iş parçacığını *engellemez*. Geri çağırma hemen yürütülmez.
  4. `console.log('Son')` ifadesi yürütülür ve konsola yazdırılır.
  5. 2 saniye (veya daha fazla) sonra, `setTimeout` içindeki zamanlayıcı sona erer.
  6. Geri çağırma işlevi geri çağırma kuyruğuna yerleştirilir.
  7. Olay Döngüsü çağrı yığınını kontrol eder. Boşsa (yani başka kod çalışmıyorsa), Olay Döngüsü geri çağırmayı geri çağırma kuyruğundan alır ve çağrı yığınına iter.
  8. Geri çağırma işlevi yürütülür ve `console.log('setTimeout İçinde')` konsola yazdırılır.

Çıktı şu şekilde olacaktır:

Başlangıç
Son
setTimeout İçinde

'Son'un 'setTimeout İçinde'den *önce* yazdırıldığına dikkat edin, 'setTimeout İçinde' tanımlanmış olsa bile. Bu, eşzamansız davranışı gösterir: `setTimeout` işlevi, sonraki kodun yürütülmesini engellemez. Olay Döngüsü, geri çağırma işlevinin *belirtilen gecikmeden sonra* ve *çağrı yığını boş olduğunda* yürütülmesini sağlar.

Eşzamansız JavaScript Teknikleri

JavaScript, eşzamansız işlemleri işlemek için çeşitli yollar sunar:

Geri Çağırmalar

Geri çağırmalar en temel mekanizmadır. Diğer işlevlere argüman olarak geçirilen ve bir eşzamansız işlem tamamlandığında yürütülen işlevlerdir. Basit olmakla birlikte, geri çağırmalar, birden fazla iç içe eşzamansız işlemle uğraşırken "geri çağırma cehennemi"ne veya "kader piramidi"ne yol açabilir.


function fetchData(url, callback) {
 fetch(url)
 .then(response => response.json())
 .then(data => callback(data))
 .catch(error => console.error('Hata:', error));
}

fetchData('https://api.example.com/data', (data) => {
 console.log('Veri alındı:', data);
});

Vaatler

Vaatler, geri çağırma cehennemi sorununu gidermek için tanıtıldı. Bir Vaat, bir eşzamansız işlemin (veya başarısızlığının) olası tamamlanmasını ve bunun sonucunda ortaya çıkan değeri temsil eder. Vaatler, eşzamansız kodu daha okunabilir hale getirir ve eşzamansız işlemleri zincirlemek için `.then()` ve hataları işlemek için `.catch()` kullanarak yönetmeyi kolaylaştırır.


function fetchData(url) {
 return fetch(url)
 .then(response => response.json());
}

fetchData('https://api.example.com/data')
 .then(data => {
 console.log('Veri alındı:', data);
 })
 .catch(error => {
 console.error('Hata:', error);
 });

Async/Await

Async/Await, Vaatlerin üzerine kurulmuş bir söz dizimidir. Eşzamansız kodu daha çok eşzamanlı kod gibi görünmesini ve davranmasını sağlayarak, daha okunabilir ve anlaşılması daha kolay hale getirir. `async` anahtar sözcüğü, eşzamansız bir işlevi bildirmek için kullanılır ve `await` anahtar sözcüğü, bir Vaat çözümlenene kadar yürütmeyi duraklatmak için kullanılır. Bu, eşzamansız kodun daha sıralı hissetmesini sağlar, derin iç içe geçmeyi önler ve okunabilirliği artırır.


async function fetchData(url) {
 try {
 const response = await fetch(url);
 const data = await response.json();
 console.log('Veri alındı:', data);
 } catch (error) {
 console.error('Hata:', error);
 }
}

fetchData('https://api.example.com/data');

Eşzamanlılık ve Paralellik

Eşzamanlılık ve paralellik arasındaki farkı anlamak önemlidir. JavaScript'in Olay Döngüsü, birden fazla görevi *aynı anda* yönetmek anlamına gelen eşzamanlılığı sağlar. Ancak, tarayıcıdaki veya Node.js'nin tek iş parçacıklı ortamındaki JavaScript, genellikle görevleri birer birer (tek seferde) ana iş parçacığında yürütür. Öte yandan paralellik, birden fazla görevi *eş zamanlı olarak* yürütmek anlamına gelir. JavaScript tek başına gerçek paralellik sağlamaz, ancak Web Çalışanları (tarayıcılarda) ve `worker_threads` modülü (Node.js'de) gibi teknikler, ayrı iş parçacıklarını kullanarak paralel yürütmeye izin verir. Web Çalışanlarının kullanılması, hesaplama açısından yoğun görevleri boşaltmak, ana iş parçacığını engellemelerini önlemek ve küresel kullanıcılar için geçerliliği olan web uygulamalarının duyarlılığını iyileştirmek için kullanılabilir.

Gerçek Dünya Örnekleri ve Hususlar

Olay Döngüsü, web geliştirme ve Node.js geliştirmesinin birçok yönü için çok önemlidir:

Performans Optimizasyonu ve En İyi Uygulamalar

Performanslı JavaScript kodu yazmak için Olay Döngüsünü anlamak çok önemlidir:

Küresel Hususlar

Küresel bir kitle için uygulamalar geliştirirken, aşağıdakileri göz önünde bulundurun:

Sonuç

Olay Döngüsü, verimli eşzamansız JavaScript kodu anlamada ve yazmada temel bir kavramdır. Nasıl çalıştığını anlayarak, ana iş parçacığını engellemeden birden çok işlemi eşzamanlı olarak işleyen, duyarlı ve performanslı uygulamalar oluşturabilirsiniz. İster basit bir web uygulaması ister karmaşık bir Node.js sunucusu oluşturuyor olun, Olay Döngüsünü iyi kavramak, küresel bir kitleye sorunsuz ve ilgi çekici bir kullanıcı deneyimi sunmaya çalışan herhangi bir JavaScript geliştiricisi için çok önemlidir.