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

Pisanje JavaScript koda može biti izazovno, a ponekad i potpuno zastrašujuće, s čim su upoznati mnogi programeri. U procesu rada greške se neizbježno pojavljuju, a neke od njih se često ponavljaju. Ovaj članak, namijenjen programerima početnicima, govori o tim pogreškama i kako ih riješiti. Radi jasnoće, nazivi funkcija, svojstava i objekata preuzeti su iz popularna pjesma. Sve 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 daje pogrešku Uncaught TypeError: Cannot read property 'lucky' of undefined. Problem je u tome što objekt djevojke nema svojstvo imenovano, iako ima svojstvo imena. A budući da svojstvo girl.named nije definirano, ne možete mu pristupiti jer formalno ne postoji. Ali ako zamijenite girl.named.lucky sa girl.name, onda će sve raditi i program će vratiti Lucky.

Možete saznati više o svojstvima pročitajte ovdje.

Kako riješiti TypeErrors

TypeErrors se javljaju kada programer pokuša izvesti radnje na podacima koji ne odgovaraju određenoj vrsti. Primjeri uključuju korištenje .bold(), traženje nedefiniranog svojstva ili pozivanje funkcije koja zapravo nije funkcija.

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

Kako biste uklonili pogreške, morate proučiti varijable. Dakle, što je djevojka? Što je girl.named? To možete saznati analizom koda, prikazivanjem varijabli pomoću console.log, naredbe debuggera ili pozivanjem naziva varijable u konzoli. Morate biti sigurni da je moguće raditi s tipom podataka sadržanim u varijabli. Ako ne odgovara, promijenite ga, npr. dodajte uvjet ili try..catch block - i steknite kontrolu nad izvođenjem operacije.

Stack overflow

Ako je vjerovati autorima teksta pjesme Baby One More Time (ovo je Britney Spears, yeah), onda riječ hit u ovom kontekstu označava želju pjevačice za ponovnim pozivom (evo objašnjenja samog konteksta pjesme pjesma – napomena prevoditelja). Vrlo je moguće da će ova želja dovesti do povećanja broja poziva u stvarnom životu. Ali u programiranju, ovo je rekurzija koja može uzrokovati pogrešku ako se stog poziva prelije.

Greške izgledaju ovako:

Pogreška: nema više prostora u stogu (rub)
InternalError: previše rekurzije (Firefox)
RangeError: premašena maksimalna veličina stoga poziva (Chrome)

Do prekoračenja stoga dolazi ako programer ne uzme u obzir osnovni slučaj u rekurziji ili ako kod ne rješava predviđeni 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 biti false, pa će oneMoreTime biti pozvan svaki put, ali funkcija nikada neće završiti.

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 su slučajevi s beskonačnim petljama, kada sustav ne generira poruku o pogrešci, već se stranica na kojoj se izvršava JavaScript kod jednostavno zamrzne. To se događa ako petlja while nema uvjet prekida.

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

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

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

Otklanjanje pogrešaka u beskonačnim petljama i rekurzijama

Ako imate problem s beskonačnom petljom, trebate zatvoriti karticu u Chromeu ili Edgeu i zatvoriti prozor preglednika u Firefoxu. Nakon toga morate pažljivo analizirati kod. Ako ne možete pronaći problem, isplati se dodati naredbu za ispravljanje pogrešaka u vašu petlju ili funkciju i provjeriti vrijednosti varijabli. Ako rezultat ne odgovara očekivanom, onda ga zamijenimo, to se lako može učiniti.

U gornjem primjeru program za ispravljanje pogrešaka treba dodati kao prvi redak funkcije ili petlje. Zatim morate otvoriti karticu za otklanjanje pogrešaka u Chromeu, analizirajući varijable u opsegu. Pomoću sljedećeg gumba možete pratiti njihove promjene pri svakoj iteraciji. Sve je to lako učiniti, au većini slučajeva problem se pronađe.

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

Sintaktička pogreška

Jedna od najčešćih pogrešaka u JavaScriptu je SyntaxError. Ekstenzije uređivača teksta pomoći će vam da ih izbjegnete. Na primjer, Bracket Pair Colorizer označava zagrade u kodu različitim bojama, a Prettier ili sličan alat za analizu omogućuje brzo pronalaženje pogrešaka. Najbolja opcija za smanjenje vjerojatnosti SyntaxError je minimalno ugniježđivanje.

Podijelite u komentarima: što činite kako biste spriječili greške ili ih brzo otkrili i otklonili?

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