Ups, zrobiłem to jeszcze raz: debugowanie typowych błędów w JavaScript

Pisanie kodu JavaScript może być trudne, a czasem wręcz onieśmielające, o czym wie wielu programistów. W trakcie pracy nieuchronnie pojawiają się błędy, a niektóre z nich często się powtarzają. W tym artykule, skierowanym do początkujących programistów, omówiono te błędy i sposoby ich rozwiązania. Dla przejrzystości nazwy funkcji, właściwości i obiektów zostały wzięte z popularna piosenka. Wszystko to pomaga szybko zapamiętać, jak poprawić typowe błędy.

Przypomnienie: dla wszystkich czytelników „Habr” - rabat w wysokości 10 000 rubli przy zapisywaniu się na dowolny kurs Skillbox przy użyciu kodu promocyjnego „Habr”.

Skillbox poleca: Kurs praktyczny „Programista mobilny PRO”.

TypeError: właściwość nie jest zdefiniowana

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)

Powyższy przykładowy kod zgłasza błąd Uncaught TypeError: Cannot read właściwości „lucky” o niezdefiniowanej. Problem polega na tym, że obiekt dziewczyny nie ma nazwanej właściwości, chociaż ma właściwość name. A ponieważ właściwość girl.named nie jest zdefiniowana, nie można uzyskać do niej dostępu, ponieważ formalnie ona nie istnieje. Ale jeśli zastąpisz girl.named.lucky przez girl.name, wszystko będzie działać, a program zwróci Lucky.

Możesz dowiedzieć się więcej o właściwościach przeczytaj tutaj.

Jak rozwiązać problemy z typem

TypeErrors występują, gdy programista próbuje wykonać działania na danych, które nie pasują do określonego typu. Przykłady obejmują użycie metody .bold(), zapytanie o niezdefiniowaną właściwość lub wywołanie funkcji, która w rzeczywistości nie jest funkcją.

Tak więc, jeśli spróbujesz wywołać metodę girl(), pojawi się błąd Uncaught TypeError: twojaZmienna.bold nie jest funkcją, a dziewczyna nie jest funkcją, ponieważ w rzeczywistości jest wywoływanym obiektem, a nie funkcją.

Aby wyeliminować błędy, należy przestudiować zmienne. Czym więc jest dziewczyna? Jak nazywa się dziewczyna? Można się tego dowiedzieć analizując kod, wyświetlając zmienne za pomocą console.log, polecenia debuggera lub wywołując nazwę zmiennej w konsoli. Należy upewnić się, że możliwe jest operowanie na typie danych zawartym w zmiennej. Jeśli nie pasuje, zmień go, np. dodaj warunek lub spróbuj...catch bloku - i uzyskaj kontrolę nad wykonaniem operacji.

Przepełnienie stosu

Jeśli wierzyć autorom tekstu piosenki Baby One More Time (tak, to Britney Spears), to słowo hit w tym kontekście oznacza pragnienie piosenkarki, by znów zostać wezwana (tutaj wyjaśnienie samego kontekstu utworu piosenka – przyp. tłumacza). Może się zdarzyć, że to pragnienie doprowadzi do wzrostu liczby połączeń w prawdziwym życiu. Jednak w programowaniu jest to rekurencja, która może spowodować błąd w przypadku przepełnienia stosu wywołań.

Błędy wyglądają następująco:

Błąd: brak miejsca na stosie (krawędź)
Błąd wewnętrzny: zbyt duża rekurencja (Firefox)
RangeError: przekroczono maksymalny rozmiar stosu wywołań (Chrome)

Przepełnienie stosu występuje, jeśli programista nie uwzględni przypadku podstawowego w rekurencji lub jeśli kod nie uwzględnia zamierzonego przypadku.

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

W tym przypadku funkcja StillBelieve nigdy nie może być fałszywa, dlatego za każdym razem zostanie wywołana funkcja oneMoreTime, ale funkcja nigdy nie zostanie ukończona.

Jeśli zaczniesz polegać na dwóch przyjaciołach, zmniejszy to samotność i nie będziesz musiał czekać na telefon.

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

Przykładem są przypadki z nieskończonymi pętlami, gdy system nie generuje komunikatu o błędzie, ale strona, na której wykonywany jest kod JavaScript, po prostu zawiesza się. Dzieje się tak, jeśli pętla while nie ma warunku zakończenia.

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

Możesz rozwiązać problem w następujący sposób:

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

Debugowanie nieskończonych pętli i rekurencji

Jeśli masz problem z nieskończoną pętlą, musisz zamknąć kartę w przeglądarce Chrome lub Edge i zamknąć okno przeglądarki w przeglądarce Firefox. Następnie musisz dokładnie przeanalizować kod. Jeśli nie możesz znaleźć problemu, warto dodać do swojej pętli lub funkcji polecenie debuggera i sprawdzić wartości zmiennych. Jeśli wynik nie odpowiada oczekiwaniom, zastępujemy go, można to łatwo zrobić.

W powyższym przykładzie debuger należy dodać jako pierwszą linię funkcji lub pętli. Następnie musisz otworzyć kartę debugowania w Chrome, analizując zmienne w zakresie. Za pomocą przycisku Dalej możesz śledzić ich zmiany w każdej iteracji. Wszystko to jest łatwe do zrobienia i w większości przypadków problem zostaje znaleziony.

Więcej na ten temat można przeczytać tutaj (dla Chrome) i tu (dla Firefoksa).

Błąd składni

Jednym z najczęstszych błędów w JavaScript jest SyntaxError. Rozszerzenia edytora tekstu pomogą Ci ich uniknąć. Na przykład Bracket Pair Colorizer oznacza nawiasy w kodzie różnymi kolorami, a Prettier lub podobne narzędzie analityczne pozwala szybko znaleźć błędy. Najlepszą opcją zmniejszenia prawdopodobieństwa wystąpienia błędu składniowego jest minimalne zagnieżdżanie.

Podziel się w komentarzach: co robisz, aby zapobiegać błędom lub szybko je wykrywać i eliminować?

Skillbox poleca:

• Dwuletni kurs praktyczny „Jestem programistą internetowym PRO”.
• Kurs online „Programista C# od 0”.
• Praktyczny roczny kurs "Programista PHP od 0 do PRO".

Źródło: www.habr.com