Oops, aku nindakake maneh: Debugging kesalahan umum ing JavaScript

Nulis kode JavaScript bisa dadi tantangan lan kadhangkala medeni banget, amarga akeh pangembang sing ngerti. Ing proses karya, kesalahan mesthi muncul, lan sawetara sing bola-bali kerep. Artikel iki, ngarahake para pangembang pemula, ngomong babagan kesalahan kasebut lan cara ngatasi. Kanggo gamblang, jeneng fungsi, sifat lan obyek dijupuk saka lagu populer. Kabeh iki mbantu sampeyan ngelingi kanthi cepet carane mbenerake kesalahan umum.

Kita ngelingake: kanggo kabeh sing maca "Habr" - diskon 10 rubel nalika ndhaptar kursus Skillbox nggunakake kode promosi "Habr".

Skillbox nyaranake: Kursus praktis "Mobile Developer PRO".

TypeError: properti ora ditetepake

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)

Kode conto ing ndhuwur mbalang kesalahan Uncaught TypeError: Ora bisa maca properti 'bejo' saka undefined. Masalahe yaiku obyek cah wadon ora duwe properti sing dijenengi, sanajan duwe properti jeneng. Lan wiwit properti girl.named ora ditetepake, sampeyan ora bisa ngakses, amarga resmi ora ana. Nanging yen sampeyan ngganti girl.named.lucky karo girl.name, banjur kabeh bakal bisa lan program bakal bali Lucky.

Sampeyan bisa sinau luwih lengkap babagan properti maos ing kene.

Cara ngatasi TypeErrors

TypeErrors dumadi nalika programmer nyoba nindakake tumindak ing data sing ora cocog karo jinis tartamtu. Conto kalebu nggunakake .bold (), nyuwun property undefined, utawa nelpon fungsi sing ora bener fungsi.

Dadi, yen sampeyan nyoba nelpon girl (), sampeyan bakal njaluk kesalahan Uncaught TypeError: yourVariable.bold ora fungsi lan cah wadon ora fungsi, amarga iku bener obyek disebut, ora fungsi.

Kanggo ngilangi kesalahan, sampeyan kudu sinau variabel. Dadi, apa cah wadon? Apa sing jenenge cah wadon? Sampeyan bisa ngerteni kanthi nganalisa kode, nampilake variabel nggunakake console.log, perintah debugger, utawa nelpon jeneng variabel ing konsol. Sampeyan kudu nggawe manawa iku bisa kanggo operate ing jinis data sing ana ing variabel. Yen ora pas, ngganti, contone, nambah kondisi utawa nyoba..pemblokiran nyekel - lan gain kontrol liwat execution saka operasi.

Tumpukan Overflow

Yen sampeyan percaya karo penulis lirik lagu Baby One More Time (iki Britney Spears, ya), banjur tembung hit ing konteks iki tegese kepinginan penyanyi kasebut supaya disebut maneh (kene katrangan babagan konteks banget. lagu - cathetan penerjemah). Bisa uga kepinginan iki bakal nambah jumlah telpon ing urip nyata. Nanging ing program, iki minangka rekursi sing bisa nyebabake kesalahan yen tumpukan telpon kebanjiran.

Kesalahan katon kaya iki:

Kesalahan: Ora ana papan tumpukan (Edge)
InternalError: rekursi banget (Firefox)
RangeError: Ukuran tumpukan telpon maksimal ngluwihi (Chrome)

Tumpukan tumpukan dumadi yen pangembang ora nganggep kasus dhasar ing rekursi, utawa yen kode kasebut ora ngatasi kasus sing dimaksud.

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

Ing kasus iki, stillBelieve ora bisa palsu, mula oneMoreTime bakal diarani saben wektu, nanging fungsi kasebut ora bakal rampung.

Yen sampeyan miwiti gumantung ing loro kanca, iki bakal nyuda kasepen, lan sampeyan ora kudu ngenteni telpon.

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

Conto kasus karo puteran tanpa wates, nalika sistem ora ngasilake pesen kesalahan, nanging kaca ing ngendi kode JavaScript dieksekusi mung beku. Iki kedadeyan yen loop while ora duwe kondisi terminasi.

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

Sampeyan bisa ngatasi masalah kaya ing ngisor iki:

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

Debugging puteran lan rekursi tanpa wates

Yen sampeyan duwe masalah loop tanpa wates, sampeyan kudu nutup tab ing Chrome utawa Edge, lan nutup jendhela browser ing Firefox. Sawise iki, sampeyan kudu nganalisa kode kasebut kanthi teliti. Yen sampeyan ora bisa nemokake masalah, iku worth nambah printah debugger kanggo daur ulang utawa fungsi lan mriksa nilai saka variabel. Yen asil ora cocog karo apa sing dikarepake, banjur diganti, iki bisa ditindakake kanthi gampang.

Ing conto ing ndhuwur, debugger kudu ditambahake minangka baris pisanan saka fungsi utawa daur ulang. Banjur sampeyan kudu mbukak tab debug ing Chrome, nganalisa variabel ing ruang lingkup. Nggunakake tombol sabanjure sampeyan bisa nglacak owah-owahan ing saben iterasi. Kabeh iki gampang ditindakake, lan umume masalah ditemokake.

Sampeyan bisa maca liyane babagan kabeh ing kene (kanggo chrome) lan kene (kanggo Firefox).

Kesalahan sintaksis

Salah sawijining kesalahan sing paling umum ing JavaScript yaiku SyntaxError. Ekstensi editor teks bakal mbantu sampeyan nyingkiri. Contone, Bracket Pair Colorizer menehi tandha kurung ing kode kanthi warna sing beda-beda, lan Prettier utawa alat analisis sing padha ngidini sampeyan nemokake kesalahan kanthi cepet. Pilihan sing paling apik kanggo nyuda kemungkinan SyntaxError yaiku nesting minimal.

Nuduhake komentar: apa sing sampeyan lakoni kanggo nyegah kesalahan utawa cepet ndeteksi lan ngilangi?

Skillbox nyaranake:

• Kursus praktis rong taun "Aku pengembang web PRO".
• Kursus online "Pengembang C # saka 0".
• Kursus praktis setahun "Pengembang PHP saka 0 nganti PRO".

Source: www.habr.com