🥇Ups, zrobiłem to znowu: debugowanie powszechnych błędów w JavaScript

Czasami pisanie kodu JavaScript jest trudne, a czasami wręcz przerażające, co jest znane wielu programistom. W trakcie pracy nieuniknione są błędy, z których niektóre zdarzają się dość często. W artykule, skierowanym do początkujących programistów, omówione są te błędy i sposoby ich rozwiązania. Dla ilustracji nazwy funkcji, właściwości i obiektów są zaczerpnięte z popularnej piosenki. Wszystko to pomaga szybko zapamiętać, jak naprawiać powszechne błędy.

Przypominamy: dla wszystkich czytelników „Habra” — zniżka 10 000 rubli przy zapisie na dowolny kurs Skillbox z kodem promocyjnym „Habra”.
Skillbox poleca: Praktyczny kurs „Mobilny programista 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)

Przykład kodu podanego powyżej wywołuje błąd Uncaught TypeError: Cannot read property ‘lucky’ of undefined. Problem polega na tym, że obiekt girl nie ma właściwości named, chociaż ma właściwość name. Ponieważ właściwość girl.named nie jest zdefiniowana, nie można uzyskać do niej dostępu, ponieważ formalnie nie istnieje. Jednakże, jeśli zastąpimy girl.named.lucky przez girl.name, wszystko zadziała i program zwróci Lucky.

Więcej o właściwościach można przeczytać tutaj.

Sposoby usuwania błędów TypeError

Błędy TypeError pojawiają się, gdy programista próbuje wykonać operacje na danych, które nie odpowiadają określonemu typowi. Na przykład można wziąć zastosowanie .bold(), zapytanie właściwości undefined lub wywołanie funkcji, która w rzeczywistości nie jest funkcją.

Tak, jeśli spróbujesz wywołać girl (), pojawi się błąd Uncaught TypeError: yourVariable.bold is not a function oraz girl is not a function, ponieważ w rzeczywistości wywoływany jest obiekt, a nie funkcja.

Aby usunąć błędy, należy zbadać zmienne. Czym jest girl? A czym jest girl.named? Można to ustalić, analizując kod, wypisując zmienne za pomocą console.log, korzystając z komendy debugger lub wywołując nazwę zmiennej w konsoli. Należy upewnić się, że możliwe jest operowanie typem danych, który znajduje się w zmiennej. Jeśli nie pasuje, zmień go, na przykład dodaj warunek lub blok try..catch — i przejmij kontrolę nad wykonaniem operacji.

Przepełnienie stosu

Jeśli uwierzyć autorom piosenki Baby One More Time (to Britney Spears, tak), to słowo hit w tym kontekście oznacza pragnienie piosenkarki, by zadzwoniono do niej jeszcze raz (to wyjaśnienie samego kontekstu piosenki, — przyp. tłumacza). Może się zdarzyć, że to pragnienie doprowadzi do zwiększenia liczby połączeń w rzeczywistości. Ale w programowaniu to rekursja, która może wywołać błąd w przypadku przepełnienia stosu wywołań.

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

Błąd: Brak miejsca na stosie (Edge)
InternalError: zbyt wiele rekursji (Firefox)
RangeError: Przekroczono maksymalny rozmiar stosu wywołań (Chrome)

Przepełnienie stosu występuje, jeśli programista nie uwzględnił przypadku bazowego w rekursji lub jeśli kod nie odnosi się do przewidzianego przypadku.

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

W tym przypadku stillBelieve nigdy nie może przyjąć wartości false, dlatego każde wywołanie oneMoreTime będzie miało miejsce, ale wykonanie funkcji nigdy się nie zakończy.

Jeśli jednak zaczniemy liczyć na dwóch przyjaciół, to zmniejszy to loneliness (samotność), i nie będzie potrzeby czekać na telefon.

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

Przykładem mogą być przypadki nieskończonych pętli, kiedy system nie wyświetla komunikatu o błędzie, a strona, na której działa kod JavaScript, po prostu zawiesza się. Tak się dzieje, 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")
}

Problem można rozwiązać 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 rekursji

Jeśli wystąpił problem z nieskończoną pętlą, w Chrome lub Edge należy zamknąć kartę, a w Firefox — okno przeglądarki. Następnie należy dokładnie przeanalizować kod. Jeśli nie udało się znaleźć problemu, warto dodać polecenie debugger do pętli lub funkcji i sprawdzić wartość zmiennych. Jeśli wynik nie odpowiada oczekiwanemu, należy go zamienić, co można łatwo zrobić.

W przykładzie podanym powyżej, debugger należy dodać na pierwszej linii funkcji lub pętli. Następnie trzeba otworzyć zakładkę debugera w Chrome, analizując zmienne w zakresie. Za pomocą przycisku next można śledzić ich zmiany przy każdej iteracji. Wszystko to jest proste do wykonania, a w większości przypadków problem jest zlokalizowany.

Więcej na ten temat można przeczytać tutaj (dla Chrome) oraz tutaj (dla Firefox).

Błąd składni

Jednym z najczęściej występujących błędów w JavaScript jest SyntaxError. Można ich uniknąć dzięki rozszerzeniom edytora tekstu. Tak, Bracket Pair Colorizer zaznacza nawiasy w kodzie różnymi kolorami, a Prettier lub podobne narzędzie analizy pozwala szybko znaleźć błędy. Najlepszym sposobem na zmniejszenie prawdopodobieństwa wystąpienia SyntaxError jest minimalna złożoność.

Podziel się w komentarzach: co robisz, aby unikać błędów lub szybko je wykrywać i naprawiać?

Skillbox poleca:

Dwuletni praktyczny kurs «Jestem programistą webowym PRO».

Kurs online „Programista C# od podstaw”.

Praktyczny roczny kurs «PHP programista od 0 do PRO».

Źródło: habr.com