M

MLOG

Türkçe

Etkin bellek yönetimi için güçlü araçlar olan JavaScript WeakMap ve WeakSet'i keşfedin. Bellek sızıntılarını nasıl önlediklerini ve pratik örneklerle uygulamalarınızı nasıl optimize ettiklerini öğrenin.

Bellek Yönetimi için JavaScript WeakMap ve WeakSet: Kapsamlı Bir Kılavuz

Bellek yönetimi, sağlam ve performanslı JavaScript uygulamaları oluşturmanın çok önemli bir yönüdür. Nesneler ve Diziler gibi geleneksel veri yapıları, özellikle nesne referanslarıyla uğraşırken bazen bellek sızıntılarına yol açabilir. Neyse ki JavaScript, bu zorlukları ele almak için tasarlanmış iki güçlü araç olan WeakMap ve WeakSet'i sunar. Bu kapsamlı kılavuz, WeakMap ve WeakSet'in inceliklerine dalarak nasıl çalıştıklarını, faydalarını açıklayacak ve projelerinizde bunları etkili bir şekilde kullanmanıza yardımcı olacak pratik örnekler sunacaktır.

JavaScript'te Bellek Sızıntılarını Anlamak

WeakMap ve WeakSet'e dalmadan önce, çözdükleri sorunu anlamak önemlidir: bellek sızıntıları. Bir bellek sızıntısı, uygulamanızın bellek ayırması ancak bu belleğe artık ihtiyaç duyulmadığında bile onu sisteme geri bırakmaması durumunda meydana gelir. Zamanla bu sızıntılar birikerek uygulamanızın yavaşlamasına ve sonunda çökmesine neden olabilir.

JavaScript'te bellek yönetimi büyük ölçüde çöp toplayıcı tarafından otomatik olarak gerçekleştirilir. Çöp toplayıcı periyodik olarak, artık kök nesnelerden (genel nesne, çağrı yığını vb.) erişilemeyen nesneler tarafından işgal edilen belleği tanımlar ve geri alır. Ancak, istenmeyen nesne referansları çöp toplamayı engelleyerek bellek sızıntılarına yol açabilir. Basit bir örnek düşünelim:

let element = document.getElementById('myElement');
let data = {
  element: element,
  value: 'Some data'
};

// ... daha sonra

// Element DOM'dan kaldırılsa bile, 'data' hala ona bir referans tutar.
// Bu, elementin çöp toplayıcı tarafından toplanmasını engeller.

Bu örnekte, data nesnesi DOM elementi olan element'e bir referans tutar. Eğer element DOM'dan kaldırılırsa ancak data nesnesi hala mevcutsa, çöp toplayıcı element tarafından işgal edilen belleği geri alamaz çünkü ona hala data aracılığıyla erişilebilir. Bu, web uygulamalarında yaygın bir bellek sızıntısı kaynağıdır.

WeakMap'e Giriş

WeakMap, anahtarların nesne olması ve değerlerin rastgele değerler olabildiği bir anahtar-değer çiftleri koleksiyonudur. "Zayıf" terimi, bir WeakMap'teki anahtarların zayıf bir şekilde tutulması gerçeğine atıfta bulunur, yani çöp toplayıcının bu anahtarlar tarafından işgal edilen belleği geri almasını engellemezler. Eğer bir anahtar nesnesine kodunuzun başka bir yerinden artık erişilemiyorsa ve yalnızca WeakMap tarafından referans alınıyorsa, çöp toplayıcı bu nesnenin belleğini geri almakta serbesttir. Anahtar çöp olarak toplandığında, WeakMap'teki ilgili değer de çöp toplama için uygun hale gelir.

WeakMap'in Temel Özellikleri:

WeakMap'in Temel Kullanımı:

İşte WeakMap'in nasıl kullanılacağına dair basit bir örnek:

let weakMap = new WeakMap();
let element = document.getElementById('myElement');

weakMap.set(element, 'Elementle ilişkili bazı veriler');

console.log(weakMap.get(element)); // Çıktı: Elementle ilişkili bazı veriler

// Element DOM'dan kaldırılırsa ve başka bir yerde referans gösterilmezse,
// çöp toplayıcı belleğini geri alabilir ve WeakMap'teki giriş de kaldırılır.

Pratik Örnek: DOM Element Verilerini Saklama

