في هذا الدرس 5تصفّح المواضيع
تجمع الكتلة البرمجية (Block Statement) صفراً أو أكثر من الجمل داخل زوج من الأقواس المعقوفة { ... } ليعاملها محرك JavaScript كوحدة تنفيذية متكاملة. وبخلاف الكائنات الحرفية المسندة للمتغيرات، تقف الكتلة كوحدة تحكم ولا تحتاج لفاصلة منقوطة بعد قوس إغلاقها.
تعتمد جمل التحكم مثل if وfor وwhile على الكتل لتشغيل عدة أوامر معاً. ويُعد إغفال الأقواس المعقوفة في الشروط القصيرة سبباً شهيراً للأخطاء الخفية؛ إذ يُنفذ أي سطر ثانٍ يُضاف لاحقاً خارج الشرط دائماً! ويوضح الجدول سلوك التصريحات داخل الكتلة:
أداة التصريح داخل { ... } | هل تُقرأ خارج الكتلة؟ | القاعدة الهندسية المعتمدة |
|---|---|---|
const | لا، تطلق ReferenceError | الخيار الافتراضي للحسابات المحلية الثابتة |
let | لا، تطلق ReferenceError | للعدادات والقيم المتغيرة داخل الكتلة |
var | نعم، تتسرب لنطاق الدالة أو العام | تجنبها لمنع استبدال المتغيرات الخارجية |
تعيش المتغيرات المعرفة بـ let وconst حصراً داخل حدود القوسين المعقوفين اللذين أُنشئت بداخلهما وتنتهي صلاحيتها فور إغلاق القوس }. بل يمكنك كتابة كتلة مستقلة لإجراء حساب فرعي مؤقت دون إشغال الأسماء في بقية الملف.
let finalBadge = '';
{
const rawPrice = 240;
const fee = 15;
finalBadge = 'Paid: ' + (rawPrice + fee) + ' SAR';
}
document.getElementById('blk-out').textContent = finalBadge;لأن الكلمة var صُممت قديماً قبل إدخال النطاق الكتلي في اللغة، فإنها تتجاهل أقواس الكتل العادية وجمل if وfor، فتتسرب إلى نطاق الدالة المحيطة أو النطاق العام وقد تستبدل قيمة متغير خارجي يحمل الاسم نفسه دون تنبيه!
يحدث حجب المتغيرات أو التظليل (Variable Shadowing) عند تعريف متغير جديد بـ let أو const داخل كتلة فرعية يحمل نفس اسم متغير خارجي؛ فتحجب النسخة الداخلية المتغير الخارجي مؤقتاً داخل الكتلة فقط، ثم يعود الخارجي للظهور بسلام بعد إغلاقها. ومع ذلك يُنصح باختيار أسماء متمايزة لزيادة وضوح القراءة.
const role = 'Viewer';
let innerCheck = '';
if (true) {
const role = 'Admin';
innerCheck = 'Inside: ' + role;
}
document.getElementById('shd-out').textContent = innerCheck + ' | Outside: ' + role;ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس بنية الكتل البرمجية، وأهمية الأقواس المعقوفة في الشروط والحلقات، والعزل المحكم لـ let وconst مقابل تسرب var، وآلية حجب المتغيرات. الخطوة التالية: انتقل إلى درس «المغلفات البرمجية Closures في JavaScript» لاكتشاف كيف تحتفظ الدوال الداخلية بذاكرة متغيرات دالتها الأم.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Block Statement الكتلة البرمجية
- مجموعة جمل برمجية محاطة بقوسين معقوفين تعاملها اللغة كوحدة واحدة ونطاق معجمي مستقل لمتغيرات let وconst.
- للمراجعة
- 02 Block Scope النطاق الكتلي
- قاعدة الرؤية التي تحصر صلاحية متغيرات let وconst داخل حدود القوسين المعقوفين اللذين عُرفت بداخلهما.
- للمراجعة
- 03 Variable Shadowing حجب المتغيرات (التظليل)
- تعريف متغير داخل كتلة فرعية بنفس اسم متغير محيط مما يحجب النسخة الخارجية مؤقتاً داخل حدود الكتلة فقط.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 GC GC
- Garbage Collection
- آلية إدارة الذاكرة التلقائية التي تحرر المتغيرات الكتلية المؤقتة فور انتهاء تنفيذ كتلتها.
- للمراجعة
- 02 TDZ TDZ
- Temporal Dead Zone
- المنطقة الواقعة بين بداية قوس الكتلة المفتوح وحتى الوصول إلى سطر التصريح الفعلي عن متغير let أو const.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
بدّل بين التبويبين الأول والثاني في المحاكي لملاحظة كيف تكتب var فوق المتغير الخارجي بينما تحميه let.
-
شغّل مثال role في محرر التجربة وتحقق من طباعة Admin بالداخل وبقاء Viewer بالخارج دون تأثر.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.