🥇Oops, am făcut-o din nou: depanarea erorilor comune în JavaScript

Scrierea codului JavaScript poate fi uneori dificilă și chiar intimidantă, ceea ce este familiar pentru mulți dezvoltatori. În procesul de lucru, apar inevitable erori, iar unele dintre acestea se repetă frecvent. Articolul, destinat dezvoltatorilor începători, discută despre aceste erori și modalitățile de a le soluționa. Pentru ilustrarea clară, numele funcțiilor, proprietăților și obiectelor sunt preluate din o melodie populară. Toate acestea ajută la memorarea rapidă a modului de corectare a celor mai comune erori.

Vă reamintim: pentru toți cititorii „Habr” — reducere de 10.000 de ruble la înscrierea la orice curs Skillbox cu codul de promovare „Habr”.
Skillbox recomandă: Curs practic «Dezvoltator mobil PRO».

TypeError: proprietate nedefinită

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)

Exemplul de cod menționat mai sus generează eroarea Uncaught TypeError: Cannot read property ‘lucky’ of undefined. Problema constă în faptul că obiectul girl nu are proprietatea named, deși există proprietatea name. Și, deoarece proprietatea girl.named nu este definită, nu se poate accesa, deoarece formal nu există. Însă, dacă înlocuiți girl.named.lucky cu girl.name, totul va funcționa și programul va returna Lucky.

Mai multe informații despre proprietăți pot fi citite aici.

Modalități de eliminare a erorilor TypeError

Erorile TypeError apar atunci când programatorul încearcă să efectueze acțiuni asupra datelor care nu corespund unui anumit tip. De exemplu, pentru a aplica .bold(), a solicita o proprietate undefined sau a apela o funcție care, de fapt, nu este o funcție.

Așadar, dacă încercați să apelați girl(), veți primi eroarea Uncaught TypeError: yourVariable.bold is not a function și girl is not a function, deoarece de fapt obiectul este apelat, nu funcția.

Pentru a elimina erorile, trebuie studiate variabilele. Ce este, așadar, girl? Și ce este girl.named? Acestea pot fi identificate analizând codul, afișând variabile cu ajutorul console.log, comenzii debugger sau apelând numele variabilei în consolă. Trebuie să vă asigurați că aveți posibilitatea de a opera cu tipul de date conținut în variabilă. Dacă acesta nu este adecvat, schimbați-l, de exemplu, adăugând o condiție sau un bloc try..catch - și obțineți control asupra execuției operației.

Supraîncărcarea stivei

Dacă ne bazăm pe autorii melodiei Baby One More Time (da, e vorba de Britney Spears), cuvântul hit în acest context înseamnă dorința cântăreței de a primi un telefon din nou (acesta este un context explicativ, nota traducătorului). Este posibil ca această dorință să ducă la o creștere a apelurilor în viața reală. Dar în programare, aceasta este recursivitate, capabilă să provoace o eroare în cazul suprasarcinii stivei de apeluri.

Erorile arată în felul următor:

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

Suprasarcina stivei apare dacă dezvoltatorul nu a luat în considerare cazul de bază în recursie sau dacă codul nu abordează cazul prevăzut.

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

În acest caz, stillBelieve nu poate lua niciodată valoarea false, astfel că va avea loc constant apelul oneMoreTime, dar executarea funcției nu se va încheia.

Dacă începem să ne bazăm pe doi prieteni, aceasta va reduce loneliness (singurătatea), iar apelul nu va mai fi așteptat.

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

Un exemplu ar fi cazurile cu bucle infinite, când sistemul nu returnează un mesaj de eroare, iar pagina pe care se execută codul JavaScript pur și simplu se blochează. Aceasta se întâmplă dacă bucla while nu are o condiție de terminare.

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

Problema poate fi rezolvată astfel:

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

Debbuging buclelor infinite și recursiilor

Dacă a apărut o problemă cu o buclă infinită, în Chrome sau Edge trebuie să închideți tab-ul, iar în Firefox – fereastra browser-ului. După aceasta, trebuie să analizați cu atenție codul. Dacă nu ați reușit să găsiți problema, merită să adăugați comanda debugger în buclă sau funcție și să verificați valoarea variabilelor. Dacă rezultatul nu corespunde așteptărilor, acesta poate fi înlocuit, ceea ce se poate face ușor.

În exemplul menționat mai sus, debuggerul ar trebui adăugat ca prima linie a funcției sau a buclei. Apoi trebuie să deschideți tab-ul de debug în Chrome, analizând variabilele din scope. Folosind butonul next, puteți urmări modificările acestora la fiecare iterație. Este simplu de realizat, iar în cele mai multe cazuri, problema este identificată.

Mai multe detalii despre toate acestea pot fi citite aici (pentru Chrome) și aici (pentru Firefox).

Eroare de sintaxă

Una dintre cele mai comune erori în JavaScript este SyntaxError. Evitarea acestora poate fi ajutată de extensiile editorului de text. De exemplu, Bracket Pair Colorizer marchează parantezele din cod cu culori diferite, iar Prettier sau un instrument de analiză similar permite găsirea rapidă a erorilor. Cea mai bună opțiune pentru a reduce probabilitatea apariției SyntaxError este o adâncire minimă.

Împărtășiți în comentarii: ce faceți pentru a evita erorile sau pentru a le descoperi și elimina rapid?

Skillbox recomandă:

Curs practic de doi ani „Sunt un dezvoltator web PRO”.

Curs online „Dezvoltator C# cu 0”.

Curs practic anual «Dezvoltator PHP de la 0 la PRO».

Sursa: habr.com