Bir önceki makalede Call Stack'i öğrendik. Şimdi akıllara şu soru geliyor: "JavaScript aynı anda sadece bir şey yapabiliyorsa, 3 saniyelik bir zamanlayıcı çalışırken her şey durur mu?" Cevap: Hayır! İşte bu makalede JavaScript'in bu "sihri" nasıl yaptığını öğreneceğiz.
Single-Threaded (Tek İş Parçacıklı) Ne Demek?
JavaScript single-threaded bir dildir. Bu, herhangi bir anda en fazla bir satır kodun çalıştığı anlamına gelir. JavaScript aynı anda iki işi yapamaz - multitasking yapamaz.
Görsel Analoji
Bir restoranda tek garson düşünün:
- Garson aynı anda sadece bir masaya hizmet edebilir
- Sipariş alırken başka bir masaya koşamaz
- Ama peş peşe hızlıca farklı masalara gidebilir
İşte JavaScript de böyle çalışır - çok hızlı, ama tek seferde tek iş.
Problem: Zaman Alan İşlemler
Eğer JavaScript tek iş parçacıklıysa, şu kod ne olur?
console.log("Başladı");
// 5 saniye bekle (gerçek dünyada API çağrısı olabilir)
// ???
console.log("Bitti");Eğer JavaScript 5 saniye boyunca "bekleseydi", tüm sayfa donardı:
- Butonlara tıklayamazdınız
- Scroll çalışmazdı
- Hiçbir animasyon olmazdı
Neyse ki, bu böyle çalışmıyor!
Web API'ler: Tarayıcının Süper Güçleri
İşte sihrin kaynağı: Web API'ler
Tarayıcılar (Chrome, Firefox, Safari) JavaScript'ten çok daha fazlasını yapabilir. Tarayıcılar genellikle C++ gibi dillerle yazılmıştır ve JavaScript'in yapamadığı işleri üstlenirler.
JavaScript'in Tarayıcıya Devrettiği İşler
| İşlem | Web API |
|---|---|
| Zamanlayıcılar | setTimeout, setInterval |
| HTTP İstekleri | fetch, XMLHttpRequest |
| DOM Olayları | Event Listeners |
| Konum Bilgisi | Geolocation API |
| Yerel Depolama | localStorage, sessionStorage |
setTimeout Nasıl Çalışır?
console.log("1 - Başladı");
setTimeout(function() {
console.log("2 - Zamanlayıcı bitti");
}, 3000);
console.log("3 - Devam ediyor");Çıktı sırası:
1 - Başladı
3 - Devam ediyor
(3 saniye sonra)
2 - Zamanlayıcı bittiSahne Arkası
┌─────────────────────────────────────────────────────────────────┐
│ TARAYICI │
│ ┌──────────────┐ ┌──────────────────────────────────────┐ │
│ │ JavaScript │ │ Web API'ler │ │
│ │ Motoru │ │ ┌─────────────────────────────────┐ │ │
│ │ │───▶│ │ setTimeout: 3 saniye bekle... │ │ │
│ │ Call Stack │ │ │ (JavaScript bu sırada boş!) │ │ │
│ │ │◀───│ │ ...3 saniye doldu, callback'i │ │ │
│ │ │ │ │ geri gönder │ │ │
│ └──────────────┘ │ └─────────────────────────────────┘ │ │
│ └──────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘Adım adım:
- JavaScript
setTimeout'u görür - "Hey tarayıcı, 3 saniye say ve sonra bu fonksiyonu çalıştır" der
- JavaScript durmuyor, hemen sonraki satıra geçiyor
- Tarayıcı arka planda sayıyor (JavaScript bunu yapmıyor!)
- 3 saniye dolunca, tarayıcı callback'i "callback queue"ya ekler
- JavaScript boşaldığında (Call Stack boş), callback çalışır
Gerçek Hayat Örneği: Veri Yükleme Simülasyonu
console.log("📱 Uygulama başlatılıyor...");
// Kullanıcı verilerini "yükle" (simülasyon)
setTimeout(function() {
console.log("👤 Kullanıcı verileri yüklendi");
}, 2000);
// Ürünleri "yükle" (simülasyon)
setTimeout(function() {
console.log("🛒 Ürünler yüklendi");
}, 1000);
// Bildirimleri "yükle" (simülasyon)
setTimeout(function() {
console.log("🔔 Bildirimler yüklendi");
}, 1500);
console.log("⏳ Veriler yükleniyor...");Çıktı:
📱 Uygulama başlatılıyor...
⏳ Veriler yükleniyor...
(1 saniye sonra) 🛒 Ürünler yüklendi
(1.5 saniye sonra) 🔔 Bildirimler yüklendi
(2 saniye sonra) 👤 Kullanıcı verileri yüklendiDikkat edin: Kod sırasına göre değil, süre sırasına göre çalıştı!
0 Milisaniye setTimeout Bile Bekler!
console.log("Birinci");
setTimeout(function() {
console.log("İkinci");
}, 0); // 0 milisaniye!
console.log("Üçüncü");Çıktı:
Birinci
Üçüncü
İkinciNeden? Çünkü setTimeout her zaman Web API'ye gider, 0 ms bile olsa. Callback, Call Stack tamamen boşaldıktan sonra çalışır.
Event Loop: Orkestra Şefi
Tüm bu koordinasyonu sağlayan mekanizmaya Event Loop denir:
┌─────────────────────────────────────────────────────────────┐
│ EVENT LOOP │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────────────┐ │
│ │ Call │ │ Web │ │ Callback │ │
│ │ Stack │ ───▶ │ APIs │ ───▶ │ Queue │ │
│ │ │ │ │ │ │ │
│ └──────────┘ └──────────┘ └──────────────────┘ │
│ ▲ │ │
│ └──────────────────────────────────────┘ │
│ (Stack boşsa, queue'dan al) │
└─────────────────────────────────────────────────────────────┘- Call Stack: Şu an çalışan kod
- Web APIs: Tarayıcının yönettiği asenkron işlemler
- Callback Queue: Çalışmaya hazır callback'ler sırası
- Event Loop: Stack boş mu diye kontrol eden mekanizma
Gerçek Hayat Örneği: Buton Tıklama
const buton = document.querySelector('#yukleBtn');
buton.addEventListener('click', function() {
console.log("Buton tıklandı!");
// API'den veri çek (simülasyon)
setTimeout(function() {
console.log("Veriler geldi!");
// Sayfayı güncelle
}, 2000);
console.log("Yükleniyor...");
});
console.log("Sayfa hazır, butona tıklayabilirsiniz.");Kullanıcı butona tıkladığında:
Sayfa hazır, butona tıklayabilirsiniz.
(kullanıcı tıklar)
Buton tıklandı!
Yükleniyor...
(2 saniye sonra)
Veriler geldi!Bloklamayan (Non-Blocking) Kod
Bu yapı sayesinde JavaScript bloklamayan (non-blocking) çalışır:
// ❌ Bloklayan kod (JavaScript'te bu şekilde bekleyemezsiniz)
console.log("Başla");
bekle(3000); // JavaScript'te böyle bir fonksiyon yok!
console.log("3 saniye sonra");
// ✅ Bloklamayan kod (doğru yol)
console.log("Başla");
setTimeout(function() {
console.log("3 saniye sonra");
}, 3000);
console.log("Bu hemen çalışır");Özet
Bu makalede öğrendiklerimiz:
✅ JavaScript single-threaded'dır - aynı anda tek iş yapar
✅ Web API'ler zaman alan işleri tarayıcıya devreder
✅ setTimeout JavaScript'i bloklamaz, tarayıcı sayar
✅ Event Loop, callback'leri Call Stack'e geri getirir
✅ Bu yapı sayesinde JavaScript non-blocking çalışır
Bir sonraki makalede bu asenkron yapının getirdiği sorunu - Callback Hell - ve nasıl çözülebileceğini göreceğiz.
