Oops, I did it again: Debugging gängiger Fehler in JavaScript

Manchmal ist das Schreiben von JavaScript-Code eine Herausforderung und kann sogar abschreckend sein, was vielen Entwicklern bekannt ist. Während der Arbeit treten unvermeidlich Fehler auf, von denen einige häufig wiederkehren. Dieser Artikel richtet sich an angehende Entwickler und behandelt diese Fehler sowie deren Lösungen. Zur Veranschaulichung wurden die Namen von Funktionen, Eigenschaften und Objekten aus einem beliebten Lied. Das alles hilft, sich schnell einzuprägen, wie man häufige Fehler behebt.

Wir erinnern daran: alle Leser von „Habr“ erhalten einen Rabatt von 10.000 Rubel bei der Anmeldung zu einem beliebigen Kurs von Skillbox mit dem Aktionscode „Habr“.

Skillbox empfiehlt: Praktischer Kurs „Mobile Entwickler PRO“.

TypeError: Eigenschaft ist nicht definiert

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)

Das obige Codebeispiel gibt den Fehler Uncaught TypeError: Cannot read property ‘lucky’ of undefined aus. Das Problem ist, dass das Objekt girl keine Eigenschaft named hat, obwohl es die Eigenschaft name gibt. Da die Eigenschaft girl.named nicht definiert ist, kann auch nicht darauf zugegriffen werden, weil sie formal nicht existiert. Wenn man jedoch girl.named.lucky durch girl.name ersetzt, funktioniert alles und das Programm gibt Lucky zurück.

Weitere Informationen zu Eigenschaften finden Sie hier nachlesen..

Methoden zur Behebung von TypeError

TypeError-Fehler treten auf, wenn ein Programmierer versucht, mit Daten zu arbeiten, die nicht dem angegebenen Typ entsprechen. Ein Beispiel wäre die Anwendung von .bold(), das Abfragen einer undefined-Eigenschaft oder der Aufruf einer Funktion, die tatsächlich keine Funktion ist.

Wenn man also versucht, girl() aufzurufen, erscheint der Fehler Uncaught TypeError: yourVariable.bold is not a function und girl is not a function, da tatsächlich ein Objekt und keine Funktion aufgerufen wird.

Um Fehler zu beheben, muss man die Variablen untersuchen. Was ist also girl? Und was ist girl.named? Dies lässt sich herausfinden, indem man den Code analysiert, die Variablen mit console.log ausgibt, einen debug-Befehl verwendet oder den Namen der Variablen in der Konsole aufruft. Man sollte sicherstellen, dass man den Datentyp, der in der Variablen enthalten ist, bearbeiten kann. Wenn dieser nicht geeignet ist, sollte man ihn ändern, zum Beispiel durch das Hinzufügen einer Bedingung oder eines try..catch-Blocks, um die Kontrolle über die Ausführung der Operation zu erhalten.

Stacküberlauf

Wenn man den Autoren des Songs "Baby One More Time" (das ist Britney Spears, ja) Glauben schenkt, dann bedeutet das Wort "hit" in diesem Kontext den Wunsch der Sängerin, dass sie noch einmal angerufen wird (hier eine Erklärung zum Kontext des Songs – Anmerkung des Übersetzers). Es könnte gut sein, dass dieser Wunsch in der realen Welt zu einer erhöhten Anzahl von Anrufen führt. In der Programmierung hingegen handelt es sich um Rekursion, die einen Fehler verursachen kann, wenn der Aufrufstapel überläuft.

Fehler sehen folgendermaßen aus:

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

Ein Überlauf des Stapels tritt auf, wenn der Entwickler den Basisfall in der Rekursion nicht berücksichtigt hat oder wenn der Code nicht auf den vorgesehenen Fall verweist.

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

In diesem Fall kann stillBelieve niemals den Wert false annehmen, daher wird oneMoreTime jedes Mal aufgerufen, aber die Ausführung der Funktion wird nie beendet.

Wenn man jedoch anfängt, auf zwei Freunde zu hoffen, verringert sich die Einsamkeit (loneliness), und man kann auf einen Anruf verzichten.

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

Ein Beispiel sind unendliche Schleifen, bei denen das System keine Fehlermeldung ausgibt und die Seite, auf der der JavaScript-Code ausgeführt wird, einfach einfriert. Dies geschieht, wenn die while-Schleife keine Abschlussbedingung hat.

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Tanzen, bis die Welt endet")
}

Das Problem lässt sich wie folgt lösen:

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Tanzen, bis die Welt endet")
  worldEnded = true
}

Debugging von unendlichen Schleifen und Rekursionen

Wenn ein Problem mit einer unendlichen Schleife auftritt, muss im Chrome oder Edge der Tab geschlossen werden, während im Firefox das Browserfenster geschlossen wird. Danach sollte der Code gründlich analysiert werden. Wenn das Problem nicht gefunden werden kann, sollte der Befehl debugger in die Schleife oder Funktion eingefügt werden, um den Wert der Variablen zu überprüfen. Wenn das Ergebnis nicht den Erwartungen entspricht, kann dies leicht ersetzt werden.

Im obigen Beispiel sollte der Debugger in der ersten Zeile der Funktion oder Schleife hinzugefügt werden. Danach muss das Debugging-Panel in Chrome geöffnet werden, um die Variablen im Scope zu analysieren. Mit der Schaltfläche 'Next' können Sie deren Änderungen bei jeder Iteration verfolgen. Das alles ist einfach, und in den meisten Fällen befindet sich das Problem.

Detailliertere Informationen dazu finden Sie hier (für Chrome) und hier (für Firefox).

Syntaxfehler

Einer der häufigsten Fehler in JavaScript ist der SyntaxError. Um diese zu vermeiden, helfen Erweiterungen für Texteditoren. So hebt Bracket Pair Colorizer die Klammern im Code in verschiedenen Farben hervor, und Prettier oder ein ähnliches Analysewerkzeug ermöglicht es, Fehler schnell zu finden. Die beste Methode, um die Wahrscheinlichkeit eines SyntaxErrors zu verringern, ist eine minimale Verschachtelung.

Teilen Sie in den Kommentaren mit: Was tun Sie, um Fehler zu vermeiden oder sie schnell zu erkennen und zu beheben?

Skillbox empfiehlt:

• Zweijähriger praktischer Kurs Ich bin ein PRO Webentwickler.
• Online-Kurs C#-Entwickler von Grund auf.
• Praktischer Jahreskurs PHP-Entwickler – von 0 zu PRO.

Quelle: habr.com