Ho, mi faris ĝin denove: Sencimigi oftajn erarojn en JavaScript

Iafoje skribi JavaScript-kodon estas malfacile, kaj iafoje ĝi estas vere timiga, kio estas konata al multaj programistoj. Dum la laboro, eraroj neeviteble aperas, kaj kelkaj el ili ofte ripetiĝas. Ĉi tiu artikolo, destinita por komencantaj programistoj, parolas pri ĉi tiuj eraroj kaj kiel solvi ilin. Por klareco, la nomoj de funkcioj, ecoj kaj objektoj estas prenitaj de populara kantoĈio ĉi helpas vin rapide memori kiel korekti oftajn erarojn.

Ni memorigas vin: por ĉiuj legantoj de "Habr" - rabato de 10 000 rubloj kiam oni enskribas en iu ajn Skillbox-kurso per la reklamkodo "Habr".

Skillbox rekomendas: Praktika kurso "Poŝtelefona Programisto PRO".

TipoEraro: la eco ne estas difinita

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)

La ekzempla kodo supre redonas la eraron Uncaught TypeError: Cannot read property 'lucky' of undefined. La problemo estas, ke la objekto `girl` ne havas nomitan propraĵon, kvankam ĝi ja havas propraĵon `name`. Kaj ĉar la propraĵo `girl.named` ne estas difinita, ĝi ne estas alirebla, ĉar formale ĝi ne ekzistas. Sed se vi anstataŭigas `girl.named.lucky` per `girl.name`, ĉio funkcios kaj la programo redonos `Bonŝancan`.

Pliajn detalojn pri la posedaĵoj oni povas trovi legi ĉi tie.

Metodoj por solvi problemojn pri TypeErrors

Eraroj de tipo okazas kiam programisto provas plenumi agon sur datumoj kiuj ne estas de difinita tipo. Ekzemploj inkluzivas uzon de .bold(), serĉadon de nedifinita eco, aŭ vokon de funkcio kiu fakte ne estas funkcio.

Do, se vi provas voki girl(), vi ricevos la eraron Uncaught TypeError: yourVariable.bold ne estas funkcio kaj girl ne estas funkcio, ĉar fakte objekto estas vokita, ne funkcio.

Por solvi problemojn, vi devas ekzameni la variablojn. Do, kio estas girl? Kaj kio estas girl.named? Vi povas ekscii tion analizante la kodon, montrante la variablojn per console.log, la erarserĉila komando, aŭ vokante la variablonomon en la konzolo. Vi devas certigi, ke vi povas operacii pri la datumtipo enhavita en la variablo. Se ĝi ne taŭgas, ŝanĝu ĝin, ekzemple, aldonu kondiĉon aŭ blokon try..catch — kaj akiru kontrolon super la plenumo de la operacio.

Stakotrofluo

Se vi kredas la kantotekstojn de la kanto "Baby One More Time" (tio estas Britney Spears, jes), tiam la vorto "hit" en ĉi tiu kunteksto signifas la deziron de la kantistino esti denove vokita (jen klarigo pri la kunteksto de la kanto mem, — noto de la tradukisto). Eble ĉi tiu deziro kondukos al pliiĝo de la nombro da vokoj en la reala vivo. Sed en programado, tio estas rikuro, kiu povas kaŭzi eraron en kazo de trofluo de la vokstako.

La eraroj aspektas jene:

Eraro: Stakspaco ne sufiĉas (Rando)
InternaEraro: tro multe da rekursio (Fajrovulpo)
RangeError: La maksimuma grandeco de la alvokstako superiĝis (Chrome)

Staktrofluo okazas kiam la programisto ne konsideris la bazan kazon en rikuro, aŭ kiam la kodo ne traktas la celitan kazon.

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

En ĉi tiu kazo, stillBelieve neniam povas esti taksita kiel malvera, do oneMoreTime estos vokita ĉiufoje, sed la funkcio neniam finiĝos.

Se vi komencos fidi je du amikoj, tio reduktos solecon, kaj vi ne devos atendi vokon.

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

Ekzemplo estus kazoj kun senfinaj cikloj, kie la sistemo ne montras erarmesaĝon, sed la paĝo kie la JavaScript-kodo estas ekzekutita simple frostiĝas. Tio okazas se la while-buklo ne havas finkondiĉon.

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

La problemo povas esti solvita jene:

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

Sencimigado de Senfinaj Bukloj kaj Rikursoj

Se vi havas problemon kun senfina buklo, vi devas fermi la langeton en Chrome aŭ Edge, kaj la retumilan fenestron en Firefox. Post tio, vi devas zorge analizi la kodon. Se vi ne povas trovi la problemon, vi devas aldoni la erarserĉilan komandon al la buklo aŭ funkcio kaj kontroli la valoron de la variabloj. Se la rezulto ne kongruas kun la atendata, tiam anstataŭigu ĝin, tio povas esti farita facile.

En la supra ekzemplo, la erarserĉilo estu aldonita kiel la unua linio de la funkcio aŭ buklo. Poste vi devas malfermi la langeton "erarserĉi" en Chrome, analizante la variablojn en la amplekso. Uzante la butonon "sekva", vi povas spuri ilian ŝanĝon ĉe ĉiu iteracio. Ĉio estas facila farebla, kaj en la plej multaj kazoj, la problemo estas trovita.

Vi povas legi pli pri ĉio ĉi ĉi tie (por kromo) kaj ĉi tie (por Fajrovulpo).

Sintaksa eraro

Unu el la plej oftaj eraroj en JavaScript estas SyntaxError. Tekstredaktilaj etendaĵoj povas helpi eviti ilin. Ekzemple, Bracket Pair Colorizer markas krampojn en kodo per malsamaj koloroj, kaj Prettier aŭ simila analizilo permesas rapide trovi erarojn. La plej bona eblo por redukti la probablecon de SyntaxError estas minimuma nestado.

Kunhavigu en la komentoj: kion vi faras por eviti erarojn aŭ rapide detekti kaj forigi ilin?

Skillbox rekomendas:

• Dujara praktika kurso "Mi estas PRO TTT-programisto".
• Interreta kurso "C# programisto de 0".
• Praktika jarkurso "PHP-programisto de 0 al PRO".

fonto: www.habr.com