JavaScript’te 10 İleri Düzey Teknik (Kod Örnekleriyle)

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:
 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   
2. Currying Kullanım Alanı: Fonksiyonları modüler hale getirmek ve önceden parametre ayarlamak. Örnek Kod:
 const indirimUygula = (indirim) => (fiyat) => fiyat - fiyat * indirim / 100; const yuzdeOnIndirim = indirimUygula(10); console.log(yuzdeOnIndirim(100)); // 90   
3. Debouncing ve Throttling Kullanım Alanı: Sık tetiklenen olayları (scroll, input) optimize etmek. Örnek Kod: Debouncing:
 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));   
Throttling:
 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));   
4. Memoization Kullanım Alanı: Performans gerektiren hesaplamaları hızlandırmak. Örnek Kod:
 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   
5. Proxy ile Özel Davranışlar Kullanım Alanı: Nesne manipülasyonlarını kontrol etmek (ör. loglama, doğrulama). Örnek Kod:
 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   
6. Generators Kullanım Alanı: Özel iteratörler oluşturmak ve asenkron süreçleri yönetmek. Örnek Kod:
 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}`); }   
7. Console Yöntemleri Kullanım Alanı: Daha iyi debug ve performans ölçümü. Örnek Kod:
 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');   
8. Structured Cloning ile Derin Kopya Kullanım Alanı: Karmaşık nesnelerin derin kopyasını oluşturmak. Örnek Kod:
 const obj = { a: 1, b: { c: 2 } }; const derinKopya = structuredClone(obj); console.log(derinKopya);   
9. Self-Invoking Functions Kullanım Alanı: Global scope’u kirletmeden kod encapsulation. Örnek Kod:
 (function() {   const özelVeri = 'Bu sadece burada tanımlı';   console.log('Kod başlatıldı'); })();   
Bu teknikleri uygulayarak kodlarınızı daha temiz, performanslı ve esnek hale getirebilirsiniz.

Sıkça Sorulan Sorular

Bunlar en sık sorulan sorular. Aradığınızı bulamadınız mı? Ekibimize ulaşın!