İleri Seviye JavaScript Teknikleri

İleri Seviye JavaScript Teknikleri

1. Asenkron Programlama ve Promises

JavaScript, tek iş parçacıklı bir yapıya sahip olmasına rağmen asenkron işlemleri etkin bir şekilde gerçekleştirebilir. Asenkron programlama, zaman alan işlemleri bloklamadan arka planda yürütmeye olanak tanır. Bu tür işlemler arasında dosya okuma/yazma, ağ istekleri ve zamanlayıcılar bulunur.

Promises ise asenkron işlemleri yönetmenin modern bir yoludur. Promise, bir işlemin sonucunu gelecekte almayı vaat eder ve üç durumda olabilir: “pending” (beklemede), “fulfilled” (başarılı) ve “rejected” (başarısız). Promise tabanlı yapılar, “callback hell” olarak bilinen sıkıntıları gidermeye yardımcı olur ve kodun daha okunabilir olmasını sağlar. Örneğin:

javascriptKodu kopyalalet myPromise = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Başarılı!'), 1000);
});

myPromise.then((message) => {
    console.log(message); // 1 saniye sonra 'Başarılı!' yazdırır
});

Bu örnek, zamanla tamamlanacak bir işlemi nasıl yönettiğimizi gösterir. Ayrıca async/await kullanımı ile bu işlemler daha da sadeleştirilebilir.

2. JavaScript’te Modüler Yapı

JavaScript’in modüler yapıları, büyük uygulamaların kodunu düzenlemek ve modüler hale getirmek için kullanılır. ES6 ile birlikte gelen modül sistemi (import/export), JavaScript kodlarını farklı dosyalara bölerek daha temiz ve sürdürülebilir bir yapı sunar. Bu sistem, özellikle modern framework’lerde (React, Angular, Vue.js gibi) vazgeçilmezdir. Temel örnek olarak, bir modülü şu şekilde tanımlayabiliriz:

javascriptKodu kopyala// math.js
export function topla(a, b) {
  return a + b;
}

Ve başka bir dosyada bu modülü şu şekilde kullanabiliriz:

javascriptKodu kopyala// main.js
import { topla } from './math.js';
console.log(topla(2, 3)); // 5

Bu yapı, kodların yeniden kullanılabilirliğini artırır ve uygulamaların daha düzenli ve bakımı kolay hale gelmesini sağlar.

3. Proxy ve Reflect API Kullanımı

Proxy API, JavaScript objelerini kontrol etmek için güçlü bir araçtır. Proxy, bir objeyi “aracılık eden” özel bir yapı olarak işlev görür ve bu objeye erişim veya bu obje üzerinde işlem yapıldığında özel davranışlar tanımlanmasına olanak tanır.

Örneğin, bir objeye yapılan her güncellemeyi yakalamak isteyebilirsiniz:

javascriptKodu kopyalalet hedef = { mesaj: "Merhaba" };

let proxy = new Proxy(hedef, {
    set: function(target, key, value) {
        console.log(`${key} değerine ${value} atanıyor.`);
        target[key] = value;
    }
});

proxy.mesaj = "Merhaba Dünya!";  // 'mesaj değerine Merhaba Dünya! atanıyor.' yazdırır

Bu örnekte Proxy, objeye yapılan değişiklikleri izler. Reflect API ise Proxy ile birlikte çalışarak, Proxy’nin üzerindeki işlemlerin default davranışını yönetmeye olanak tanır.

4. WeakMap ve WeakSet Avantajları

JavaScript’te WeakMap ve WeakSet, normal Map ve Set yapılarının zayıf referanslı versiyonlarıdır. Bu zayıf referanslar sayesinde, objeler artık kullanılmadığında, bellekten otomatik olarak temizlenebilirler. Bu yapılar, özellikle bellek yönetimi konusunda avantaj sağlar. Normal Map’lerde, objeler anahtar olarak kullanılsa bile, objeye referans tutulduğu için bellekten temizlenmezler. Ancak WeakMap kullanıldığında, bu sorun ortadan kalkar.

Örneğin:

javascriptKodu kopyalalet weakMap = new WeakMap();
let obj = {};
weakMap.set(obj, "Bilgi");

obj = null; // obj artık bellekten temizlenir

WeakMap, bellekte gereksiz yer kaplamadan veri saklamayı sağlar. Aynı şey WeakSet için de geçerlidir.

5. Event Loop Derinlemesine Analiz

JavaScript’in asenkron yapısını anlamak için Event Loop temel bir kavramdır. Event Loop, görev kuyruğundaki işlerin ne zaman ve nasıl işleneceğini belirler. JavaScript’in tek iş parçacıklı olması, işlemlerin sırayla yürütüldüğü anlamına gelir; ancak asenkron işlemler devreye girdiğinde, bunların ne zaman tamamlanacağı karmaşık hale gelir.

Event Loop, ana programın çalıştırılması bittiğinde, callback fonksiyonlarının yürütülmesini sağlar. Bu döngü, sürekli olarak görev kuyruğunu kontrol eder ve işlemleri tamamlar. Örneğin, setTimeout gibi bir fonksiyon çağrıldığında, belirli bir süre sonra callback fonksiyonu kuyruğa eklenir, ve event loop bu fonksiyonu uygun zamanda çalıştırır.

javascriptKodu kopyalaconsole.log("İlk");

setTimeout(function() {
  console.log("Asenkron işlem");
}, 0);

console.log("Son");

Bu kod, sıralı olmasına rağmen çıktısı:

cssKodu kopyalaİlk
Son
Asenkron işlem

olacaktır. Bu durum, event loop’un çalışma mekanizmasıyla açıklanır.

Bir Cevap Yaz