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

Scrierea codului JavaScript poate fi o provocare și uneori de-a dreptul intimidantă, așa cum sunt familiarizați mulți dezvoltatori. În procesul de lucru, apar inevitabil erori, iar unele dintre ele se repetă frecvent. Acest articol, destinat dezvoltatorilor începători, vorbește despre aceste erori și despre cum să le rezolvi. Pentru claritate, sunt preluate denumirile funcțiilor, proprietăților și obiectelor cantec popular. Toate acestea vă ajută să vă amintiți rapid cum să corectați greșelile comune.

Amintim: pentru toți cititorii „Habr” - o reducere de 10 de ruble la înscrierea la orice curs Skillbox folosind codul promoțional „Habr”.

Skillbox recomandă: Curs practic „Dezvoltator mobil PRO”.

TypeError: proprietatea nu este definită

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 de mai sus aruncă eroarea Uncaught TypeError: Cannot read property 'lucky' of undefined. Problema este că obiectul girl nu are o proprietate numită, deși are o proprietate name. Și din moment ce proprietatea girl.named nu este definită, nu o puteți accesa, deoarece formal nu există. Dar dacă înlocuiți girl.named.lucky cu girl.name, atunci totul va funcționa și programul va reveni Lucky.

Puteți afla mai multe despre proprietăți citiți aici.

Cum se rezolvă TypeErrors

TypeErrors apar atunci când un programator încearcă să efectueze acțiuni pe date care nu se potrivesc cu un anumit tip. Exemplele includ utilizarea .bold(), solicitarea unei proprietăți nedefinite sau apelarea unei funcții care nu este de fapt o funcție.

Deci, dacă încercați să apelați girl(), veți primi eroarea Uncaught TypeError: yourVariable.bold nu este o funcție și girl nu este o funcție, deoarece este de fapt un obiect care este apelat, nu o funcție.

Pentru a elimina erorile, trebuie să studiați variabilele. Deci, ce este o fată? Care este numele fetei? Puteți afla analizând codul, afișând variabile folosind console.log, comanda debugger sau apelând numele variabilei în consolă. Trebuie să vă asigurați că este posibil să operați pe tipul de date conținut în variabilă. Dacă nu se potrivește, schimbați-l, de exemplu, adăugați o condiție sau încercați..catch block - și obțineți controlul asupra execuției operației.

Stiva deversare

Dacă îi credeți pe autorii versurilor piesei Baby One More Time (aceasta este Britney Spears, da), atunci cuvântul hit în acest context înseamnă dorința cântăreței de a fi chemat din nou (iată o explicație a contextului însuși al cântec – nota traducătorului). Este posibil ca această dorință să ducă la o creștere a numărului de apeluri în viața reală. Dar în programare, aceasta este o recursivitate care poate provoca o eroare dacă stiva de apeluri depășește.

Erorile arată astfel:

Eroare: spațiu de stivă epuizat (Edge)
InternalError: prea multă recursivitate (Firefox)
RangeError: dimensiunea maximă a stivei de apeluri a fost depășită (Chrome)

O depășire a stivei are loc dacă dezvoltatorul nu ia în considerare cazul de bază în recursivitate sau dacă codul nu abordează cazul dorit.

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

În acest caz, stillBelieve nu poate fi niciodată fals, așa că oneMoreTime va fi apelat de fiecare dată, dar funcția nu se va finaliza niciodată.

Dacă începeți să vă bazați pe doi prieteni, acest lucru va reduce singurătatea și nu va trebui să așteptați un apel.

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

Un exemplu sunt cazurile cu bucle infinite, când sistemul nu generează un mesaj de eroare, dar pagina pe care este executat codul JavaScript pur și simplu se blochează. Acest lucru 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")
}

Puteți rezolva problema după cum urmează:

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

Depanare bucle infinite și recursiuni

Dacă aveți o problemă cu bucla infinită, trebuie să închideți fila în Chrome sau Edge și închideți fereastra browserului în Firefox. După aceasta, trebuie să analizați cu atenție codul. Dacă nu puteți găsi problema, merită să adăugați o comandă de depanare în bucla sau funcție și să verificați valorile variabilelor. Dacă rezultatul nu corespunde cu ceea ce era așteptat, atunci îl înlocuim, acest lucru se poate face cu ușurință.

În exemplul de mai sus, depanatorul ar trebui adăugat ca prima linie a funcției sau a buclei. Apoi, trebuie să deschideți fila de depanare în Chrome, analizând variabilele din domeniu. Folosind butonul următor, puteți urmări modificările acestora cu fiecare iterație. Toate acestea sunt ușor de făcut și, în majoritatea cazurilor, problema este găsită.

Puteți citi mai multe despre toate acestea aici (pentru Chrome) si aici (pentru Firefox).

Eroare de sintaxă

Una dintre cele mai frecvente erori în JavaScript este SyntaxError. Extensiile editorului de text vă vor ajuta să le evitați. De exemplu, Bracket Pair Colorizer marchează parantezele din cod cu culori diferite, iar Prettier sau un instrument de analiză similar face posibilă găsirea rapidă a erorilor. Cea mai bună opțiune pentru a reduce probabilitatea unei SyntaxError este imbricarea minimă.

Distribuie în comentarii: ce faci pentru a preveni greșelile sau pentru a le detecta și elimina rapid?

Skillbox recomandă:

• Curs practic de doi ani „Sunt un dezvoltator web PRO”.
• Curs online „Dezvoltator C# de la 0”.
• Curs practic anual „Dezvoltator PHP de la 0 la PRO”.

Sursa: www.habr.com