Ups, uradio sam to ponovo: Otklanjanje čestih grešaka u JavaScript-u

Pisanje JavaScript koda može biti izazovno i ponekad potpuno zastrašujuće, kao što su mnogi programeri upoznati. U procesu rada neminovno nastaju greške, a neke od njih se često ponavljaju. Ovaj članak, namijenjen programerima početnicima, govori o ovim greškama i kako ih riješiti. Radi jasnoće, imena funkcija, svojstava i objekata su preuzeta iz popularna pesma. Sve ovo pomaže vam da brzo zapamtite kako da ispravite uobičajene greške.

Podsećamo: za sve čitaoce "Habra" - popust od 10 rubalja pri upisu na bilo koji Skillbox kurs koristeći "Habr" promotivni kod.

Skillbox preporučuje: Praktični kurs "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 grešku Uncaught TypeError: Ne mogu pročitati svojstvo 'lucky' od nedefiniranog. Problem je u tome što objekat djevojke nema svojstvo imenovanog, iako ima svojstvo imena. A pošto 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 nekretninama pročitajte ovde.

Kako riješiti TypeErrors

Greške tipa nastaju kada programer pokuša da izvrši radnje nad podacima koji ne odgovaraju određenom tipu. Primjeri uključuju korištenje .bold(), traženje nedefiniranog svojstva ili pozivanje funkcije koja zapravo nije funkcija.

Dakle, ako pokušate da pozovete girl(), dobićete grešku Uncaught TypeError: vašaVariable.bold nije funkcija i devojka nije funkcija, jer je to zapravo objekat koji se poziva, a ne funkcija.

Da biste eliminisali greške, potrebno je proučiti varijable. Dakle, šta je devojka? Šta je girl.named? To možete saznati analizom koda, prikazivanjem varijabli koristeći console.log, komandom debuggera ili pozivanjem imena varijable u konzoli. Morate biti sigurni da je moguće raditi na tipu podataka sadržanom u varijabli. Ako ne odgovara, promijenite ga, na primjer, dodajte uslov ili pokušajte..catch blok - i steknite kontrolu nad izvršavanjem operacije.

Stack Overflow

Ako je vjerovati autorima stihova pjesme Baby One More Time (ovo je Britney Spears, da), onda riječ hit u ovom kontekstu znači želju pjevačice da bude ponovo pozvana (evo objašnjenja samog konteksta pjesma - napomena prevodioca). 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 grešku ako se stek poziva prepuni.

Greške izgledaju ovako:

Greška: nema prostora za stog (Edge)
Interna greška: previše rekurzije (Firefox)
RangeError: premašena je maksimalna veličina steka poziva (Chrome)

Do prelivanja steka dolazi ako programer ne uzme u obzir osnovni slučaj u rekurziji, ili ako kod ne adresira 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 lažan, tako da će se oneMoreTime pozivati ​​svaki put, ali funkcija nikada neće biti dovršena.

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 sa beskonačnim petljama, kada sistem ne generiše poruku o grešci, ali stranica na kojoj se izvršava JavaScript kod jednostavno se zamrzne. Ovo se dešava ako petlja while nema uslov završetka.

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 grešaka u beskonačnim petljama i rekurzijama

Ako imate problem beskonačne petlje, morate 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, vrijedi dodati naredbu za otklanjanje pogrešaka u vašu petlju ili funkciju i provjeriti vrijednosti varijabli. Ako rezultat ne odgovara očekivanom, onda ga zamjenjujemo, to se lako može učiniti.

U gornjem primjeru, debugger treba dodati kao prvi red funkcije ili petlje. Zatim morate otvoriti karticu za otklanjanje grešaka u Chromeu, analizirajući varijable u opsegu. Koristeći sljedeće dugme možete pratiti njihove promjene na svakoj iteraciji. Sve je to lako učiniti, a u većini slučajeva problem se pronađe.

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

Sintaksna greška

Jedna od najčešćih grešaka u JavaScript-u je SyntaxError. Ekstenzije za uređivanje 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ćava brzo pronalaženje grešaka. Najbolja opcija za smanjenje vjerovatnoće SyntaxError je minimalno ugniježđenje.

Podijelite u komentarima: što radite da spriječite greške ili ih brzo otkrijete i otklonite?

Skillbox preporučuje:

• Dvogodišnji praktični kurs "Ja sam PRO web developer".
• Online kurs "C# programer od 0".
• Praktična godina kursa "PHP programer od 0 do PRO".

izvor: www.habr.com