🥇אופס, עשיתי את זה שוב: ניפוי שגיאות JavaScript נפוצות

כתיבת קוד JavaScript יכולה להיות מאתגרת ולעיתים ממש מאיימת, כפי שמפתחים רבים מכירים. בתהליך העבודה מתעוררות בהכרח שגיאות, וחלקן חוזרות על עצמן לעתים קרובות. מאמר זה, המיועד למפתחים מתחילים, מדבר על השגיאות הללו וכיצד לפתור אותן. לשם הבהירות, השמות של הפונקציות, המאפיינים והאובייקטים לקוחים שיר פופולארי. כל זה עוזר לך לזכור במהירות כיצד לתקן טעויות נפוצות.

אנו מזכירים: לכל קוראי Habr - הנחה של 10 רובל בעת הרשמה לכל קורס Skillbox באמצעות קוד ההטבה של Habr.
Skillbox ממליצה: קורס מעשי "Mobile Developer 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: לא ניתן לקרוא את המאפיין 'lucky' של undefined. הבעיה היא שלאובייקט הילדה אין מאפיין בעל שם, למרות שיש לו מאפיין שם. ומכיוון שהנכס girl.named אינו מוגדר, אינך יכול לגשת אליו, כי רשמית הוא לא קיים. אבל אם תחליף את girl.named.lucky ב-girl.name, אז הכל יעבוד והתוכנית תחזיר את Lucky.

אתה יכול ללמוד עוד על הנכסים קרא כאן.

כיצד לפתור TypeErrors

שגיאות Type מתרחשות כאשר מתכנת מנסה לבצע פעולות על נתונים שאינם תואמים לסוג מסוים. דוגמאות כוללות שימוש ב-.bold(), בקשה למאפיין לא מוגדר או קריאה לפונקציה שאינה למעשה פונקציה.

אז, אם תנסה לקרוא ל-girl(), תקבל את השגיאה Uncaught TypeError: yourVariable.bold היא לא פונקציה ו-girl היא לא פונקציה, כי זה בעצם אובייקט שנקרא, לא פונקציה.

כדי לבטל שגיאות, אתה צריך ללמוד את המשתנים. אז מה זה בת? מה זה girl.named? אתה יכול לברר זאת על ידי ניתוח הקוד, הצגת משתנים באמצעות console.log, פקודת debugger, או קריאה לשם המשתנה במסוף. עליך לוודא שניתן לפעול על סוג הנתונים הכלול במשתנה. אם זה לא מתאים, שנה אותו, למשל, הוסף תנאי או try..catch block - וקבל שליטה על ביצוע הפעולה.

ערימת הצפיפות

אם אתה מאמין למחברי המילים לשיר Baby One More Time (זו בריטני ספירס, כן), אז המילה להיט בהקשר זה פירושה רצונו של הזמר להיקרא שוב (הנה הסבר על עצם ההקשר של שיר - הערת המתרגם). בהחלט יכול להיות שהרצון הזה יביא לעלייה במספר השיחות בחיים האמיתיים. אבל בתכנות, זוהי רקורסיה שעלולה לגרום לשגיאה אם מחסנית השיחות עולה על גדותיה.

השגיאות נראות כך:

שגיאה: אזל שטח הערימה (Edge)
שגיאה פנימית: יותר מדי רקורסיה (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)
}

דוגמה לכך היא מקרים עם לולאות אינסופיות, כאשר המערכת אינה מייצרת הודעת שגיאה, אך העמוד בו מבוצע קוד ה-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
}

איתור באגים אינסוף לולאות ורקורסיות

אם יש לך בעיית לולאה אינסופית, עליך לסגור את הכרטיסייה בכרום או ב-Edge, ולסגור את חלון הדפדפן בפיירפוקס. לאחר מכן, עליך לנתח בקפידה את הקוד. אם אינך מוצא את הבעיה, כדאי להוסיף פקודת באגים ללולאה או לפונקציה ולבדוק את ערכי המשתנים. אם התוצאה לא תואמת את הצפוי, אז אנחנו מחליפים אותה, זה יכול להיעשות בקלות.

בדוגמה שלמעלה, יש להוסיף באגים כשורה הראשונה של הפונקציה או הלולאה. לאחר מכן עליך לפתוח את כרטיסיית ניפוי הבאגים ב-Chrome, ולנתח את המשתנים בהיקף. באמצעות הכפתור הבא תוכל לעקוב אחר השינויים שלהם בכל איטרציה. כל זה קל לעשות, וברוב המקרים הבעיה נמצאת.

אתה יכול לקרוא עוד על כל זה כאן (עבור כרום) והנה (עבור פיירפוקס).

שגיאת תחביר

אחת השגיאות הנפוצות ביותר ב-JavaScript היא SyntaxError. הרחבות עורך טקסט יעזרו לך להימנע מהן. לדוגמה, Bracket Pair Colorizer מסמן סוגריים בקוד בצבעים שונים, ו-Prettier או כלי ניתוח דומה מאפשרים למצוא במהירות שגיאות. האפשרות הטובה ביותר להפחית את הסבירות ל-SyntaxError היא קינון מינימלי.

שתפו בתגובות: מה אתם עושים כדי למנוע טעויות או לזהות ולחסל אותן במהירות?