عفوًا، لقد فعلت ذلك مرة أخرى: تصحيح الأخطاء الشائعة في JavaScript

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

نذكر: لجميع قراء "Habr" - خصم 10 روبل عند التسجيل في أي دورة Skillbox باستخدام رمز "Habr" الترويجي.

يوصي Skillbox بما يلي: دورة عملية "Mobile Developer PRO".

خطأ في الكتابة: لم يتم تعريف الخاصية

let girl = {
    name: "Lucky",
    location: "Hollywood",
    profession: "star",
    thingsMissingInHerLife: true,
    lovely: true,
    cry: function() {
        return "cry, cry, cries in her lonely heart"
    }
}
console.log(girl.named.lucky)

يُظهر رمز المثال أعلاه الخطأ Uncaught TypeError: لا يمكن قراءة الخاصية "محظوظة" غير محددة. تكمن المشكلة في أن كائن الفتاة لا يحتوي على خاصية مسماة، على الرغم من أنه يحتوي على خاصية اسم. وبما أن الخاصيةgirl.named غير محددة، فلا يمكنك الوصول إليها، لأنها غير موجودة رسميًا. ولكن إذا قمت باستبدال Girl.named.lucky بـ Girl.name، فسيعمل كل شيء وسيعود البرنامج Lucky.

يمكنك معرفة المزيد عن الخصائص اقرأ هنا.

كيفية حل أخطاء TypeErrors

تحدث أخطاء الكتابة عندما يحاول المبرمج تنفيذ إجراءات على بيانات لا تتطابق مع نوع معين. تتضمن الأمثلة استخدام ‎.bold()‎، أو المطالبة بخاصية غير محددة، أو استدعاء دالة ليست في الواقع دالة.

لذا، إذا حاولت الاتصال بـgirl()، فسوف تحصل على الخطأ Uncaught TypeError: yourVariable.bold ليس دالة وgirl ليست دالة، لأنه في الواقع كائن يتم استدعاؤه، وليس دالة.

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

كومة تجاوز

إذا كنت تعتقد أن مؤلفي كلمات أغنية Baby One More Time (هذه هي بريتني سبيرز، نعم)، فإن الكلمة التي تم ضربها في هذا السياق تعني رغبة المغني في الاتصال به مرة أخرى (إليك شرحًا للسياق ذاته أغنية - ملاحظة المترجم). ربما تؤدي هذه الرغبة إلى زيادة عدد المكالمات في الحياة الواقعية. ولكن في البرمجة، يعد هذا تكرارًا يمكن أن يسبب خطأً في حالة تجاوز سعة مكدس الاستدعاءات.

تبدو الأخطاء كما يلي:

خطأ: نفدت مساحة المكدس (الحافة)
خطأ داخلي: الكثير من التكرار (فايرفوكس)
RangeError: تم تجاوز الحد الأقصى لحجم مكدس الاستدعاءات (Chrome)

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

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness++
    return oneMoreTime(stillBelieve, loneliness)
}

في هذه الحالة، لا يمكن أن يكون StillBelieve خطأً أبدًا، لذلك سيتم استدعاء oneMoreTime في كل مرة، لكن الوظيفة لن تكتمل أبدًا.

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

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness--
    stillBelieve = false
    return oneMoreTime(stillBelieve, loneliness)
}

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

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
}

يمكنك حل المشكلة على النحو التالي:

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
  worldEnded = true
}

تصحيح الأخطاء في الحلقات والتكرارات اللانهائية

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

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

يمكنك قراءة المزيد عن كل هذا هنا (للكروم) و هنا (لمتصفح فايرفوكس).

خطأ في بناء الجملة

أحد الأخطاء الأكثر شيوعًا في JavaScript هو SyntaxError. ستساعدك ملحقات محرر النصوص على تجنبها. على سبيل المثال، يقوم Bracket Pair Colorizer بوضع علامات على الأقواس في التعليمات البرمجية بألوان مختلفة، وتتيح أداة Prettier أو أداة تحليل مماثلة العثور على الأخطاء بسرعة. أفضل خيار لتقليل احتمال حدوث خطأ SyntaxError هو الحد الأدنى من التداخل.

شارك في التعليقات: ماذا تفعل لمنع الأخطاء أو اكتشافها والقضاء عليها بسرعة؟

يوصي Skillbox بما يلي:

• دورة عملية لمدة عامين "أنا مطور ويب للمحترفين".
• دورة على شبكة الإنترنت "C # developer من 0".
• دورة سنة عملية "مطور PHP من 0 إلى PRO".

المصدر: www.habr.com