Ups, spet sem naredil: odpravljanje pogostih napak v JavaScriptu

Pisanje kode JavaScript je lahko zahtevno in včasih naravnost zastrašujoče, kar poznajo številni razvijalci. V procesu dela se neizogibno pojavljajo napake, nekatere pa se pogosto ponavljajo. Ta članek, namenjen razvijalcem začetnikom, govori o teh napakah in o tem, kako jih odpraviti. Zaradi jasnosti so imena funkcij, lastnosti in objektov vzeta iz popularna pesem. Vse to vam pomaga, da se hitro spomnite, kako popraviti pogoste napake.

Spomnimo: za vse bralce "Habr" - popust v višini 10 rubljev ob vpisu v kateri koli tečaj Skillbox s promocijsko kodo "Habr".

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

TypeError: lastnost ni definirana

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)

Zgornji primer kode sproži napako Uncaught TypeError: Cannot read property 'lucky' of undefined. Težava je v tem, da dekle objekt nima poimenovane lastnosti, čeprav ima lastnost imena. In ker lastnost girl.named ni definirana, do nje ne morete dostopati, ker formalno ne obstaja. Če pa girl.named.lucky zamenjate z girl.name, potem bo vse delovalo in program bo vrnil Lucky.

Več o lastnostih lahko izveste preberite tukaj.

Kako odpraviti TypeErrors

Napake TypeErrors se pojavijo, ko programer poskuša izvesti dejanja na podatkih, ki se ne ujemajo z določeno vrsto. Primeri vključujejo uporabo .bold(), zahtevanje nedefinirane lastnosti ali klicanje funkcije, ki dejansko ni funkcija.

Torej, če poskusite poklicati girl(), boste prejeli napako Uncaught TypeError: yourVariable.bold ni funkcija in girl ni funkcija, ker je pravzaprav predmet, ki se kliče, ne funkcija.

Da bi odpravili napake, morate preučiti spremenljivke. Torej, kaj je dekle? Kaj je girl.named? To lahko ugotovite tako, da analizirate kodo, prikažete spremenljivke z uporabo console.log, ukaza debugger ali pokličete ime spremenljivke v konzoli. Prepričati se morate, da je mogoče upravljati s podatkovnim tipom, ki ga vsebuje spremenljivka. Če ne ustreza, ga spremenite, na primer dodajte pogoj ali blok try..catch - in pridobite nadzor nad izvajanjem operacije.

Preobremenitev

Če verjamete avtorjem besedila pesmi Baby One More Time (to je Britney Spears, ja), potem beseda hit v tem kontekstu pomeni pevkino željo po ponovnem klicu (tu je razlaga samega konteksta pesem - opomba prevajalca). Lahko se zgodi, da bo ta želja povzročila povečanje števila klicev v resničnem življenju. Toda v programiranju je to rekurzija, ki lahko povzroči napako, če se klicni sklad prepolni.

Napake izgledajo takole:

Napaka: zmanjkalo prostora v skladu (rob)
InternalError: preveč rekurzije (Firefox)
RangeError: presežena je največja velikost sklada klicev (Chrome)

Do prelivanja sklada pride, če razvijalec ne upošteva osnovnega primera v rekurziji ali če koda ne obravnava 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 biti false, zato bo oneMoreTime poklican vsakič, vendar funkcija ne bo nikoli dokončana.

Če se začnete zanašati na dva prijatelja, bo to zmanjšalo osamljenost in vam ne bo treba čakati na klic.

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

Primer so primeri z neskončnimi zankami, ko sistem ne generira sporočila o napaki, ampak stran, na kateri se izvaja JavaScript koda, preprosto zamrzne. To se zgodi, če zanka while nima prekinitvenega pogoja.

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

Težavo lahko rešite na naslednji način:

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

Odpravljanje napak v neskončnih zankah in rekurzijah

Če imate težavo z neskončno zanko, morate zapreti zavihek v Chromu ali Edgeu in zapreti okno brskalnika v Firefoxu. Po tem morate natančno analizirati kodo. Če ne najdete težave, je vredno dodati ukaz za odpravljanje napak v vašo zanko ali funkcijo in preveriti vrednosti spremenljivk. Če rezultat ne ustreza pričakovanemu, ga zamenjamo, to je enostavno.

V zgornjem primeru je treba razhroščevalnik dodati kot prvo vrstico funkcije ali zanke. Nato morate v Chromu odpreti zavihek za odpravljanje napak in analizirati spremenljivke v obsegu. Z uporabo naslednjega gumba lahko spremljate njihove spremembe z vsako ponovitvijo. Vse to je enostavno narediti in v večini primerov je težava najdena.

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

Sintaksna napaka

Ena najpogostejših napak v JavaScriptu je SyntaxError. Razširitve urejevalnika besedil vam bodo pomagale, da se jim izognete. Bracket Pair Colorizer na primer označi oklepaje v kodi z različnimi barvami, Prettier ali podobno orodje za analizo pa omogoča hitro iskanje napak. Najboljša možnost za zmanjšanje verjetnosti SyntaxError je minimalno gnezdenje.

Delite v komentarjih: kaj storite, da preprečite napake oziroma jih hitro odkrijete in odpravite?

Skillbox priporoča:

• Dvoletni praktični tečaj "Sem PRO spletni razvijalec".
• Spletni tečaj "C# razvijalec od 0".
• Praktični enoletni tečaj "PHP razvijalec od 0 do PRO".

Vir: www.habr.com