دليل لرفع JavaScript المتغير let مع let و const

غالبًا ما يواجه مطورو JavaScript الجدد صعوبة في فهم السلوك الفريد لرفع / تغيير الوظيفة.

نظرًا لأننا سنتحدث عن var ، واسمحوا والإعلانات const في وقت لاحق ، من المهم أن نفهم رفع الرفع المتغير بدلاً من رفع الوظائف. لنغوص في

ما هو الرفع المتغير؟

يتعامل محرك JavaScript مع جميع التصريحات المتغيرة باستخدام "var" كما لو كانت معلنة في الجزء العلوي من نطاق وظيفي (إذا تم الإعلان عنه داخل وظيفة) أو النطاق العام (إذا تم الإعلان عنه خارج وظيفة) بغض النظر عن مكان الإعلان الفعلي. هذا هو أساسا "الرفع".

لذلك قد تكون المتغيرات متوفرة بالفعل قبل إعلانها.

دعونا نرى ذلك في العمل ..

// المخرجات: غير محدد
console.log (شكل)؛
فار الشكل = "مربع" ؛
// المخرجات: "مربع"
console.log (شكل)؛

إذا كنت قادمًا من اللغات المعتمدة على لغة C ، فستتوقع أن يتم إلقاء خطأ عندما يتم استدعاء أول وحدة تحكم. لم يتم تحديد الشكل المتغير في تلك المرحلة. لكن مترجم JavaScript يتطلع إلى الأمام و "يرفع" جميع الإعلانات المتغيرة إلى الأعلى ، ويبقى التهيئة في نفس المكان.

إليك ما يحدث وراء الكواليس:

// الإعلان الحصول على رفع في الأعلى
فار الشكل ؛
// المخرجات: غير محدد
console.log (شكل)؛
الشكل = "مربع" ؛
// المخرجات: "مربع"
console.log (شكل)؛

إليك مثال آخر هذه المرة في نطاق وظيفي لجعل الأمور أكثر وضوحًا:

وظيفة getShape (الحالة) {
    // الشكل موجود هنا بقيمة غير محددة
    // المخرجات: غير محدد
    console.log (شكل)؛
    إذا (الحالة) {
        فار الشكل = "مربع" ؛
        // بعض الرموز الأخرى
        شكل عودة
    } آخر {
        // الشكل موجود هنا بقيمة غير محددة
        عودة كاذبة؛
    }
}

يمكنك أن ترى في المثال أعلاه كيف يتم رفع إعلان الشكل في الجزء العلوي من وظيفة getShape (). هذا لأنه إذا لم تنشئ الكتل الأخرى نطاقًا محليًا كما هو موضح في اللغات الأخرى. النطاق المحلي هو أساسًا نطاق الوظيفة في JavaScript. لذلك ، يمكن الوصول إلى الشكل في كل مكان خارج كتلة if وداخل الوظيفة بقيمة "غير محددة".

هذا السلوك الافتراضي لجافا سكريبت له نصيبه العادل من المزايا والعيوب. قد لا يؤدي فهم هذه الأخطاء تمامًا إلى أخطاء بسيطة ولكنها خطيرة في نظامنا.

أدخل تصريحات مستوى الكتلة!

قدمت ES6 خيارات تحديد مستوى الكتلة لتزويد المطورين بمزيد من التحكم والمرونة على دورة حياة المتغير.

يتم إجراء إعلامات مستوى الكتلة في نطاقات الكتلة / المعجمية التي يتم إنشاؤها داخل كتلة "{}".

دع الإعلانات

يشبه بناء الجملة هذا var ، ما عليك سوى استبدال var بالترك لتعلن أن المتغير بنطاقه هو فقط رمز الكود هذا.

ضع إعلانات السماح في الجزء العلوي في كتلة بحيث تكون متاحة داخل هذه الكتلة بأكملها.

فمثلا:

وظيفة getShape (الحالة) {
// الشكل غير موجود هنا
// console.log (الشكل) ؛ => ReferenceError: لم يتم تعريف الشكل
إذا (الحالة) {
        اسمحوا الشكل = "مربع" ؛
        // بعض الرموز الأخرى
        شكل عودة
    } آخر {
        // الشكل غير موجود هنا أيضًا
        عودة كاذبة؛
    }
}

