"إذا أراد العامل أن يؤدي عمله بشكل جيد، فعليه أولاً أن يشحذ أدواته." - كونفوشيوس، "مختارات كونفوشيوس. لو لينجونج"
الصفحة الأمامية > برمجة > ⚠️ المخاطر الخفية لاستخدام `var` في JavaScript: لماذا حان الوقت للمضي قدمًا

⚠️ المخاطر الخفية لاستخدام `var` في JavaScript: لماذا حان الوقت للمضي قدمًا

تم النشر بتاريخ 2024-11-07
تصفح:546

⚠️ The Hidden Dangers of Using `var` in JavaScript: Why It’s Time to Move On

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


1️⃣ الرفع: يعلن var عن المتغيرات قبل أن تعرفها!

؟ توضيح:

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

؟ النقاط الرئيسية:

  • ؟ الرفع أثناء العمل: يتم نقل إعلانات المتغير إلى أعلى النطاق، ولكن لا يتم نقل مهامها.
  • ؟ قيم غير محددة غير متوقعة: يمكن استخدام المتغيرات قبل تعيين قيمة لها، مما يؤدي إلى نتائج غير محددة غير مقصودة.

؟ مثال:

console.log(myVar);  // undefined (hoisted but not initialized)
var myVar = 10;
console.log(myVar);  // 10

؟ تعليق: تم رفع المتغير myVar إلى أعلى النطاق ولكنه غير محدد في البداية، مما قد يسبب ارتباكًا في التعليمات البرمجية الخاصة بك.

؟ يصلح:

  • ؟ استخدم Let أو const: لا يتم رفع هذه الكلمات الرئيسية بنفس طريقة var، مما يساعد على منع هذه المشكلة.

؟ مثال للإصلاح:

console.log(myLet);  // ReferenceError: myLet is not defined
let myLet = 10;
console.log(myLet);  // 10

؟ تعليق: يؤدي استخدام Let إلى منع الوصول إلى المتغير قبل الإعلان عنه، مما يقلل من الارتباك والأخطاء المحتملة.


2️⃣ نطاق الوظيفة مقابل نطاق الكتلة: يمكن أن يتسرب var من الكتل!

؟ توضيح:

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

؟ النقاط الرئيسية:

  • ؟ نطاق الوظيفة: يتم تحديد نطاق var إلى أقرب وظيفة، حتى لو تم الإعلان عنها داخل كتلة مثل حلقة أو عبارة if.
  • ؟ تسرب المتغيرات: يمكن أن يؤدي ذلك إلى تسرب المتغيرات دون قصد من الكتل، مما يسبب سلوكًا غير متوقع.

؟ مثال:

if (true) {
  var blockVar = "I’m accessible outside this block";
}
console.log(blockVar);  // "I’m accessible outside this block"

؟ تعليق: على الرغم من أنه تم الإعلان عن blockVar داخل كتلة if، إلا أنه لا يزال من الممكن الوصول إليه خارج الكتلة لأن var نطاق وظيفي، وليس نطاق كتلة.

؟ يصلح:

  • ؟ استخدم Let أو const: هذه الكلمات الرئيسية محددة النطاق، مما يعني أنه لا يمكن الوصول إليها إلا داخل الكتلة التي تم تعريفها فيها.

؟ مثال للإصلاح:

if (true) {
  let blockLet = "I’m only accessible inside this block";
}
console.log(blockLet);  // ReferenceError: blockLet is not defined

؟ تعليق: يضمن استخدام Let أو const بقاء المتغيرات محصورة في الكتل الخاصة بها، مما يمنع تسرب النطاق.


3️⃣ مشكلات إعادة التعريف: var يتيح لك الإعلان عن نفس المتغير مرتين!

؟ توضيح:

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

؟ النقاط الرئيسية:

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

؟ مثال:

var name = "Alice";
var name = "Bob";  // No error, overwrites the previous value
console.log(name);  // "Bob"

؟ تعليق: الإعلان الثاني للاسم يحل محل الإعلان الأول، مما قد يسبب أخطاء في الكود.

