A volte scrivere codice JavaScript può risultare difficile e talvolta persino spaventoso, un'esperienza comune a molti sviluppatori. Durante il lavoro, è inevitabile che si verifichino errori, alcuni dei quali si ripetono frequentemente. In questo articolo, rivolto a programmatori principianti, vengono discussi questi errori e i modi per risolverli. Per chiarezza, i nomi delle funzioni, delle proprietà e degli oggetti sono presi da . Tutto ciò aiuta a memorizzare rapidamente come correggere errori 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 produce l'errore Uncaught TypeError: Cannot read property ‘lucky’ of undefined. Il problema è che l'oggetto girl non ha la proprietà named, ma ha la proprietà name. Dato che la proprietà girl.named non è definita, non è possibile accedervi, poiché formalmente non esiste. Tuttavia, se si sostituisce girl.named.lucky con girl.name, tutto funzionerà e il programma restituirà Lucky.
Per ulteriori informazioni sulle proprietà, è possibile .
Modi per risolvere errori TypeError
Gli errori TypeError si verificano quando un programmatore cerca di eseguire azioni su dati che non corrispondono a un tipo specifico. Un esempio può riguardare l'uso di .bold(), la richiesta di una proprietà undefined o la chiamata di una funzione che in realtà non è una funzione.
Ad esempio, se si prova a chiamare girl (), si otterrà l'errore Uncaught TypeError: yourVariable.bold is not a function e girl is not a function, poiché si sta in realtà chiamando un oggetto, non una funzione.
Per risolvere errori, è necessario esaminare le variabili. Cos'è quindi girl? E cosa significa girl.named? Si può scoprire analizzando il codice, stampando le variabili con console.log, utilizzando il comando debugger o richiamando il nome della variabile nella console. È importante assicurarsi di poter operare con il tipo di dati contenuto nella variabile. Se non è adatto, modificarlo, ad esempio aggiungendo una condizione o un blocco try..catch — e si avrà il controllo sull'esecuzione dell'operazione.
Overflow dello stack
Se ci fidiamo degli autori della canzone Baby One More Time (sì, è Britney Spears), la parola hit in questo contesto significa il desiderio della cantante che la contattino di nuovo (qui è fornita una spiegazione del contesto della canzone, - nota del traduttore). È possibile che questo desiderio porti a un aumento delle telefonate nella vita reale. Ma nella programmazione è ricorsione, che può causare un errore in caso di overflow dello stack delle chiamate.
Gli errori appaiono nel seguente modo:
Errore: spazio nello stack esaurito (Edge)
InternalError: troppa ricorsione (Firefox)
RangeError: la dimensione massima dello stack delle chiamate è superata (Chrome)
L'overflow dello stack si verifica se il programmatore non ha considerato il caso base nella ricorsione o se il codice non si riferisce 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 assumere valore false, quindi ogni volta verrà effettuata una chiamata a oneMoreTime, ma l'esecuzione della funzione non terminerà mai.
Se si inizia a contare su due amici, questo ridurrà la loneliness (solitudine), e la telefonata potrebbe non essere necessaria.
function oneMoreTime(stillBelieve=true, loneliness=0) {
if (!stillBelieve && loneliness < 0) return
loneliness--
stillBelieve = false
return oneMoreTime(stillBelieve, loneliness)
}Un esempio può riguardare i casi di cicli infiniti, in cui il sistema non visualizza un messaggio di errore e la pagina su cui viene eseguito il codice JavaScript si blocca. 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")
}Il problema può essere risolto nel modo seguente:
let worldEnded = false
while (worldEnded !== true) {
console.log("Keep on dancin' till the world ends")
worldEnded = true
}Debugging di cicli infiniti e ricorsioni
Se si verifica un problema con un ciclo infinito, in Chrome o Edge è necessario chiudere la scheda, mentre in Firefox è necessario chiudere la finestra del browser. Dopodiché, è importante analizzare accuratamente il codice. Se non riesci a trovare il problema, è consigliabile aggiungere il comando debugger nel ciclo o nella funzione e controllare il valore delle variabili. Se il risultato non corrisponde alle aspettative, sostituisci; questo può essere fatto facilmente.
Nell'esempio sopra, il debugger dovrebbe essere inserito come prima riga della funzione o del ciclo. Poi è necessario aprire il pannello di debug in Chrome, analizzando le variabili nello scope. Con il pulsante next è possibile tracciare le loro modifiche in ogni iterazione. Fare tutto questo è semplice e, nella maggior parte dei casi, il problema si trova.
Puoi leggere di più su tutto questo qui () e qui ().
Errore di sintassi
Uno degli errori più comuni in JavaScript è il SyntaxError. Per evitarli, possono aiutare le estensioni dell'editor di testo. Ad esempio, Bracket Pair Colorizer evidenzia le parentesi nel codice con colori diversi, mentre Prettier o strumenti di analisi simili consentono di trovare rapidamente gli errori. La soluzione migliore, per ridurre la probabilità di ottenere un SyntaxError, è mantenere una minima nidificazione.
Condividi nei commenti: cosa fai per evitare errori o per scoprirli e risolverli rapidamente?
Skillbox consiglia:
- Corso pratico di due anni .
- Corso online .
- Corso pratico annuale .
Fonte: habr.com
