Closures في JavaScript بالعربي: ليه الدوال بتتذكر متغيراتها؟

function multiplier(factor) {
  return function (num) {
    return num * factor;
  };
}

const double = multiplier(2);
const triple = multiplier(3);

double(5); // 10
triple(5); // 15
double(10); // 20

ركّز هنا: كل استدعاء لـ multiplier بيخلق scope جديد مستقل بمتغير factor خاص بيه. double شايف factor = 2 للأبد. triple شايف factor = 3 للأبد. لو خلقت 1000 multiplier، عندك 1000 scope مستقل في الذاكرة.

4 حالات استخدام حقيقية

1. إخفاء حالة بدون class: بدل ما تسيب متغير global لأي حد يلمسه، اعمله جوه closure. الوصول الوحيد للقيمة هيكون عن طريق دالة محددة.
2. callbacks بمعلومات إضافية: زرار "Delete" في React محتاج يعرف id العنصر. بدل ما تمرره في كل render، تستخدم closure: onClick={() => handleDelete(item.id)}.
3. once / debounce / throttle: دوال بتحتاج تتذكّر آخر مرة اتنادت فيها أو هل اتنادت قبل كده. الذاكرة دي بتعيش جوّا closure.
4. currying وpartial application: تجزئة دالة بحجج كتيرة لدوال صغيرة متتالية. كل جزء بيقفل (close over) على الحجة اللي اتمررت ليه.

مثال عملي: once في 6 سطور

المتغيران called وresult عايشين جوّا closure. مفيش طريقة تلمسهم من برّا. ده مش تنظيم بس، ده encapsulation فعلي.

الـ Trade-offs اللي لازم تعرفها

الـ closure مش مجاني. الافتراض إن كل closure بيمسك بـ scope كامل في الذاكرة، حتى لو محتاج متغير واحد بس. لو حفظت 100 ألف closure على عناصر DOM (مثلًا event listeners في table كبيرة)، احتمال تعمل memory leak كبير.

أرقام تقريبية: closure واحد على أقل من 5 متغيرات بيكلّف بين 200 و600 byte إضافية في heap. ده عادي. لكن لو الـ scope الخارجي فيه array طوله مليون عنصر، الـ array كله بيفضل في الذاكرة طول ما الـ closure حي. ده الفخ الأساسي.

المكسب: encapsulation حقيقية، state private، كود أقصر بدون classes. التكلفة: ذاكرة زيادة وأحيانًا debugging أصعب لأن المتغيرات مش ظاهرة في الـ console.

متى لا تستخدم Closures

• لو الحالة لازم تكون متاحة لأكتر من module: الـ closure بيقفل المتغير جوّاه. لو محتاج تشاركه، استخدم class أو state management library (Redux, Zustand, Pinia).
• لو فاكر إنها حماية لبيانات حساسة: ده مش أمان. أي حد عنده DevTools يقدر يقرأ الـ heap. الـ closure تنظيم مش تشفير.
• لو في حلقة كبيرة بتنشئ آلاف الدوال: راجع لو فعلًا محتاج closure لكل عنصر، أو تقدر تستخدم دالة واحدة مشتركة بحجج.
• لو بتشتغل على hot path في performance-critical code: استدعاء دالة لها closure أبطأ شوية من دالة pure بدون مراجع خارجية. الفرق ميكروثواني، لكنه بيفرق في loops على ملايين العناصر.

الخطوة التالية

افتح console المتصفح دلوقتي ونفّذ السطر ده:

لو الرقم زاد، الـ closure شغّال على جهازك. بعد كده اعمل counter تاني واتأكد إنه مستقل عن الأولاني — ده بالظبط اللي بيخلي الـ closures أقوى من الـ globals.

المصادر

• MDN Web Docs — Closures: developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
• ECMAScript 2024 Language Specification — Section 9.2 Function Environment Records: tc39.es/ecma262
• You Don't Know JS Yet (Kyle Simpson) — Scope & Closures: github.com/getify/You-Dont-Know-JS
• V8 Blog — Memory considerations for closures: v8.dev/blog