Ups, ponovno sam to učinio: otklanjanje uobičajenih pogrešaka u JavaScriptu

Pisanje JavaScript koda može biti izazovno, a ponekad i prilično zastrašujuće, kao što mnogi programeri znaju. Tijekom procesa neizbježno se javljaju pogreške, od kojih se neke ponavljaju. Ovaj članak, namijenjen početnicima u programiranju, raspravlja o tim pogreškama i kako ih riješiti. Radi jasnoće, nazivi funkcija, svojstava i objekata preuzeti su iz popularna pjesmaSve vam to pomaže da se brzo sjetite kako ispraviti uobičajene pogreške.

Podsjećamo: za sve čitatelje "Habra" - popust od 10 000 rubalja pri upisu na bilo koji tečaj Skillbox koristeći promotivni kod "Habr".

Skillbox preporučuje: Praktični tečaj "Mobile Developer PRO".

TypeError: svojstvo nije definirano

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)

Gornji primjer koda proizvodi grešku "Uncaught TypeError: Cannot read property 'lucky' of undefined." Problem je u tome što objekt "girl" nema svojstvo "named", iako ima svojstvo "name". A budući da je svojstvo "girl.named" nedefinirano, ne može mu se pristupiti jer tehnički ne postoji. Međutim, ako zamijenite "girl.named.lucky" s "girl.name", sve radi i program vraća "Lucky".

Više detalja o nekretninama možete pronaći pročitajte ovdje.

Kako riješiti probleme s TypeErrors

Pogreške tipa javljaju se kada programer pokuša izvršiti radnju na podacima koji ne odgovaraju definiranom tipu. Primjeri uključuju korištenje .bold(), upite za nedefinirano svojstvo ili pozivanje funkcije koja zapravo nije funkcija.

Dakle, ako pokušate pozvati girl(), dobit ćete grešku Uncaught TypeError: yourVariable.bold nije funkcija i girl nije funkcija, budući da se zapravo poziva objekt, a ne funkcija.

Za rješavanje pogrešaka potrebno je ispitati varijable. Dakle, što je "girl"? A što je "girl.named"? To možete saznati analizom koda, prikazivanjem varijabli pomoću console.log, naredbe debugger ili pozivanjem varijable name u konzoli. Morate se uvjeriti da možete podnijeti tip podataka koji varijabla sadrži. Ako ne može, promijenite ga - na primjer, dodavanjem uvjeta ili bloka try..catch - i preuzmite kontrolu nad izvršavanjem operacije.

Prelijevanje stoga

Ako vjerujemo tekstopiscima pjesme "Baby One More Time" (to je Britney Spears, naravno), riječ "hit" u ovom kontekstu odnosi se na pjevačicinu želju da je ponovno pozovu (evo objašnjenja konteksta pjesme - napom. prevoditelja). Sasvim je moguće da će ta želja dovesti do povećanja poziva u stvarnom životu. Ali u programiranju je to rekurzija koja može uzrokovati grešku u slučaju prepunjenja stoga poziva.

Greške izgledaju ovako:

Pogreška: Nema dovoljno prostora na stogu (Edge)
InternalError: previše rekurzije (Firefox)
RangeError: Prekoračena maksimalna veličina stoga poziva (Chrome)

Do prelijevanja stoga dolazi kada programer ne uspije uzeti u obzir osnovni slučaj u rekurziji ili kada kod ne adresira namjeravani slučaj.

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

U ovom slučaju, stillBelieve nikada ne može dobiti vrijednost false, pa će se oneMoreTime pozivati ​​svaki put, ali funkcija nikada neće dovršiti izvršenje.

Ako se počnete oslanjati na dva prijatelja, to će smanjiti usamljenost i nećete morati čekati poziv.

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

Primjer je slučaj beskonačnih petlji, gdje sustav ne prikazuje poruku o pogrešci, već se stranica koja izvršava JavaScript kod jednostavno zamrzne. To se događa kada while petlja nema uvjet završetka.

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

Problem se može riješiti na sljedeći način:

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

Rješavanje problema beskonačnih petlji i rekurzija

Ako naiđete na problem s beskonačnom petljom, zatvorite karticu u Chromeu ili Edgeu ili prozor preglednika u Firefoxu. Nakon toga pažljivo analizirajte kod. Ako ne možete pronaći problem, dodajte naredbu za ispravljanje pogrešaka u petlju ili funkciju i provjerite vrijednosti varijabli. Ako rezultat nije onakav kakav ste očekivali, zamijenite ga - to je jednostavno.

U gornjem primjeru, debugger treba dodati kao prvi redak funkcije ili petlje. Zatim otvorite karticu za debug u Chromeu i analizirajte varijable u opsegu. Pomoću gumba "Sljedeće" možete pratiti njihove promjene sa svakom iteracijom. Sve je to jednostavno učiniti i u većini slučajeva problem se lako identificira.

Više o svemu tome možete pročitati ovdje (za Chrome) i ovdje (za Firefox).

Sintaktička pogreška

Jedna od najčešćih pogrešaka u JavaScriptu je SyntaxError. Proširenja za uređivanje teksta mogu vam pomoći da ih izbjegnete. Na primjer, Bracket Pair Colorizer ističe zagrade u vašem kodu različitim bojama, dok Prettier ili sličan alat za analizu omogućuje brzo pronalaženje pogrešaka. Najbolji način za smanjenje vjerojatnosti SyntaxErrors je minimiziranje ugniježđivanja.

Podijelite u komentarima: što radite kako biste izbjegli pogreške ili ih brzo otkrili i uklonili?

Skillbox preporučuje:

• Dvogodišnji praktični tečaj "Ja sam PRO web programer".
• Mrežni tečaj "C# programer od 0".
• Praktični godišnji tečaj "PHP programer od 0 do PRO".

Izvor: www.habr.com