Hoppsan, jag gjorde det igen: Felsökning av vanliga fel i JavaScript

Att skriva JavaScript-kod kan vara utmanande och ibland rent av skrämmande, som många utvecklare känner till. Under arbetets gång uppstår oundvikligen fel, och några av dem upprepas ofta. Den här artikeln, riktad till nybörjare, talar om dessa fel och hur man löser dem. För tydlighetens skull är namnen på funktioner, egenskaper och objekt hämtade från populär låt. Allt detta hjälper dig att snabbt komma ihåg hur du rättar till vanliga misstag.

Påminnelse: för alla läsare av "Habr" - en rabatt på 10 000 rubel när du anmäler dig till någon Skillbox-kurs med hjälp av "Habr"-kampanjkoden.

Skillbox rekommenderar: Praktisk kurs "Mobilutvecklare PRO".

TypeError: egenskapen är inte definierad

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)

Exempelkoden ovan ger felet Uncaught TypeError: Kan inte läsa egenskapen "lucky" för undefined. Problemet är att flickobjektet inte har en namngiven egenskap, även om det har en namnegenskap. Och eftersom egenskapen girl.named inte är definierad kan du inte komma åt den, eftersom den formellt sett inte existerar. Men om du ersätter girl.named.lucky med girl.name så kommer allt att fungera och programmet kommer att returnera Lucky.

Du kan lära dig mer om fastigheterna läs här.

Hur man löser TypeErrors

Typfel uppstår när en programmerare försöker utföra åtgärder på data som inte matchar en specifik typ. Exempel är att använda .bold(), att fråga efter en odefinierad egenskap eller anropa en funktion som egentligen inte är en funktion.

Så om du försöker anropa girl() får du felet Uncaught TypeError: yourVariable.bold är inte en funktion och girl är inte en funktion, eftersom det faktiskt är ett objekt som anropas, inte en funktion.

För att eliminera fel måste du studera variablerna. Så, vad är en tjej? Vad är girl.named? Du kan ta reda på det genom att analysera koden, visa variabler med console.log, debugger-kommandot eller anropa variabelnamnet i konsolen. Du måste se till att det är möjligt att använda datatypen som finns i variabeln. Om det inte passar, ändra det, till exempel, lägg till ett villkor eller försök..fånga block - och få kontroll över utförandet av operationen.

Stack överflöde

Om du tror på författarna till texten till låten Baby One More Time (det här är Britney Spears, yeah), så betyder ordet hit i detta sammanhang sångarens önskan att bli kallad igen (här är en förklaring av själva sammanhanget för sång - översättarens anteckning). Det kan mycket väl vara så att denna önskan kommer att leda till att antalet samtal i verkligheten ökar. Men i programmering är detta en rekursion som kan orsaka ett fel om samtalsstacken svämmar över.

Felen ser ut så här:

Fel: slut på stackutrymme (Edge)
InternalError: för mycket rekursion (Firefox)
RangeError: Maximal anropsstackstorlek har överskridits (Chrome)

Ett stackspill uppstår om utvecklaren inte tar hänsyn till basfallet i rekursionen, eller om koden inte adresserar det avsedda fallet.

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

I det här fallet kan stillBelieve aldrig vara falsk, så oneMoreTime kommer att anropas varje gång, men funktionen kommer aldrig att slutföras.

Om du börjar lita på två vänner kommer detta att minska ensamheten och du behöver inte vänta på ett samtal.

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

Ett exempel är fall med oändliga loopar, när systemet inte genererar ett felmeddelande, utan sidan där JavaScript-koden exekveras helt enkelt fryser. Detta händer om while-slingan inte har ett termineringsvillkor.

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

Du kan lösa problemet enligt följande:

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

Felsökning av oändliga loopar och rekursioner

Om du har ett problem med oändlig loop måste du stänga fliken i Chrome eller Edge och stänga webbläsarfönstret i Firefox. Efter detta måste du noggrant analysera koden. Om du inte kan hitta problemet är det värt att lägga till ett debugger-kommando till din loop eller funktion och kontrollera variablernas värden. Om resultatet inte stämmer överens med det förväntade så byter vi ut det, detta kan göras enkelt.

I exemplet ovan ska debugger läggas till som den första raden i funktionen eller slingan. Sedan måste du öppna felsökningsfliken i Chrome och analysera variablerna i omfattning. Med nästa knapp kan du spåra deras ändringar med varje iteration. Allt detta är lätt att göra, och i de flesta fall hittas problemet.

Du kan läsa mer om allt detta här (för Chrome) och här (för Firefox).

Syntaxfel

Ett av de vanligaste felen i JavaScript är SyntaxError. Textredigeringstillägg hjälper dig att undvika dem. Till exempel markerar Bracket Pair Colorizer parenteser i koden med olika färger och Prettier eller ett liknande analysverktyg gör det möjligt att snabbt hitta fel. Det bästa alternativet för att minska sannolikheten för ett SyntaxError är minimal kapsling.

Dela i kommentarerna: vad gör du för att förhindra misstag eller snabbt upptäcka och eliminera dem?

Skillbox rekommenderar:

• Tvåårig praktisk kurs "Jag är en PRO webbutvecklare".
• Onlinekurs "C#-utvecklare från 0".
• Praktisk årskurs "PHP-utvecklare från 0 till PRO".

Källa: will.com