ازاي JavaScript بتتعامل مع الذاكرة؟

لو شغال في JavaScript فأكيد سمعت عن حاجة اسمها Garbage Collection واللي بتساعد في إدارة الذاكرة وتنظيفها تلقائيا… بس السؤال:

– إزاي المتغيرات بتتخزن في الذاكرة؟💾

– إمتى JavaScript بتقرر تمسح البيانات؟ 🗑

– هل فعلا Garbage Collector بيشيل كل حاجة ولا ممكن يحصل Memory Leak؟ 🚨

النهاردة هنفهم:

• إزاي JavaScript بتخصص الذاكرة
•  إزاي بيتم تحرير الذاكرة تلقائيا؟
• إزاي تتجنب مشاكل الـ Memory Leaks؟

🔹 إزاي JavaScript بتخصص الذاكرة؟

لما بتكتب كود JavaScript أي بيانات بتتحفظ في الذاكرة بطريقتين:

• Heap Memory – للأشياء المعقدة زي الـ Objects & Functions
• Stack Memory – للمتغيرات البسيطة زي الأرقام والنصوص

مثال عملي

• x بيتخزن مباشرة في الـ Stack لإنه قيمة بسيطة (Primitive).
• obj بيتخزن في الـ Heap لكن المرجع بتاعه بيتحط في الـ Stack

🔹 Garbage Collection: إزاي JavaScript بتمسح البيانات؟

JavaScript عندها حاجة اسمها Garbage Collector اللي وظيفته إنه يمسح البيانات اللي مش محتاجينها تلقائيا.

📌 JavaScript بتستخدم خوارزمية “Mark & Sweep”

• أي Object ملوش مراجع (References) بيتعلم عليه إنه“ميت”
• بعد كده بيتم مسحه من الذاكرة تلقائيا

مثال عملي على الـ Garbage Collection

لما user اتساوت بـ null، الـ Object بقى بدون مراجع، فـ JavaScript هتشيله من الـ Heap تلقائيا.

🔹 أشهر مشاكل الـ Memory Leaks

رغم إن Garbage Collector بيشتغل تلقائي إلا إنه مش مثالي وفيه حالات ممكن تسبب Memory Leaks

1️⃣ عدم تحرير الذاكرة بعد الاستخدام

الكود ده هيفضل يستهلك الذاكرة بشكل مستمر و JavaScript مش هتعرف تحذف البيانات لإنه فيه مراجع مستمرة.

2️⃣ الاحتفاظ بمراجع غير ضرورية (Closure Issue)

هنا bigData مش هتتمسح لإن inner لسه شايفها

3️⃣ استخدام Event Listeners بدون إزالة

لو العنصر اتشال من الصفحة الذاكرة لسه محتفظة بالـ Event Listener وده ممكن يعمل Memory Leak

✅ والحل؟ استخدم removeEventListener

📌طيب إزاي تتجنب مشاكل الذاكرة؟

•  احذف الـ References غير المهمة

  لما تخلص من Object خليه null عشان Garbage Collector يشيله.

•  استخدم WeakMap بدل Map للبيانات المؤقتة

  WeakMap بتمسح البيانات تلقائيًا لما ميبقاش ليها مرجع.

•  احذف الـ Event Listeners بعد الاستخدام

  removeEventListener مهم جدًا لتجنب الـ Memory Leaks

• راقب استهلاك الذاكرة بـ Chrome DevTools

  افتح Performance Monitor واعرف إذا كان عندك Memory Leak ولا لا

•  
•  
•  

📌 التــاسك 📝 ( هيكون تقيل النهاردة 😈)

• جرب تعمل Memory Leak باستخدام setInterval بدون ما تحذفه.
• جرب ترسم Heap Snapshot من Chrome DevTools وشوف إزاي الذاكرة بتزيد
•  جرب تستخدم WeakMap بدل Map في كود بيخزن بيانات مؤقتة.
•  جرب تراقب Garbage Collection باستخدام window.performance.memory.
• ابعتلي Screenshot لأول Memory Leak تكتشفه في كودك 🔥

💬 منتظر إجاباتكم في التعليقات