اوه، دوباره این کار را انجام دادم: اشکال زدایی خطاهای رایج در جاوا اسکریپت

همانطور که بسیاری از توسعه دهندگان با آن آشنا هستند، نوشتن کد جاوا اسکریپت می تواند چالش برانگیز و گاهی اوقات کاملاً ترسناک باشد. در روند کار، ناگزیر خطاهایی به وجود می آید و برخی از آنها به طور مکرر تکرار می شوند. این مقاله با هدف توسعه دهندگان تازه کار، در مورد این خطاها و نحوه حل آنها صحبت می کند. برای وضوح، نام توابع، خواص و اشیاء از آن گرفته شده است آهنگ معروف. همه اینها به شما کمک می کند تا به سرعت به یاد آورید که چگونه اشتباهات رایج را اصلاح کنید.

یادآوری می کنیم: برای همه خوانندگان "Habr" - تخفیف 10 روبل هنگام ثبت نام در هر دوره Skillbox با استفاده از کد تبلیغاتی "Habr".

Skillbox توصیه می کند: دوره عملی "موبایل توسعه دهنده PRO".

TypeError: ویژگی تعریف نشده است

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: Cannot read property 'lucky' of undefined را نشان می دهد. مشکل این است که شی دختر دارای خاصیت اسمی نیست، اگرچه دارای خاصیت اسم است. و از آنجایی که ویژگی girl.named تعریف نشده است، نمی توانید به آن دسترسی داشته باشید، زیرا به طور رسمی وجود ندارد. اما اگر girl.named.lucky را با girl.name جایگزین کنید، همه چیز درست می شود و برنامه Lucky را برمی گرداند.

می توانید در مورد خواص بیشتر بدانید اینجا را بخوان.

نحوه رفع TypeErrors

TypeError زمانی رخ می دهد که یک برنامه نویس تلاش می کند تا اقداماتی را روی داده هایی انجام دهد که با نوع خاصی مطابقت ندارند. به عنوان مثال می توان به استفاده از .bold()، درخواست یک ویژگی تعریف نشده، یا فراخوانی تابعی که در واقع یک تابع نیست، اشاره کرد.

بنابراین، اگر سعی کنید girl() را فراخوانی کنید، با خطای Uncaught TypeError مواجه خواهید شد: yourVariable.bold یک تابع نیست و girl یک تابع نیست، زیرا در واقع یک شی است که فراخوانی می شود، نه یک تابع.

برای از بین بردن خطاها باید متغیرها را مطالعه کنید. پس دختر چیست؟ نام دختر چیست؟ شما می توانید با تجزیه و تحلیل کد، نمایش متغیرها با استفاده از console.log، دستور debugger یا فراخوانی نام متغیر در کنسول متوجه این موضوع شوید. باید مطمئن شوید که امکان کار بر روی نوع داده موجود در متغیر وجود دارد. اگر مناسب نیست، آن را تغییر دهید، به عنوان مثال، یک شرط اضافه کنید یا بلوک ..catch را امتحان کنید - و کنترل اجرای عملیات را به دست آورید.

سرریز پشته

اگر به نویسندگان اشعار آهنگ Baby One More Time اعتقاد دارید (این بریتنی اسپیرز است، بله)، پس کلمه هیت در این زمینه به معنای تمایل خواننده برای فراخوانی مجدد است (در اینجا توضیحی در مورد زمینه اصلی این آهنگ وجود دارد. آهنگ - یادداشت مترجم). ممکن است این تمایل منجر به افزایش تعداد تماس ها در زندگی واقعی شود. اما در برنامه نویسی، این یک بازگشت است که در صورت سرریز شدن پشته تماس می تواند باعث خطا شود.

خطاها به شکل زیر هستند:

خطا: خارج از فضای پشته (لبه)
خطای داخلی: بازگشت بیش از حد (Firefox)
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)
}

به عنوان مثال مواردی با حلقه های بی نهایت است، زمانی که سیستم پیام خطایی ایجاد نمی کند، اما صفحه ای که کد جاوا اسکریپت در آن اجرا می شود به سادگی مسدود می شود. اگر حلقه 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
}

اشکال زدایی حلقه های بی نهایت و بازگشت

اگر مشکل حلقه بی نهایت دارید، باید تب را در کروم یا اج ببندید و پنجره مرورگر را در فایرفاکس ببندید. پس از این، باید کد را به دقت تجزیه و تحلیل کنید. اگر نمی توانید مشکل را پیدا کنید، ارزش آن را دارد که یک دستور دیباگر را به حلقه یا تابع خود اضافه کنید و مقادیر متغیرها را بررسی کنید. اگر نتیجه با آنچه انتظار می رفت مطابقت نداشته باشد، آن را جایگزین می کنیم، این کار به راحتی انجام می شود.

در مثال بالا، دیباگر باید به عنوان اولین خط تابع یا حلقه اضافه شود. سپس باید تب اشکال زدایی را در کروم باز کنید و متغیرها را در محدوده تجزیه و تحلیل کنید. با استفاده از دکمه بعدی می توانید تغییرات آنها را با هر تکرار دنبال کنید. انجام همه اینها آسان است و در بیشتر موارد مشکل پیدا می شود.

شما می توانید در مورد همه اینها اینجا بیشتر بخوانید (برای کروم) و اینجا (برای فایرفاکس).

اشتباه نوشتاری

یکی از رایج ترین خطاهای جاوا اسکریپت SyntaxError است. پسوندهای ویرایشگر متن به شما کمک می کند از آنها اجتناب کنید. به عنوان مثال، Bracket Pair Colorizer براکت‌ها را در کد با رنگ‌های مختلف علامت‌گذاری می‌کند و Prettier یا ابزار تحلیلی مشابه، یافتن سریع خطاها را ممکن می‌سازد. بهترین گزینه برای کاهش احتمال SyntaxError حداقل تودرتو است.

در نظرات به اشتراک بگذارید: برای جلوگیری از اشتباهات یا تشخیص سریع و حذف آنها چه می کنید؟

Skillbox توصیه می کند:

• دوره عملی دو ساله "من یک توسعه دهنده وب PRO هستم".
• دوره آنلاین "توسعه دهنده سی شارپ از 0".
• دوره عملی سال "توسعه دهنده PHP از 0 تا PRO".

منبع: www.habr.com