Frontend / JavaScript

1. Event Loop, Microtask vs Macrotask

JavaScript tek thread'li çalışır ama asenkron işlemleri event loop sayesinde yönetir. İki kuyruk vardır:

• Microtask kuyruğu: Promise.then, queueMicrotask, async/await
• Macrotask kuyruğu: setTimeout, setInterval, I/O işlemleri Her macrotask'ten sonra, sıradaki macrotask'e geçmeden önce tüm microtask kuyruğu boşaltılır. Bu yüzden:

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
// Çıktı: 1, 4, 3, 2

setTimeout(fn, 0) bile Promise'ten sonra çalışır, çünkü Promise microtask kuyruğuna girer ve o kuyruk her zaman önce boşaltılır.

2. Closures ve Memory Leak'ler

Closure, bir fonksiyonun tanımlandığı kapsamdaki (scope) değişkenleri "hatırlaması"dır. Yaygın memory leak sebepleri:

• Temizlenmeyen event listener'lar (removeEventListener çağrılmaması)
• Closure içinde büyük nesnelere referans tutup onu asla serbest bırakmamak
• setInterval'i durdurmayı unutmak

function attachListener() {
  const bigData = new Array(1000000).fill('x');
  window.addEventListener('resize', () => console.log(bigData.length));
  // Bu listener kaldırılmazsa bigData asla garbage collect edilmez
}

3. Virtual DOM ve Reconciliation

React her state değişiminde gerçek DOM'u değil, önce bir Virtual DOM (JS nesnesi) oluşturur. Eski ve yeni virtual DOM ağaçlarını karşılaştırır (diffing), sadece değişen kısımları gerçek DOM'a uygular (reconciliation). Bu, doğrudan DOM manipülasyonundan çok daha hızlıdır çünkü gerçek DOM işlemleri pahalıdır.

key prop'u burada kritik rol oynar — React'e liste elemanlarını nasıl eşleştireceğini söyler.

4. CSS Temelleri

• Specificity (özgüllük): inline style > ID > class/attribute/pseudo-class > element. Eşitlikte sonradan yazılan kazanır.
• Box model: content-box (varsayılan) vs border-box — box-sizing: border-box padding ve border'ı genişliğe dahil eder.
• Flexbox vs Grid: Flexbox tek boyutlu (satır ya da sütun) düzenler için, Grid iki boyutlu (satır + sütun) düzenler için idealdir.

5. Web Storage

Yöntem	Kapasite	Süre	Sunucuya gönderilir mi
Cookie	~4KB	Ayarlanabilir	Evet, her istekte
localStorage	~5-10MB	Süresiz	Hayır
sessionStorage	~5-10MB	Sekme kapanana kadar	Hayır
IndexedDB	Çok büyük (100MB+)	Süresiz	Hayır

Sık Sorulan Mülakat Soruları

• Event loop nasıl çalışır? Microtask ve macrotask arasındaki fark nedir?
• setTimeout(fn, 0) neden Promise'ten sonra çalışır?
• Closure nedir, memory leak'e nasıl sebep olabilir?
• Virtual DOM nedir, gerçek DOM'a göre neden daha hızlıdır?
• React'te key prop'u neden önemli, olmazsa ne olur?
• CSS specificity nasıl hesaplanır?
• content-box ile border-box arasındaki fark nedir?
• Flexbox ile Grid'i ne zaman kullanırsın?
• localStorage, sessionStorage ve cookie arasındaki farklar nelerdir?
• IndexedDB ne zaman tercih edilir?