؟ يصلح:

  • ؟ استخدم Let أو const: تمنعك هذه الكلمات الرئيسية من إعادة تعريف المتغيرات في نفس النطاق، مما يقلل من خطر الكتابة الفوقية غير المقصودة.

؟ مثال للإصلاح:

let name = "Alice";
let name = "Bob";  // SyntaxError: Identifier 'name' has already been declared

؟ تعليق: يساعدك استخدام Let أو const على تجنب إعادة تعريف المتغيرات ويضمن بقاء التعليمات البرمجية الخاصة بك قابلة للتنبؤ بها.


4️⃣ var في الحلقات: احتمال وجود أخطاء في التعليمات البرمجية غير المتزامنة

؟ توضيح:

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

؟ النقاط الرئيسية:

  • ؟ متغيرات الحلقة: لا تقتصر المتغيرات المعلنة باستخدام حلقات var الداخلية على كتلة الحلقة، مما يؤدي إلى أخطاء محتملة عند الوصول إليها لاحقًا.
  • مشكلات غير متزامنة: قد يتسبب هذا في حدوث أخطاء في العمليات غير المتزامنة مثل setTimeout أو الوعود، حيث قد يكون لمتغير الحلقة قيمة غير متوقعة.

؟ مثال:

for (var i = 0; i  console.log(i), 1000);  // Prints: 3, 3, 3 (unexpected)
}

؟ تعليق: نظرًا لأن var ليس محدد النطاق، تتم مشاركة متغير الحلقة i عبر جميع التكرارات، ويتم استخدام قيمته النهائية (3) في كل رد اتصال setTimeout.

؟ يصلح:

  • استخدم Let: الكلمة الأساسية Let محددة النطاق، مما يضمن أن كل تكرار للحلقة يحصل على قيمته المستقلة لمتغير الحلقة.

؟ مثال للإصلاح:

for (let i = 0; i  console.log(i), 1000);  // Prints: 0, 1, 2 (as expected)
}

؟ تعليق: يؤدي استخدام Let إلى إنشاء مثيل جديد لـ i لكل تكرار، وإصلاح مشكلة رد الاتصال غير المتزامن وضمان طباعة القيم الصحيحة.


5️⃣ var والإغلاقات: مصدر للارتباك

؟ توضيح:

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

؟ النقاط الرئيسية:

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

؟ مثال:

function createFunctions() {
  var funcs = [];
  for (var i = 0; i 



؟ تعليق: جميع عمليات الإغلاق تلتقط نفس قيمة i لأن var محدد بنطاق الوظيفة، مما يؤدي إلى نتائج غير متوقعة.

؟ يصلح:

  • ؟ استخدم Let: باستخدام Let، يلتقط كل إغلاق مثيلًا جديدًا لمتغير الحلقة، مما يحل المشكلة.

؟ مثال للإصلاح:

function createFunctions() {
  var funcs = [];
  for (let i = 0; i 



؟ تعليق: مع Let، يحصل كل إغلاق على نسخته الخاصة من i، مما يؤدي إلى إصلاح المشكلة وضمان طباعة القيم المتوقعة.


؟ الخلاصة: حان الوقت لنقول وداعًا لـ var

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

بيان الافراج تم إعادة إنتاج هذه المقالة على: https://dev.to/dharamgfx/the-hidden-dangers-of-using-var-in-javascript-why-its-time-to-move-on-2jgm?1إذا كان هناك أي التعدي، يرجى الاتصال بـ [email protected] للحذف
أحدث البرنامج التعليمي أكثر>

تنصل: جميع الموارد المقدمة هي جزئيًا من الإنترنت. إذا كان هناك أي انتهاك لحقوق الطبع والنشر الخاصة بك أو الحقوق والمصالح الأخرى، فيرجى توضيح الأسباب التفصيلية وتقديم دليل على حقوق الطبع والنشر أو الحقوق والمصالح ثم إرسالها إلى البريد الإلكتروني: [email protected]. سوف نتعامل مع الأمر لك في أقرب وقت ممكن.

Copyright© 2022 湘ICP备2022001581号-3