Oops, l'aghju fattu di novu: Debugging errori cumuni in JavaScript

Scrive codice JavaScript pò esse sfida è à volte intimidante, postu chì parechji sviluppatori sò familiarizati. In u prucessu di u travagliu, l'errori inevitabbilmente sorgi, è certi di elli sò ripetuti spessu. Questu articulu, destinatu à i sviluppatori principianti, parla di sti errori è cumu per risolve. Per a chjarità, i nomi di funzioni, pruprietà è oggetti sò presi da canzona pupulare. Tuttu chistu aiuta à ricurdà rapidamente cumu corregge i sbagli cumuni.

Ramintemu: per tutti i lettori di "Habr" - un scontu di 10 000 rubles quandu si iscrizzione in ogni cursu Skillbox cù u codice promozionale "Habr".

Skillbox consiglia: Corso praticu "Sviluppatore Mobile PRO".

TypeError: a pruprietà ùn hè micca definita

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)

U codice di l'esempiu sopra lancia l'errore Uncaught TypeError: Ùn pò micca leghje a pruprietà "furtunata" di undefined. U prublema hè chì l'ughjettu di a ragazza ùn hà micca una pruprietà chjamata, ancu s'ellu hà una pruprietà di nome. E postu chì a pruprietà girl.named ùn hè micca definita, ùn pudete micca accede, perchè formalmente ùn esiste micca. Ma s'è vo rimpiazzà girl.named.lucky cù girl.name, allura tuttu hà da travaglià è u prugramma hà da vultà Lucky.

Pudete sapè più nantu à e proprietà leghje quì.

Cumu risolve TypeErrors

TypeErrors si verificanu quandu un programatore prova di fà azzione nantu à dati chì ùn currispondenu à un tipu specificu. L'esempii includenu l'usu di .bold (), dumandendu una pruprietà indefinita, o chjamà una funzione chì ùn hè micca veramente una funzione.

Allora, s'è vo pruvate à chjamà ragazza (), avete da ottene l'errore Uncaught TypeError: yourVariable.bold ùn hè micca una funzione è a ragazza ùn hè micca una funzione, perchè hè veramente un oggettu chjamatu, micca una funzione.

Per eliminà l'errore, avete bisognu di studià e variàbili. Allora, chì hè una zitella? Chì hè girl.named? Pudete scopre analizendu u codice, affissendu variabili usendu console.log, u cumandamentu di debugger, o chjamendu u nome di variabile in a cunsola. Avete bisognu di assicurà chì hè pussibule operà nantu à u tipu di dati cuntenuti in a variàbile. Se ùn hè micca adattatu, cambiallu, per esempiu, aghjunghje una cundizione o pruvate..catch block - è guadagnà u cuntrollu di l'esekzione di l'operazione.

Stack Overflow

Se crede chì l'autori di a testi di a canzone Baby One More Time (questu hè Britney Spears, sì), allora a parolla hit in questu cuntestu significa u desideriu di u cantante per esse chjamatu novu (eccu una spiegazione di u cuntestu stessu di u canzone - nota di u traduttore). Pò esse bè chì sta brama porta à un aumentu di u numeru di chjama in a vita reale. Ma in a prugrammazione, questu hè una recursione chì pò causà un errore se a pila di chjamate sopra.

L'errori sò cusì:

Errore: Spaziu fora di stack (Edge)
InternalError: troppu recursione (Firefox)
RangeError: A dimensione massima di stack di chjama superata (Chrome)

Un overflow di stack si trova se u sviluppatore ùn cunsiderà micca u casu di basa in a recursione, o se u codice ùn indirizza micca u casu previstu.

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

In questu casu, stillBelieve ùn pò mai esse falsu, cusì oneMoreTime serà chjamatu ogni volta, ma a funzione ùn serà mai cumpleta.

Sè cuminciate à s'appoghjanu à dui amichi, questu riduce a solitude, è ùn avete micca bisognu di aspittà per una chjama.

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

Un esempiu hè casi cù cicli infiniti, quandu u sistema ùn genera micca un missaghju d'errore, ma a pagina nantu à quale u codice JavaScript hè eseguitu solu si congela. Questu succede se u ciclu while ùn hà micca una cundizione di terminazione.

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

Pudete risolve u prublema cusì:

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

Debugging loops infiniti è recursioni

Sì avete un prublema di loop infinitu, avete bisognu di chjude a tabulazione in Chrome o Edge, è chjude a finestra di u navigatore in Firefox. Dopu questu, avete bisognu di analizà currettamente u codice. Se ùn pudete micca truvà u prublema, vale a pena aghjunghje un cumandamentu di debugger à u vostru ciclu o funzione è cuntrollà i valori di e variàbili. Se u risultatu ùn currisponde micca à ciò chì era aspittatu, allora avemu rimpiazzatu, questu pò esse fattu facilmente.

In l'esempiu sopra, u debugger deve esse aghjuntu cum'è a prima linea di a funzione o di u ciclu. Allora avete bisognu di apre a tabulazione di debug in Chrome, analizendu e variàbili in u scopu. Utilizendu u buttone dopu pudete seguità i so cambiamenti à ogni iterazione. Tuttu chistu hè faciule fà, è in a maiò parte di i casi, u prublema si trova.

Pudete leghje più nantu à tuttu questu quì (per Chrome) è quì (per Firefox).

Errore di sintassi

Unu di l'errori più cumuni in JavaScript hè SyntaxError. L'estensione di l'editore di testu vi aiuterà à evità. Per esempiu, Bracket Pair Colorizer marca parentesi in u codice cù culori diffirenti, è Prettier o un strumentu d'analisi simili permette di truvà rapidamente errori. A megliu opzione per riduce a probabilità di un SyntaxError hè un nesting minimu.

Sparte in i cumenti: chì fate per prevene i sbagli o rapidamente detectà è eliminà?

Skillbox consiglia:

• Corso praticu di dui anni "Sò un sviluppatore web PRO".
• Corsu in ligna "Sviluppatore C# da 0".
• Corso praticu annu "Sviluppatore PHP da 0 à PRO".

Source: www.habr.com