A volte scrivere codice JavaScript può essere difficile, e a volte è addirittura scoraggiante, qualcosa che molti sviluppatori conoscono bene. Durante il lavoro, è inevitabile imbattersi in errori, e alcuni di essi si ripresentano spesso. Questo articolo, rivolto ai principianti, parla di questi errori e dei modi per risolverli. Per chiarezza, i nomi delle funzioni, delle proprietà e degli oggetti sono tratti da . Tutto ciò aiuta a memorizzare rapidamente come correggere gli errori più comuni.
Ricordiamo: per tutti i lettori di «Habr» — sconto di 10.000 rubli per l'iscrizione a qualsiasi corso Skillbox con il codice promozionale «Habr».
Skillbox consiglia: Corso pratico .
TypeError: proprietà non 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)L'esempio di codice sopra genera l'errore Uncaught TypeError: Cannot read property ‘lucky’ of undefined. Il problema è che l'oggetto girl non ha una proprietà named, anche se ha una proprietà name. Poiché girl.named non è definito, non possiamo accedervi, poiché formalmente non esiste. Ma se sostituiamo girl.named.lucky con girl.name, tutto funzionerà e il programma restituirà Lucky.
Per ulteriori informazioni sulle proprietà, puoi .
Modi per risolvere gli errori TypeError
Gli errori TypeError si verificano quando un programmatore cerca di eseguire operazioni con dati che non corrispondono a un tipo specifico. Ad esempio, si può considerare l'uso di .bold(), richiedere una proprietà undefined o chiamare una funzione che in realtà non è una funzione.
Quindi, se provi a chiamare girl (), si verificherà l'errore Uncaught TypeError: yourVariable.bold is not a function e girl is not a function, poiché in realtà si sta chiamando un oggetto e non una funzione.
Per risolvere gli errori, è necessario esaminare le variabili. Quindi, cos'è girl? E cos'è girl.named? Puoi scoprirlo analizzando il codice, stampando le variabili con console.log, utilizzando il comando debugger o richiamando il nome della variabile nella console. Devi assicurarti di avere la possibilità di operare con il tipo di dato contenuto nella variabile. Se non è adatto, modificalo, ad esempio, aggiungi una condizione o un blocco try..catch - e avrai il controllo sull'esecuzione dell'operazione.
Overflow del stack
Se crediamo agli autori della canzone Baby One More Time (è Britney Spears, giusto), la parola hit in questo contesto indica il desiderio della cantante di ricevere una chiamata ancora (qui si tratta di chiarire il contesto della canzone, nota del traduttore). È possibile che questo desiderio porti a un aumento delle chiamate nella vita reale. Ma in programmazione, questo è ricorsione, che può causare errori in caso di overflow dello stack di chiamate.
Gli errori appaiono nel seguente modo:
Error: Out of stack space (Edge)
InternalError: too much recursion (Firefox)
RangeError: Maximum call stack size exceeded (Chrome)
L'overflow dello stack si verifica se lo sviluppatore non ha considerato il caso base nella ricorsione o se il codice non si rivolge al caso previsto.
function oneMoreTime(stillBelieve=true, loneliness=0) {
if (!stillBelieve && loneliness < 0) return
loneliness++
return oneMoreTime(stillBelieve, loneliness)
}In questo caso, stillBelieve non può mai essere false, quindi verrà sempre chiamato oneMoreTime, ma l'esecuzione della funzione non terminerà mai.
Se invece inizi a contare su due amici, questo ridurrà la solitudine (loneliness), e potresti non dover aspettare la chiamata.
function oneMoreTime(stillBelieve=true, loneliness=0) {
if (!stillBelieve && loneliness < 0) return
loneliness--
stillBelieve = false
return oneMoreTime(stillBelieve, loneliness)
}Ad esempio, si possono avere casi di cicli infiniti in cui il sistema non restituisce un messaggio di errore, ma la pagina su cui viene eseguito il codice JavaScript si blocca semplicemente. Questo accade se il ciclo while non ha una condizione di terminazione.
let worldEnded = false
while (worldEnded !== true) {
console.log("Keep on dancin' till the world ends")
}Puoi risolvere il problema nel seguente modo:
let worldEnded = false
while (worldEnded !== true) {
console.log("Keep on dancin' till the world ends")
worldEnded = true
}Debugging di cicli infiniti e ricorsioni
Se riscontri problemi con un ciclo infinito, in Chrome o Edge devi chiudere la scheda, mentre in Firefox devi chiudere la finestra del browser. Successivamente, è necessario analizzare attentamente il codice. Se non riesci a trovare il problema, prova ad aggiungere il comando debugger nel ciclo o nella funzione e controlla il valore delle variabili. Se il risultato non corrisponde a quanto previsto, sostituiscilo, è facile farlo.
Nell'esempio sopra, il debugger dovrebbe essere aggiunto come prima riga della funzione o del ciclo. Poi dovresti aprire il pannello di debug in Chrome, analizzando le variabili nello scope. Con il pulsante next puoi monitorare le loro modifiche ad ogni iterazione. Fare tutto questo è semplice, e nella maggior parte dei casi il problema viene individuato.
Puoi leggere maggiori dettagli su tutto questo qui () e qui ().
Errore di sintassi
Uno degli errori più comuni in JavaScript è il SyntaxError. Per evitarli, possono essere utili le estensioni per l'editor di testo. Ad esempio, Bracket Pair Colorizer evidenzia le parentesi nel codice con colori diversi, mentre Prettier o strumenti simili consentono di trovare rapidamente gli errori. La soluzione migliore per ridurre la probabilità di un SyntaxError è mantenere bassa la nidificazione.
Condividi nei commenti: cosa fai per evitare errori o per identificarli e correggerli rapidamente?
Skillbox consiglia:
- Corso pratico di due anni .
- Corso online .
- Corso pratico annuale .
Fonte: habr.com
