فار وليت وكونست - ما هو الفرق؟

تم طرح الكثير من الميزات الجديدة اللامعة مع ES2015 (ES6). والآن ، منذ عام 2020 ، يُفترض أن الكثير من مطوري JavaScript قد أصبحوا على دراية بهذه الميزات وبدأوا في استخدامها.

في حين أن هذا الافتراض قد يكون صحيحًا جزئيًا ، لا يزال من الممكن أن تظل بعض هذه الميزات لغزا لبعض المطورين.

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

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

فار

قبل ظهور ES6 ، كانت varالإعلانات هي السائدة . هناك قضايا مرتبطة بالمتغيرات المعلنة مع var، على الرغم من. لهذا كان من الضروري إيجاد طرق جديدة لإعلان ظهور المتغيرات. أولاً ، دعنا نفهم varأكثر قبل أن نناقش هذه القضايا.

نطاق فار

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

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

varيتم تحديد نطاق الوظيفة عندما يتم الإعلان عنها ضمن دالة. هذا يعني أنه متاح ولا يمكن الوصول إليه إلا من خلال هذه الوظيفة.

لفهم المزيد ، انظر إلى المثال أدناه.

 var greeter = "hey hi"; function newFunction() { var hello = "hello"; } 

هنا ، greeterيتم تحديد النطاق العام نظرًا لوجودها خارج دالة أثناء helloتحديد نطاق الوظيفة. لذلك لا يمكننا الوصول إلى المتغير helloخارج الدالة. لذلك إذا فعلنا هذا:

 var tester = "hey hi"; function newFunction() { var hello = "hello"; } console.log(hello); // error: hello is not defined 

سنحصل على خطأ ناتج عن helloعدم توفره خارج الوظيفة.

يمكن إعادة إعلان المتغيرات var وتحديثها

هذا يعني أنه يمكننا القيام بذلك في نفس النطاق ولن نحصل على خطأ.

 var greeter = "hey hi"; var greeter = "say Hello instead"; 

وهذا ايضا

 var greeter = "hey hi"; greeter = "say Hello instead"; 

رفع فار

الرفع هو آلية جافا سكريبت حيث يتم نقل المتغيرات وإعلانات الوظائف إلى أعلى نطاقها قبل تنفيذ التعليمات البرمجية. هذا يعني أننا إذا فعلنا هذا:

 console.log (greeter); var greeter = "say hello" 

يتم تفسيره على النحو التالي:

 var greeter; console.log(greeter); // greeter is undefined greeter = "say hello" 

لذلك varيتم رفع المتغيرات إلى أعلى نطاقها وتهيئتها بقيمة undefined.

مشكلة مع var

هناك ضعف يأتي مع   var. سأستخدم المثال أدناه لشرح:

 var greeter = "hey hi"; var times = 4; if (times > 3) { var greeter = "say Hello instead"; } console.log(greeter) // "say Hello instead" 

لذلك ، منذ times > 3إرجاع صحيح ، greeterيتم إعادة تعريفه إلى "say Hello instead". في حين أن هذه ليست مشكلة إذا كنت تريد عن قصد greeterإعادة تعريفها ، فإنها تصبح مشكلة عندما لا تدرك أن المتغير greeterقد تم تعريفه بالفعل من قبل.

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

دع

letيُفضل الآن للإعلان عن المتغير. ليس من المستغرب أنها تأتي كتحسين varللإعلانات. كما أنه يحل المشكلة varالتي غطيناها للتو. دعونا نفكر في سبب ذلك.

دعونا يتم حظر النطاق

الكتلة هي جزء من التعليمات البرمجية يحدها {}. كتلة تعيش في أقواس مجعدة. أي شيء داخل الأقواس المتعرجة هو كتلة.

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

 let greeting = "say Hi"; let times = 4; if (times > 3) { let hello = "say Hello instead"; console.log(hello);// "say Hello instead" } console.log(hello) // hello is not defined 

نرى أن استخدام helloخارج الكتلة الخاصة به (الأقواس المتعرجة حيث تم تعريفه) يؤدي إلى إرجاع خطأ. هذا لأن letالمتغيرات محددة النطاق.

اسمحوا يمكن تحديثها ولكن ليس إعادة إعلانها.

تمامًا مثل varالمتغير المُعلن عنه letيمكن تحديثه ضمن نطاقه. على عكس var، letلا يمكن إعادة تعريف المتغير ضمن نطاقه. لذلك بينما يعمل هذا:

 let greeting = "say Hi"; greeting = "say Hello instead"; 

هذا سيعيد خطأ:

 let greeting = "say Hi"; let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared 

ومع ذلك ، إذا تم تحديد نفس المتغير في نطاقات مختلفة ، فلن يكون هناك خطأ:

 let greeting = "say Hi"; if (true) { let greeting = "say Hello instead"; console.log(greeting); // "say Hello instead" } console.log(greeting); // "say Hi" 

لماذا لا يوجد خطأ؟ هذا لأنه يتم التعامل مع كلا الحالتين كمتغيرات مختلفة لأن لهما نطاقات مختلفة.

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

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

رفع اسمحوا

تماما مثل   var، letورفع الإعلانات إلى الأعلى. على عكس varالذي تمت تهيئته كـ undefined، letلم يتم تهيئة الكلمة الأساسية. لذلك إذا حاولت استخدام letمتغير قبل التصريح ، فستحصل على Reference Error.

مقدار ثابت

المتغيرات المعلنة مع constالحفاظ على القيم الثابتة. constتشترك الإعلانات في بعض أوجه التشابه مع letالإعلانات.

const declarations are block scoped

Like let declarations, const declarations can only be accessed within the block they were declared.

const cannot be updated or re-declared

This means that the value of a variable declared with const remains the same within its scope. It cannot be updated or re-declared. So if we declare a variable with const, we can neither do this:

 const greeting = "say Hi"; greeting = "say Hello instead";// error: Assignment to constant variable. 

nor this:

 const greeting = "say Hi"; const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared 

Every const declaration, therefore, must be initialized at the time of declaration.

This behavior is somehow different when it comes to objects declared with const. While a const object cannot be updated, the properties of this objects can be updated. Therefore, if we declare a const object as this:

 const greeting = { message: "say Hi", times: 4 } 

while we cannot do this:

 const greeting = { words: "Hello", number: "five" } // error: Assignment to constant variable. 

we can do this:

 greeting.message = "say Hello instead"; 

This will update the value of greeting.message without returning errors.

Hoisting of const

Just like let, const declarations are hoisted to the top but are not initialized.

So just in case you missed the differences, here they are:

  • var declarations are globally scoped or function scoped while let and const are block scoped.
  • var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.
  • They are all hoisted to the top of their scope. But while var variables are initialized with undefined, let and const variables are not initialized.
  • في حين varو letيمكن تعريف دون أن تهيئة، constيجب تهيئة أثناء الإعلان.

هل لديك أي سؤال أو إضافات؟ أخبرونى من فضلكم.

شكرا لقرائتك :)