{"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\/novosti-interneta\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","title":{"rendered":"Oops, I did it again: debug di errori comuni in JavaScript","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Oops,
\n
\nA volte scrivere codice JavaScript pu\u00f2 essere difficile, e a volte \u00e8 addirittura scoraggiante, qualcosa che molti sviluppatori conoscono bene. Durante il lavoro, \u00e8 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\u00e0 e degli oggetti sono tratti da una canzone popolare<\/a><\/noindex>. Tutto ci\u00f2 aiuta a memorizzare rapidamente come correggere gli errori pi\u00f9 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 genera l'errore Uncaught TypeError: Cannot read property \u2018lucky\u2019 of undefined. Il problema \u00e8 che l'oggetto girl non ha una propriet\u00e0 named, anche se ha una propriet\u00e0 name. Poich\u00e9 girl.named non \u00e8 definito, non possiamo accedervi, poich\u00e9 formalmente non esiste. Ma se sostituiamo girl.named.lucky con girl.name, tutto funzioner\u00e0 e il programma restituir\u00e0 Lucky.<\/p>\n
Per ulteriori informazioni sulle propriet\u00e0, puoi essere letti qui<\/a><\/noindex>.<\/p>\n
Modi per risolvere gli errori TypeError<\/h3>\n
\nGli errori TypeError si verificano quando un programmatore cerca di eseguire operazioni con dati che non corrispondono a un tipo specifico. Ad esempio, si pu\u00f2 considerare l'uso di .bold(), richiedere una propriet\u00e0 undefined o chiamare una funzione che in realt\u00e0 non \u00e8 una funzione.<\/p>\n
Quindi, se provi a chiamare girl (), si verificher\u00e0 l'errore Uncaught TypeError: yourVariable.bold is not a function e girl is not a function, poich\u00e9 in realt\u00e0 si sta chiamando un oggetto e non una funzione.<\/p>\n
Per risolvere gli errori, \u00e8 necessario esaminare le variabili. Quindi, cos'\u00e8 girl? E cos'\u00e8 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\u00e0 di operare con il tipo di dato contenuto nella variabile. Se non \u00e8 adatto, modificalo, ad esempio, aggiungi una condizione o un blocco try..catch - e avrai il controllo sull'esecuzione dell'operazione.<\/p>\n
Overflow del stack<\/h3>\n
\nSe crediamo agli autori della canzone Baby One More Time (\u00e8 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). \u00c8 possibile che questo desiderio porti a un aumento delle chiamate nella vita reale. Ma in programmazione, questo \u00e8 ricorsione, che pu\u00f2 causare errori in caso di overflow dello stack di chiamate.<\/p>\n
Gli errori appaiono nel seguente modo:<\/p>\n
Error: Out of stack space (Edge)
\nInternalError: too much recursion (Firefox)
\nRangeError: Maximum call stack size exceeded (Chrome)
\n <\/i>
\nL'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.<\/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 essere false, quindi verr\u00e0 sempre chiamato oneMoreTime, ma l'esecuzione della funzione non terminer\u00e0 mai.<\/p>\n
Se invece inizi a contare su due amici, questo ridurr\u00e0 la solitudine (loneliness), e potresti non dover aspettare la chiamata.<\/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
\nAd 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.<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Keep on dancin' till the world ends\")\n}<\/code><\/pre>\n
\nPuoi risolvere il problema nel seguente modo:<\/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 riscontri problemi con un ciclo infinito, in Chrome o Edge devi chiudere la scheda, mentre in Firefox devi chiudere la finestra del browser. Successivamente, \u00e8 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, \u00e8 facile farlo.<\/p>\n
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 \u00e8 semplice, e nella maggior parte dei casi il problema viene individuato.<\/p>\n
Puoi leggere maggiori dettagli 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 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\u00e0 di un SyntaxError \u00e8 mantenere bassa la nidificazione.<\/p>\n
Condividi nei commenti: cosa fai per evitare errori o per identificarli e correggerli rapidamente?<\/p>\n
Skillbox consiglia:<\/b><\/p>\n