تحديد المتغيرات في JavaScript – CloudSavvy IT

جلبت المسودة النهائية لـ ES6 المكتملة في 2015 طريقة جديدة لتعريف متغيرات JavaScript.هذه let الكلمة الأساسية تنشئ متغير نطاق الكتلة ، و const حدد قيمة ثابتة.هذه هي الطريقة التي تختلف بها هذه الأنواع المتغيرة الحديثة عن أنواع المتغيرات الكلاسيكية var.

فار

قبل ES6 ، var إنه الخيار الوحيد عند تحديد المتغيرات.يمكنك تغيير قيمة المتغير الذي تم إنشاؤه باستخدام var. يمكنك أيضًا إعادة تعريف المتغير نفسه.

var demo = "first value";
var demo = "second value";
demo = "third value";
example = "this throws an error - variable not declared";

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

يصف “نطاق” المتغير المكان الذي يمكن استخدامه فيه. يمكن الوصول إلى متغير النطاق الوظيفي من خلال الكود في الوظيفة التي تحدده. يمكن الوصول إلى المتغيرات العالمية في جميع أنحاء الكود.

var myGlobal = "global";
 
function testA() 
    var myFunctionScope = "testA";
    console.log(myFunctionScope);
    console.log(myGlobal);

 
function testB() 
    myGlobal = "overwritten!";
    console.log(myGlobal);
   // console.log(myFunctionScope);          // ERROR

 
testA();
testB();
testA();

في هذا المثال ، يتم عرض الفرق بين متغيرات النطاق العام ومتغيرات نطاق الوظيفة. myGlobal كلاهما يمكن قراءته (وكتابته) testA مع testB. myFunctionScope فقط في testA، وهكذا testB حدث خطأ أثناء محاولة الوصول. هذا هو ناتج هذا المثال:

testA
global

overwritten!

testA
overwritten!

قيمة ال myFunctionScope يتم الاحتفاظ بها بشكل منفصل في كل وظيفة.قيمة ال myGlobal عندما يتم تحديث كلتا الوظيفتين testB قم بتغطيته.

أثمر

أحدث let البديل الحديث للكلمة الرئيسية نعم var.يمكنك في كثير من الأحيان استخدام ملفات let في كل الأماكن التي كتبتها من قبل var. ومع ذلك ، هناك بعض الاختلافات المهمة التي يجب ملاحظتها.

الأكثر أهمية let الوظيفة هي نطاقها. نطاق المتغير هو كتلة واحدة من التعليمات البرمجية ، وليس الوظيفة بأكملها. في JavaScript ، كتلة التعليمات البرمجية هي جزء من التعليمات البرمجية محاطة بأقواس.كل let لا يمكن الوصول إلى المتغيرات إلا عن طريق الكود داخل الكتلة الخاصة بهم.

function letTest(x) 
    let demo = "hello world";
 
    if (x > 10) 
        let y = 9000;
        demo = "foobar";
    
 
    console.log(demo);  // "foobar"
    console.log(y);     // ERROR

في هذا المثال، if يقوم البيان بإنشاء كتلة تعليمات برمجية جديدة.ترث الكتلة نطاق الكتلة الأصل الخاصة بها ، لذلك demo المتغيرات لا تزال متاحة.هذه y نطاق المتغير if بيان.حاول زيارة y الخارج if تسببت الكتلة في خطأ متغير غير محدد.

مثل var، باستخدام المتغير الذي تم إنشاؤه let يمكنك تغيير قيمته في أي وقت.ومع ذلك ، لا يمكن إعادة الإعلان عن استخدامها let سيؤدي استخدام نفس الاسم مرتين في نفس الكتلة إلى حدوث خطأ.

let demo = "test";
demo = "example";
let demo = "test";      // ERROR

الاستثناء هو عند إعادة تعريف المتغيرات في النطاقات المتداخلة.تعني قاعدة النطاق على مستوى الكتلة أن هذا مسموح به – ينتهي بك الأمر مع اثنين متفرق المتغيرات التي لها نفس المعرف.

let foo = "bar";
if (true) 
    let foo = "foobar";
    console.log(foo);

console.log(foo);