لاحظ كيف أن الشكل موجود فقط داخل كتلة if ، ويلقي خطأ عند الوصول إليه خارجًا بدلاً من إخراج غير محدد مثل حالتنا السابقة بإعلانات var.

ملاحظة: إذا تم تعريف معرف بالفعل داخل نطاق مع var ، فإن استخدام نفس المعرف في تصريح let داخل نفس النطاق يؤدي إلى حدوث خطأ.
وأيضًا ، لا يتم طرح أي خطأ إذا كان إعلان السماح ينشئ متغيرًا يحمل نفس اسم المتغير في النطاق الخارجي. (هذه الحالة مماثلة لإعلانات const التي سنتحدث عنها قريبًا.)

فمثلا:

فار الشكل = "مربع" ؛

دع الشكل = "المستطيل" ؛
// SyntaxError: تم تعريف معرف "الشكل" بالفعل

و:

فار الشكل = "مربع" ؛
إذا (الحالة) {
    // لا يلقي خطأ
    دع الشكل = "المستطيل" ؛
    // المزيد من التعليمات البرمجية
}
// لا خطأ

إعلانات const

بناء جملة الإعلان مشابه لـ let & var ، ودورة الحياة هي نفسها كما هي. ولكن عليك اتباع بعض القواعد.

يتم التعامل مع الارتباطات المُعلنة باستخدام const باعتبارها ثوابت ، وبالتالي لا يمكن إعادة تعيين قيم لها بمجرد تعريفها. نتيجة لهذا ، يجب تهيئة كل إعلان const في وقت الإعلان.

فمثلا:

// صالح
const الشكل = "المثلث" ؛
// بناء جملة خطأ: مفقود التهيئة
اللون const ؛
// TypeError: الواجب على متغير ثابت
الشكل = "مربع"

ومع ذلك ، يمكن تعديل خصائص الكائن!

شكل ثابت = {
    الاسم: "المثلث" ،
    الجانبين: 3
}
// اعمال
shape.name = "square"؛
الشكل. الجوانب = 4 ؛
// SyntaxError: مُهيئ خاصية الاختزال غير صالح
الشكل = {
    الاسم: "مسدس" ،
    الجانبين: 6
}

في المثال أعلاه ، يمكننا أن نرى أن خصائص كائن الشكل فقط يمكن تغييرها لأننا نقوم فقط بتغيير الشكل الذي يحتوي عليه ، وليس ما يرتبط به.

يمكننا أن نلخص بالقول إن const تمنع تعديل الربط ككل - وليس القيمة التي يرتبط بها.

ملاحظة: يمكن تحور الخصائص. لذلك من أجل ثبات حقيقي ، استخدم Immutable.js أو Mori.

المنطقة الزمنية الميتة

نحن نعلم الآن أن الوصول إلى متغيرات let أو const قبل إعلانها سيؤدي إلى ظهور ReferenceError. تسمى هذه الفترة بين الدخول إلى النطاق والإعلان عن الأماكن التي يتعذر الوصول إليها بالمنطقة الزمنية الميتة.

لاحظ أن "المنطقة الميتة الزمنية" لم يتم ذكرها رسميًا في مواصفات ECMAScript. إنه مجرد مصطلح شائع بين المبرمجين.

أنا شخصياً أوصيك دائمًا باستخدام const ، حيث يؤدي ذلك إلى تقليل الأخطاء. لا يزال يتعين علي مواجهة موقف حيث كنت بحاجة لاستخدام var.

كقاعدة عامة ، استخدم السماح فقط لعدادات الحلقة أو فقط إذا كنت تحتاج حقًا إلى إعادة التعيين. في كل مكان آخر ، استخدم const. أنا شخصياً قد تخلت عن حلقات التصفية () ، والخريطة () والتقليل (). يجب عليك أنت أيضا.

تأكد من إطلاعك على الجزء 2 من هذا الموضوع حول رفع الوظيفة وأسئلة المقابلة المهمة المتعلقة بموضوع الرفع في JS.

انقر هنا لمقالتي على بعض الميزات الجديدة المفيدة في ES6 المتعلقة بالوظائف.

أراك المرة القادمة. سلام! ️️