JavaScript’te 10 İleri Düzey Teknik (Kod Örnekleriyle)
JavaScript’te 10 İleri Düzey Teknik (Kod Örnekleriyle) JavaScript, geliştiricilere kodlarını optimize etmek, daha temiz ve okunabilir hale getirmek için birçok güçlü araç sunar. Bu yazıda, ileri düzey teknikleri ve bu tekniklerin kullanıldığı senaryoları detaylı şekilde inceleyeceğiz. 1. Destructuring ile Alias Kullanımı Kullanım Alanı: API’den gelen karmaşık verileri daha anlamlı hale getirmek. Örnek Kod: 2. Currying Kullanım Alanı: Fonksiyonları modüler hale getirmek ve önceden parametre ayarlamak. Örnek Kod: 3. Debouncing ve Throttling Kullanım Alanı: Sık tetiklenen olayları (scroll, input) optimize etmek. Örnek Kod: Debouncing: Throttling: 4. Memoization Kullanım Alanı: Performans gerektiren hesaplamaları hızlandırmak. Örnek Kod: 5. Proxy ile Özel Davranışlar Kullanım Alanı: Nesne manipülasyonlarını kontrol etmek (ör. loglama, doğrulama). Örnek Kod: 6. Generators Kullanım Alanı: Özel iteratörler oluşturmak ve asenkron süreçleri yönetmek. Örnek Kod: 7. Console Yöntemleri Kullanım Alanı: Daha iyi debug ve performans ölçümü. Örnek Kod: 8. Structured Cloning ile Derin Kopya Kullanım Alanı: Karmaşık nesnelerin derin kopyasını oluşturmak. Örnek Kod: 9. Self-Invoking Functions Kullanım Alanı: Global scope’u kirletmeden kod encapsulation. Örnek Kod: Bu teknikleri uygulayarak kodlarınızı daha temiz, performanslı ve esnek hale getirebilirsiniz.
const apiResponse = { first_name: 'John', user_age: 30, address: { city: 'New York', zip: '10001' } }; const { first_name: ad, user_age: yaş, address: { city: şehir } } = apiResponse; console.log(ad, yaş, şehir); // John, 30, New York const indirimUygula = (indirim) => (fiyat) => fiyat - fiyat * indirim / 100; const yuzdeOnIndirim = indirimUygula(10); console.log(yuzdeOnIndirim(100)); // 90
function debounce(func, delay) { let timeoutId; return function(...args) { clearTimeout(timeoutId); timeoutId = setTimeout(() => func(...args), delay); }; } const arama = debounce((kelime) => console.log(`${kelime} aranıyor...`), 300); document.querySelector('#searchInput').addEventListener('input', (e) => arama(e.target.value)); function throttle(func, delay) { let lastCall = 0; return function(...args) { const now = Date.now(); if (now - lastCall >= delay) { lastCall = now; func(...args); } }; } window.addEventListener('scroll', throttle(() => console.log('Scrolled'), 300)); const memoize = (fn) => { const cache = {}; return (...args) => { const key = JSON.stringify(args); if (!cache[key]) cache[key] = fn(...args); return cache[key]; }; }; const fibonacci = memoize((n) => (n <= 1 ? n : fibonacci(n - 1) + fibonacci(n - 2))); console.log(fibonacci(40)); // 102334155 const kullanici = { isim: 'Ali', yas: 25 }; const proxy = new Proxy(kullanici, { get: (hedef, ozellik) => { console.log(`${ozellik} erişildi.`); return hedef[ozellik]; }, set: (hedef, ozellik, deger) => { console.log(`${ozellik} güncellendi: ${deger}`); hedef[ozellik] = deger; return true; }, }); proxy.yas = 30; // yas güncellendi: 30 console.log(proxy.isim); // isim erişildi: Ali function* nesneIterasyonu(obj) { for (let key in obj) { yield [key, obj[key]]; } } const data = { ad: 'Ali', yaş: 25 }; for (let [key, value] of nesneIterasyonu(data)) { console.log(`${key}: ${value}`); } console.group('Debug Group'); console.log('Debug Bilgisi 1'); console.log('Debug Bilgisi 2'); console.groupEnd(); console.time('İşlem Süresi'); for (let i = 0; i < 1e6; i++) {} // Zorlu işlem console.timeEnd('İşlem Süresi'); const obj = { a: 1, b: { c: 2 } }; const derinKopya = structuredClone(obj); console.log(derinKopya); (function() { const özelVeri = 'Bu sadece burada tanımlı'; console.log('Kod başlatıldı'); })();