{"id":32769,"date":"2019-10-31T21:48:48","date_gmt":"2019-10-31T18:48:48","guid":{"rendered":"https:\/\/prohoster.info\/blog\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript\/"},"modified":"2019-10-31T21:48:48","modified_gmt":"2019-10-31T18:48:48","slug":"oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","status":"publish","type":"post","link":"https:\/\/prohoster.info\/it\/blog\/news\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","title":{"rendered":"Oops, I did it again: debug dei comuni errori in JavaScript","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Oops,
\n
\nA volte scrivere codice JavaScript pu\u00f2 risultare difficile e talvolta persino spaventoso, un'esperienza comune a molti sviluppatori. Durante il lavoro, \u00e8 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\u00e0 e degli oggetti sono presi da una canzone popolare<\/a><\/noindex>. Tutto ci\u00f2 aiuta a memorizzare rapidamente come correggere errori comuni.
\n<\/a><\/noindex><\/p>\n

Ricordiamo:<\/b> per tutti i lettori di \u00abHabr\u00bb \u2014 sconto di 10.000 rubli per l'iscrizione a qualsiasi corso Skillbox con il codice promozionale \u00abHabr\u00bb.<\/i><\/p>\n

Skillbox consiglia:<\/b> Corso pratico \u00abSviluppatore mobile PRO\u00bb<\/a><\/noindex>.\n<\/p><\/blockquote>\n

<\/p>\n

TypeError: propriet\u00e0 non definita<\/h3>\n

<\/p>\n

let girl = {\n    name: \"Lucky\",\n    location: \"Hollywood\",\n    profession: \"star\",\n    thingsMissingInHerLife: true,\n    lovely: true,\n    cry: function() {\n        return \"cry, cry, cries in her lonely heart\"\n    }\n}\nconsole.log(girl.named.lucky)<\/code><\/pre>\n
\nL'esempio di codice sopra produce l'errore Uncaught TypeError: Cannot read property \u2018lucky\u2019 of undefined. Il problema \u00e8 che l'oggetto girl non ha la propriet\u00e0 named, ma ha la propriet\u00e0 name. Dato che la propriet\u00e0 girl.named non \u00e8 definita, non \u00e8 possibile accedervi, poich\u00e9 formalmente non esiste. Tuttavia, se si sostituisce girl.named.lucky con girl.name, tutto funzioner\u00e0 e il programma restituir\u00e0 Lucky.<\/p>\n
Per ulteriori informazioni sulle propriet\u00e0, \u00e8 possibile leggere qui<\/a><\/noindex>.<\/p>\n
Modi per risolvere errori TypeError<\/h3>\n
\nGli errori TypeError si verificano quando un programmatore cerca di eseguire azioni su dati che non corrispondono a un tipo specifico. Un esempio pu\u00f2 riguardare l'uso di .bold(), la richiesta di una propriet\u00e0 undefined o la chiamata di una funzione che in realt\u00e0 non \u00e8 una funzione.<\/p>\n
Ad esempio, se si prova a chiamare girl (), si otterr\u00e0 l'errore Uncaught TypeError: yourVariable.bold is not a function e girl is not a function, poich\u00e9 si sta in realt\u00e0 chiamando un oggetto, non una funzione.<\/p>\n
Per risolvere errori, \u00e8 necessario esaminare le variabili. Cos'\u00e8 quindi girl? E cosa significa girl.named? Si pu\u00f2 scoprire analizzando il codice, stampando le variabili con console.log, utilizzando il comando debugger o richiamando il nome della variabile nella console. \u00c8 importante assicurarsi di poter operare con il tipo di dati contenuto nella variabile. Se non \u00e8 adatto, modificarlo, ad esempio aggiungendo una condizione o un blocco try..catch \u2014 e si avr\u00e0 il controllo sull'esecuzione dell'operazione.<\/p>\n
Overflow dello stack<\/h3>\n
\nSe ci fidiamo degli autori della canzone Baby One More Time (s\u00ec, \u00e8 Britney Spears), la parola hit in questo contesto significa il desiderio della cantante che la contattino di nuovo (qui \u00e8 fornita una spiegazione del contesto della canzone, - nota del traduttore). \u00c8 possibile che questo desiderio porti a un aumento delle telefonate nella vita reale. Ma nella programmazione \u00e8 ricorsione, che pu\u00f2 causare un errore in caso di overflow dello stack delle chiamate.<\/p>\n
Gli errori appaiono nel seguente modo:<\/p>\n
Errore: spazio nello stack esaurito (Edge)
\nInternalError: troppa ricorsione (Firefox)
\nRangeError: la dimensione massima dello stack delle chiamate \u00e8 superata (Chrome)
\n <\/i>
\nL'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.<\/p>\n
function oneMoreTime(stillBelieve=true, loneliness=0) {\n    if (!stillBelieve && loneliness < 0) return\n    loneliness++\n    return oneMoreTime(stillBelieve, loneliness)\n}<\/code><\/pre>\n
\nIn questo caso, stillBelieve non pu\u00f2 mai assumere valore false, quindi ogni volta verr\u00e0 effettuata una chiamata a oneMoreTime, ma l'esecuzione della funzione non terminer\u00e0 mai.<\/p>\n
Se si inizia a contare su due amici, questo ridurr\u00e0 la loneliness (solitudine), e la telefonata potrebbe non essere necessaria.<\/p>\n
function oneMoreTime(stillBelieve=true, loneliness=0) {\n    if (!stillBelieve && loneliness < 0) return\n    loneliness--\n    stillBelieve = false\n    return oneMoreTime(stillBelieve, loneliness)\n}<\/code><\/pre>\n
\nUn esempio pu\u00f2 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.<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Keep on dancin' till the world ends\")\n}<\/code><\/pre>\n
\nIl problema pu\u00f2 essere risolto nel modo seguente:<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Keep on dancin' till the world ends\")\n  worldEnded = true\n}<\/code><\/pre>\n
<\/p>\n
Debugging di cicli infiniti e ricorsioni<\/h3>\n
\nSe si verifica un problema con un ciclo infinito, in Chrome o Edge \u00e8 necessario chiudere la scheda, mentre in Firefox \u00e8 necessario chiudere la finestra del browser. Dopodich\u00e9, \u00e8 importante analizzare accuratamente il codice. Se non riesci a trovare il problema, \u00e8 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\u00f2 essere fatto facilmente.<\/p>\n
Nell'esempio sopra, il debugger dovrebbe essere inserito come prima riga della funzione o del ciclo. Poi \u00e8 necessario aprire il pannello di debug in Chrome, analizzando le variabili nello scope. Con il pulsante next \u00e8 possibile tracciare le loro modifiche in ogni iterazione. Fare tutto questo \u00e8 semplice e, nella maggior parte dei casi, il problema si trova.<\/p>\n
Puoi leggere di pi\u00f9 su tutto questo qui (per Chrome<\/a><\/noindex>) e qui (per Firefox<\/a><\/noindex>).<\/p>\n
Errore di sintassi<\/h3>\n
\nUno degli errori pi\u00f9 comuni in JavaScript \u00e8 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\u00e0 di ottenere un SyntaxError, \u00e8 mantenere una minima nidificazione.<\/p>\n
Condividi nei commenti: cosa fai per evitare errori o per scoprirli e risolverli rapidamente?<\/p>\n
Skillbox consiglia:<\/b><\/p>\n