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

تمت كتابة مقالة المدونة هذه بواسطة روبيش شارما، المعروف أيضًا باسم @hackyrupesh.

1. المتغيرات العالمية غير المقصودة

المشكلة

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

مثال

function setUserName() {
    userName = "Alice"; // userName is now a global variable
}

setUserName();
console.log(userName); // Outputs: "Alice"

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

الحل

قم دائمًا بالإعلان عن المتغيرات باستخدام Let أو const أو var. وهذا يوضح ما إذا كان المتغير محليًا أم عالميًا ويمنع المتغيرات العالمية العرضية.

function setUserName() {
    let userName = "Alice"; // userName is now a local variable
}

setUserName();
console.log(userName); // ReferenceError: userName is not defined

مراجع

• شبكة مطوري موزيلا (MDN): متغيرات جافا سكريبت

2. إساءة استخدام هذه الكلمة الرئيسية

المشكلة

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

مثال

const user = {
    name: "Alice",
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

setTimeout(user.greet, 1000); // Outputs: "Hello, my name is undefined"

في هذا المثال، تشير الكلمة الأساسية this الموجودة داخل الترحيب إلى الكائن العام (أو غير المحدد في الوضع الصارم) عند تمريرها كرد اتصال إلى setTimeout، بدلاً من كائن المستخدم.

الحل

استخدم وظائف السهم أو bind() للتأكد من أن هذا يظل مرتبطًا بالكائن الصحيح.

setTimeout(user.greet.bind(user), 1000); // Outputs: "Hello, my name is Alice"

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

const user = {
    name: "Alice",
    greet: function() {
        setTimeout(() => console.log(`Hello, my name is ${this.name}`), 1000);
    }
};

user.greet(); // Outputs: "Hello, my name is Alice"

مراجع

• MDN: هذا في جافا سكريبت

3. الارتباك غير المحدد والفارغ

المشكلة

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

مثال

let user = {
    name: "Alice",
    age: null
};

if (user.age) {
    console.log(`User's age is ${user.age}`);
} else {
    console.log("Age is not provided");
}
// Outputs: "Age is not provided"

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

الحل

تحقق دائمًا من القيمة غير المحددة والفارغة بشكل صريح إذا كانت كلاهما قيمتين صالحتين في تطبيقك.

if (user.age !== null && user.age !== undefined) {
    console.log(`User's age is ${user.age}`);
} else {
    console.log("Age is not provided");
}

استخدام المساواة الصارمة (===) يمكن أن يساعد أيضًا في التمييز بين غير محدد وخالي.

مراجع

• MDN: لاغية
• MDN: غير محدد

4. رد الاتصال بالجحيم

المشكلة

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

مثال

doSomething(function(result1) {
    doSomethingElse(result1, function(result2) {
        doAnotherThing(result2, function(result3) {
            doFinalThing(result3, function(finalResult) {
                console.log(finalResult);
            });
        });
    });
});

من الصعب متابعة هذه البنية المتداخلة بشدة ومن الصعب تصحيح أخطائها.

الحل

استخدم الوعود أو غير المتزامن/الانتظار لتسوية البنية وجعل الكود أكثر قابلية للقراءة.

doSomething()
    .then(result1 => doSomethingElse(result1))
    .then(result2 => doAnotherThing(result2))
    .then(result3 => doFinalThing(result3))
    .then(finalResult => console.log(finalResult))
    .catch(error => console.error(error));

أو باستخدام المزامنة/الانتظار:

async function executeTasks() {
    try {
        const result1 = await doSomething();
        const result2 = await doSomethingElse(result1);
        const result3 = await doAnotherThing(result2);
        const finalResult = await doFinalThing(result3);
        console.log(finalResult);
    } catch (error) {
        console.error(error);
    }
}

executeTasks();

مراجع

• MDN: الوعود
• MDN: غير متزامن/في انتظار

5. قضايا الدقة النقطة العائمة

المشكلة

تستخدم JavaScript معيار IEEE 754 لتمثيل الأرقام، مما قد يؤدي إلى مشكلات في الدقة، خاصة مع حساب الفاصلة العائمة. يمكن أن يسبب هذا نتائج غير متوقعة في العمليات الحسابية.

مثال

console.log(0.1   0.2); // Outputs: 0.30000000000000004
console.log(0.1   0.2 === 0.3); // Outputs: false

نتيجة 0.1 0.2 ليست بالضبط 0.3 بسبب أخطاء دقة الفاصلة العائمة.

الحل

لتجنب ذلك، يمكنك تقريب النتيجة إلى عدد محدد من المنازل العشرية.

function isEqual(a, b) {
    return Math.abs(a - b) 



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


console.log((0.1 * 10   0.2 * 10) / 10); // Outputs: 0.3





  
  
  مراجع

• MDN: الرقم.EPSILON
• مشكلة حساب النقطة العائمة

خاتمة

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

هذه المدونة كتبها Chatgpt ??