Oops, jag gjorde det igen: felsökning av vanliga fel i JavaScript

Ibland kan det vara svårt att skriva JavaScript-kod, och ibland kan det till och med vara skrämmande, vilket många utvecklare känner igen. Under arbetets gång uppstår oundvikligen fel, och vissa av dem återkommer ofta. I denna artikel, som riktar sig till nybörjare, beskrivs dessa fel och hur man löser dem. För att göra det tydligare har funktionsnamn, egenskaper och objekt hämtats från en populär låt. Allt detta hjälper till att snabbt komma ihåg hur man rättar till vanliga fel.

Påminnelse: för alla läsare av "Habr" — 10 000 rubel rabatt vid registrering för vilken kurs som helst på Skillbox med rabattkoden "Habr".

Skillbox rekommenderar: Praktisk kurs «Mobilutvecklare PRO».

TypeError: egenskap ä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)

Exemplet ovan ger felet Uncaught TypeError: Cannot read property ‘lucky’ of undefined. Problemet är att objektet girl inte har egenskapen named, även om det har egenskapen name. Eftersom egenskapen girl.named inte är definierad kan den inte heller nås, eftersom den formellt inte existerar. Men om man byter girl.named.lucky till girl.name fungerar allt och programmet kommer att returnera Lucky.

För mer information om egenskaper kan man läsas här.

Metoder för att åtgärda TypeError-fel

TypeError-fel uppstår när en programmerare försöker utföra åtgärder med data som inte motsvarar en viss typ. Ett exempel kan vara att använda .bold(), begära en egenskap som är undefined eller att kalla en funktion som inte faktiskt är en funktion.

Om man försöker kalla girl (), kommer det att uppstå felet Uncaught TypeError: yourVariable.bold is not a function och girl is not a function, eftersom det verkligen är ett objekt som anropas, inte en funktion.

För att åtgärda fel måste man studera variablerna. Så vad är girl? Och vad är girl.named? Detta kan man ta reda på genom att analysera koden, skriva ut variabler med hjälp av console.log med kommandot debugger eller anropa variabelns namn i konsolen. Man behöver säkerställa att man kan arbeta med datatypen som finns i variabeln. Om den inte passar, ändra den, till exempel genom att lägga till ett villkor eller en try..catch-block — och få kontroll över operationens utförande.

Stack overflow

Om man ska tro på artisterna bakom låten Baby One More Time (det är Britney Spears, ja), så betyder ordet hit i detta sammanhang ett önskemål från sångerskan att bli uppringd igen (här är en förklaring av själva låtens kontext, — anm. översättaren). Det kan mycket väl hända att detta önskemål leder till en ökning av samtalen i verkliga livet. Men inom programmering är det rekursion, vilket kan orsaka ett fel vid stacköverflöd.

Fel ser ut på följande sätt:

Error: Out of stack space (Edge)
InternalError: too much recursion (Firefox)
RangeError: Maximum call stack size exceeded (Chrome)

Stacköverflödet sker om utvecklaren inte har beaktat basfallet i rekursionen eller om koden inte hanterar det förutsebara fallet.

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

I detta fall kan stillBelieve aldrig få värdet false, så varje gång kommer oneMoreTime att anropas, men funktionen kommer aldrig att avslutas.

Om man istället börjar hoppas på två vänner, minskar det loneliness (ensamhet), och samtalet kan vänta.

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

Ett exempel kan vara fall med oändliga loopar, där systemet inte ger något felmeddelande, utan sidan som kör JavaScript-koden helt enkelt fryser. Detta händer om while-loopen saknar ett avslutningsvillkor.

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

Problemet kan lösas på följande sätt:

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

Debugga oändliga loopar och rekursioner

Om det uppstår ett problem med en oändlig loop, behöver du stänga fliken i Chrome eller Edge, och i Firefox — fönstret i webbläsaren. Efter det måste du noggrant analysera koden. Om problemet inte kan hittas, bör du lägga till debug-server i loopen eller funktionen och kontrollera variablernas värde. Om resultatet inte motsvarar det förväntade, ersätter vi det, och detta kan göras enkelt.

I exemplet ovan bör debuggern läggas till som den första raden i en funktion eller loop. Därefter måste du öppna debug-fliken i Chrome och analysera variablerna i omfattningen. Med knappen next kan du spåra deras förändring vid varje iteration. Att göra detta är enkelt, och i de flesta fall finns problemet.

Mer om detta kan läsas här (för Chrome) och här (för Firefox).

Syntaxfel

Ett av de vanligaste felen i JavaScript är SyntaxError. Att undvika dem kan underlättas genom tillägg för textredigeraren. Till exempel markerar Bracket Pair Colorizer klamrar i koden med olika färger, och Prettier eller ett liknande analysverktyg ger möjlighet att snabbt hitta fel. Det bästa sättet att minska risken för SyntaxError är att ha minimal inbäddning.

Dela gärna i kommentarerna: Vad gör ni för att undvika fel eller snabbt upptäcka och åtgärda dem?

Skillbox rekommenderar:

• Tvåårig praktisk kurs «Jag är webbutvecklare PRO».
• Onlinekurs C#-utvecklare från grunden.
• Praktisk årskurs PHP-utvecklare från grunden till PRO.

Källa: habr.com