Oops, ponovno sem to storil: odpravljanje pogostih napak v JavaScriptu

Pisanje JavaScript koda ponekad može biti izazovno, a ponekad čak i zastrašujuće, što je poznato mnogim programerima. Tokom rada neizbežno se javljaju greške, a neke od njih se često ponavljaju. U članku namenjenom početnicima objašnjavaju se te greške i načini njihovog rešavanja. Funkcije, svojstva i objekti su uzeti iz popularne pesme. Sve to pomaže da se brzo zapamti kako ispraviti rasprostranjene greške.

Opominjamo: za vse bralce »Habra« — popust 10 000 rubljev ob vpisu na kateri koli tečaj Skillbox s promo kodo »Habr«.

Skillbox priporoča: Praktični tečaj Mobilni razvijalec PRO.

TypeError: svojstvo nije definisano

let girl = {
    name: "Lucky",
    location: "Hollywood",
    profession: "star",
    thingsMissingInHerLife: true,
    lovely: true,
    cry: function() {
        return "plače, plače, plače u svom usamljenom srcu"
    }
}
console.log(girl.named.lucky)

Primer koda iznad baće grešku Uncaught TypeError: Cannot read property ‘lucky’ of undefined. Problem je u tome što objekat girl nema svojstvo named, iako ima svojstvo name. Pošto svojstvo girl.named nije definisano, ne može se ni pristupiti tom svojstvu jer formalno ne postoji. Ali ako zamenite girl.named.lucky sa girl.name, sve će raditi i program će vratiti Lucky.

Više o svojstvima možete pročitati ovde.

Načini za rešavanje TypeError grešaka

TypeError greške se pojavljuju kada programer pokušava da izvrši akcije sa podacima koji ne odgovaraju određenom tipu. Kao primer može se uzeti primena .bold(), pozivanje svojstva undefined ili pozivanje funkcije koja zapravo nije funkcija.

Na primer, ako pokušate da pozovete girl (), javlja se greška Uncaught TypeError: yourVariable.bold is not a function i girl is not a function, jer se zapravo poziva objekat, a ne funkcija.

Da biste uklonili greške, potrebno je istražiti promenljive. Dakle, šta je girl? A šta je girl.named? To možete saznati ako analizirate kod, ispišete promenljive pomoću console.log, komande debugger ili pozivanjem imena promenljive u konzoli. Treba da se uverite da je moguće raditi sa tipom podataka koji se nalazi u promenljivoj. Ako ne odgovara, izmenite ga, na primer, dodajte uslov ili blok try..catch - i dobijete kontrolu nad izvršenjem operacije.

Preopterećenje steka

Če verjamemo avtorjem pesmi Baby One More Time (to je Britney Spears, ja), beseda hit v tem kontekstu pomeni željo pevke, da bi ji ponovno poklicali (tukaj je pojasnilo samega konteksta pesmi — op. prev.). Zelo verjetno je, da bo ta želja povečala število klicev v resničnem življenju. V programiranju pa to predstavlja rekurzijo, ki lahko povzroči napako v primeru prelivanja sklada klicev.

Napake izgledajo takole:

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

Prelivanje sklada se zgodi, če razvijalec ni upošteval osnovnega primera pri rekurziji ali pa če koda ne naslovi predvidenega primera.

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

V tem primeru stillBelieve nikoli ne more prevzeti vrednosti false, zato se bo vsakokrat zgodil klic oneMoreTime, a izvajanje funkcije se ne bo nikoli končalo.

Če pa začnemo upati na dva prijatelja, to zmanjša loneliness (osamljenost), in klic morda ne bo potreben.

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

Kot primer lahko navedemo primere z neskončnimi zankami, kjer sistem ne izda sporočila o napaki, ampak stran, na kateri se izvaja JavaScript koda, preprosto zmrzne. To se zgodi, če zanka while nima pogoja za zaključek.

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Continue dancing until the world ends")
}

Problem lahko rešimo na naslednji način:

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Continue dancing until the world ends")
  worldEnded = true
}

Odpravljanje neskončnih zank in rekurzij

Če se pojavi težava z neskončno zanko, je v Chrome ali Edge treba zapreti zavihek, v Firefoxu pa okno brskalnika. Nato je treba natančno analizirati kodo. Če težave ne najdete, dodajte ukaz debugger v zanko ali funkcijo in preverite vrednosti spremenljivk. Če rezultat ni takšen, kot je pričakovano, ga lahko enostavno zamenjate.

V primeru, ki je naveden zgoraj, je debugger potrebno dodati kot prvo vrstico funkcije ali zanke. Nato je treba odpreti zavihek za razhroščevanje v Chromu in analizirati spremenljivke v obsegu. S pomočjo gumba next lahko spremljate njihove spremembe pri vsaki iteraciji. Vse to je enostavno narediti, težave pa se v večini primerov nahajajo.

Več o vsem tem lahko preberete tukaj (za Chrome) in tukaj (za Firefox).

Napaka v sintaksi

Ena najpogostejših napak v JavaScriptu je SyntaxError. Njihovemu izogibanju lahko pomagajo razširitve besedilnega urejevalnika. Tako Bracket Pair Colorizer označuje oklepaje v kodi z različnimi barvami, Prettier ali podoben analizni instrument pa omogoča hitro iskanje napak. Najboljši način za zmanjšanje verjetnosti pojava SyntaxError je minimalna vgrajenost.

Delite v komentarjih: Kaj počnete, da ne bi delali napak ali jih hitro odkrili in popravili?

Skillbox priporoča:

• Двухлетний практический курс «Я — веб-разработчик PRO».
• Spletni tečaj C# razvijalec z nič.
• Практический годовой курс «PHP-разработчик с 0 до PRO».

Izvor: habr.com