المثال أعلاه سوف ينبعث foobar bar.هذه foo يتم إعادة تعريف المتغير في if منع دون التأثير foo متغيرات النطاق الخارجي. أنت تفقد حقًا القدرة على الإشارة إلى المتغيرات الخارجية من الكتل الداخلية.

مقدار ثابت

هذه const الكلمات الرئيسية هي ميزة جديدة أخرى لـ ES6.انها مثل let. const هو اختصار لكلمة “ثابت” ، يستخدم للإشارة إلى قيمة ثابتة لا تتغير أبدًا.حاول تحديث قيمة ملف const المتغير دائما يسبب خطأ.

const foo = "bar";
const foo = "foobar";   // ERROR

لذلك ، يجب عليك دائمًا التهيئة const المتغيرات مع القيم.لا يجوز تحديد واحد const وحدد قيمته فيما بعد.

let demoLet;                    // OK
var demoVar;                    // OK
const demoConst;                // ERROR
const demoConst = "value";      // OK

من الناحية الفنية const لم يتم تعريف الثابت.إنه في الواقع يخلق ملف مرجع ثابت القيمة. تأثير هذا هو أنه لا يزال بإمكانك تحديث خصائص الكائن المعين للكائن. const.فقط إذا كنت تستخدم ملفات const إنه على الجانب الأيسر من الوظيفة.

ما نوع المتغير الذي يجب علي استخدامه؟

يجب عليك استخدام ملفات let المتغيرات الأكثر شيوعًا في كود JavaScript. يساعد النطاق على مستوى الكتلة وإعادة الإعلان المحظورة على اكتشاف الأخطاء وتجنب عمليات الكتابة غير المقصودة.

استعمال let أوقف المتغيرات من “التسرب” ، حيث يمكن الوصول إلى المتغيرات في نطاق غير مخصص لاستخدامه. مثال كلاسيكي هو مكرر في حلقة:

for (var i = 0; i <= 10; i++) 
    // do something

console.log(i);

سيؤدي هذا إلى 10 تم إطلاق سراحه إلى وحدة التحكم.استعمال let بدلا من ذلك سوف تصدر undefinedمثل i المتغير لن يكون متاحًا في if. نطاق، مجموعة. في هذه الحالة ، عادة ما تكون هذه هي النتيجة المرجوة.

الحلقة تظهر الخطر أيضًا var إعادة التخصيص:

for (var i = 0; i <= 10; i++) 
    setTimeout(() => console.log(i), 1000);

للوهلة الأولى ، يبدو هذا الرمز مثله ينبغي انقل الأرقام من 1 إلى 10. فى المقابل، 10 سيتم تسجيلها عشر مرات. setTimeout() غير متزامن i المعجم في رد الاتصال مرتبط بالنطاق.مثل var i استخدم في الحلقة i يحصل المتغير على قيمة جديدة في كل تكرار.عند تشغيل رد نداء المؤقت ، اكتملت جميع التكرارات العشر ، و i سوف نقرر دائمًا القيمة النهائية – 10، في ظل هذه الظروف.

استعمال let i لكن نعلن أ الجديد المتغير يسمى i لكل تكرار للحلقة. سيحتفظ كل متغير بقيمته الخاصة بعد اكتمال التكرار ، مما يؤدي إلى إخراج السجل المتوقع.

عندما لا تستخدم Let

في بعض الحالات ، يجب ألا تستخدم let.يجب عليك استخدام ملفات const عندما تنشئ متغيرًا ، فأنت تعلم أنه لن يتغير أبدًا. إذا حاولت عن غير قصد إعادة توزيع قيمته ، فستتمكن البرامج المجمعة وأدوات التحليل الثابت من تنبيهك.

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

ميزات ES6 ، مثل let مع const يتم دعمه الآن بشكل عام بواسطة المتصفحات الحديثة. بعض المتصفحات القديمة التي لا تحتوي على دعم ES6 الكامل (خاصة Internet Explorer 11) توفرها أيضًا. ما لم تكن تستهدف منصات قديمة ، فلا داعي للقلق بشأن ما إذا كانت ستكون متاحة أم لا.استعمال let مع const اجعل التعليمات البرمجية أكثر نظافة وتقليل مخاطر إخفاء الأخطاء.