WeakMap için yaygın bir kullanım durumu, bu elementlerin çöp toplayıcı tarafından toplanmasını engellemeden DOM elementleriyle ilişkili verileri saklamaktır. Bir web sayfasındaki her bir düğme için bazı meta verileri saklamak istediğiniz bir senaryoyu düşünün:

let buttonMetadata = new WeakMap();

let button1 = document.getElementById('button1');
let button2 = document.getElementById('button2');

buttonMetadata.set(button1, { clicks: 0, label: 'Button 1' });
buttonMetadata.set(button2, { clicks: 0, label: 'Button 2' });

button1.addEventListener('click', () => {
  let data = buttonMetadata.get(button1);
  data.clicks++;
  console.log(`Button 1 ${data.clicks} kez tıklandı`);
});

// Eğer button1 DOM'dan kaldırılırsa ve başka bir yerden referans gösterilmezse,
// çöp toplayıcı belleğini geri alabilir ve buttonMetadata'daki ilgili giriş de kaldırılır.

Bu örnekte, buttonMetadata her bir düğmenin tıklama sayısını ve etiketini saklar. Eğer bir düğme DOM'dan kaldırılır ve başka bir yerde referans gösterilmezse, çöp toplayıcı belleğini geri alabilir ve buttonMetadata'daki ilgili giriş otomatik olarak kaldırılarak bir bellek sızıntısını önler.

Uluslararasılaştırma Hususları

Birden çok dili destekleyen kullanıcı arayüzleriyle uğraşırken, WeakMap özellikle yararlı olabilir. DOM elementleriyle ilişkili yerel ayara özgü verileri saklayabilirsiniz:

let localizedStrings = new WeakMap();

let heading = document.getElementById('heading');

// İngilizce versiyon
localizedStrings.set(heading, {
  en: 'Welcome to our website!',
  fr: 'Bienvenue sur notre site web!',
  es: '¡Bienvenido a nuestro sitio web!'
});

function updateHeading(locale) {
  let strings = localizedStrings.get(heading);
  heading.textContent = strings[locale];
}

updateHeading('fr'); // Başlığı Fransızcaya günceller

Bu yaklaşım, çöp toplamayı engelleyebilecek güçlü referanslar tutmadan yerelleştirilmiş dizeleri DOM elementleriyle ilişkilendirmenize olanak tanır. Eğer `heading` elementi kaldırılırsa, `localizedStrings` içindeki ilişkili yerelleştirilmiş dizeler de çöp toplama için uygun hale gelir.

WeakSet'e Giriş

WeakSet, WeakMap'e benzer, ancak anahtar-değer çiftleri yerine bir nesne koleksiyonudur. WeakMap gibi, WeakSet de nesneleri zayıf bir şekilde tutar, yani çöp toplayıcının bu nesneler tarafından işgal edilen belleği geri almasını engellemez. Eğer bir nesneye kodunuzun başka bir yerinden artık erişilemiyorsa ve yalnızca WeakSet tarafından referans alınıyorsa, çöp toplayıcı bu nesnenin belleğini geri almakta serbesttir.

WeakSet'in Temel Özellikleri:

WeakSet'in Temel Kullanımı:

İşte WeakSet'in nasıl kullanılacağına dair basit bir örnek:

let weakSet = new WeakSet();
let element1 = document.getElementById('element1');
let element2 = document.getElementById('element2');

weakSet.add(element1);
weakSet.add(element2);

console.log(weakSet.has(element1)); // Çıktı: true
console.log(weakSet.has(element2)); // Çıktı: true

// Eğer element1 DOM'dan kaldırılırsa ve başka bir yerden referans gösterilmezse,
// çöp toplayıcı belleğini geri alabilir ve WeakSet'ten otomatik olarak kaldırılır.

Pratik Örnek: Aktif Kullanıcıları İzleme

WeakSet için bir kullanım durumu, bir web uygulamasındaki aktif kullanıcıları izlemektir. Uygulamayı aktif olarak kullandıklarında kullanıcı nesnelerini WeakSet'e ekleyebilir ve inaktif olduklarında kaldırabilirsiniz. Bu, çöp toplamalarını engellemeden aktif kullanıcıları izlemenizi sağlar.

let activeUsers = new WeakSet();

function userLoggedIn(user) {
  activeUsers.add(user);
  console.log(`Kullanıcı ${user.id} giriş yaptı. Aktif kullanıcılar: ${activeUsers.has(user)}`);
}

function userLoggedOut(user) {
  // WeakSet'ten açıkça kaldırmaya gerek yok. Eğer kullanıcı nesnesine artık referans gösterilmiyorsa,
  // çöp olarak toplanacak ve WeakSet'ten otomatik olarak kaldırılacaktır.
  console.log(`Kullanıcı ${user.id} çıkış yaptı.`);
}

let user1 = { id: 1, name: 'Alice' };
let user2 = { id: 2, name: 'Bob' };

userLoggedIn(user1);
userLoggedIn(user2);
userLoggedOut(user1);

// Bir süre sonra, user1'e başka bir yerden referans gösterilmezse, çöp olarak toplanacak
// ve activeUsers WeakSet'inden otomatik olarak kaldırılacaktır.

Kullanıcı Takibi için Uluslararası Hususlar

Farklı bölgelerden kullanıcılarla uğraşırken, kullanıcı tercihlerini (dil, para birimi, saat dilimi) kullanıcı nesneleriyle birlikte saklamak yaygın bir uygulamadır. WeakMap'i WeakSet ile birlikte kullanmak, kullanıcı verilerinin ve aktif durumunun verimli bir şekilde yönetilmesini sağlar:

let activeUsers = new WeakSet();
let userPreferences = new WeakMap();

function userLoggedIn(user, preferences) {
  activeUsers.add(user);
  userPreferences.set(user, preferences);
  console.log(`Kullanıcı ${user.id} şu tercihlerle giriş yaptı:`, userPreferences.get(user));
}

let user1 = { id: 1, name: 'Alice' };
let user1Preferences = { language: 'en', currency: 'USD', timeZone: 'America/Los_Angeles' };

userLoggedIn(user1, user1Preferences);

Bu, kullanıcı tercihlerinin yalnızca kullanıcı nesnesi hayatta olduğu sürece saklanmasını sağlar ve kullanıcı nesnesi çöp olarak toplanırsa bellek sızıntılarını önler.

WeakMap vs. Map ve WeakSet vs. Set: Temel Farklılıklar

WeakMap ve Map ile WeakSet ve Set arasındaki temel farkları anlamak önemlidir:

Özellik WeakMap Map WeakSet Set
Anahtar/Değer Türü Yalnızca nesneler (anahtarlar), herhangi bir değer (değerler) Herhangi bir tür (anahtarlar ve değerler) Yalnızca nesneler Herhangi bir tür
Referans Türü Zayıf (anahtarlar) Güçlü Zayıf Güçlü
Yineleme İzin verilmez İzin verilir (forEach, keys, values) İzin verilmez İzin verilir (forEach, values)
Çöp Toplama Başka güçlü referans yoksa anahtarlar çöp toplama için uygundur Map var olduğu sürece anahtarlar ve değerler çöp toplama için uygun değildir Başka güçlü referans yoksa nesneler çöp toplama için uygundur Set var olduğu sürece nesneler çöp toplama için uygun değildir

WeakMap ve WeakSet Ne Zaman Kullanılmalı

WeakMap ve WeakSet özellikle aşağıdaki senaryolarda kullanışlıdır:

WeakMap ve WeakSet Kullanımı için En İyi Pratikler

Tarayıcı Uyumluluğu

WeakMap ve WeakSet, aşağıdakiler dahil tüm modern tarayıcılar tarafından desteklenmektedir:

WeakMap ve WeakSet'i yerel olarak desteklemeyen eski tarayıcılar için işlevselliği sağlamak üzere polyfill'ler kullanabilirsiniz.

Sonuç

WeakMap ve WeakSet, JavaScript uygulamalarında belleği verimli bir şekilde yönetmek için değerli araçlardır. Nasıl çalıştıklarını ve ne zaman kullanılacaklarını anlayarak bellek sızıntılarını önleyebilir, uygulamanızın performansını optimize edebilir ve daha sağlam ve sürdürülebilir kod yazabilirsiniz. WeakMap ve WeakSet'in anahtarlar veya değerler üzerinde yineleme yapamama gibi sınırlamalarını göz önünde bulundurmayı ve özel kullanım durumunuz için uygun veri yapısını seçmeyi unutmayın. Bu en iyi pratikleri benimseyerek, küresel olarak ölçeklenen yüksek performanslı JavaScript uygulamaları oluşturmak için WeakMap ve WeakSet'in gücünden yararlanabilirsiniz.