Come Risolvere l’Errore “Uncaught TypeError: Cannot Read Property” in JavaScript

Gli errori hanno un ruolo fondamentale nell’apprendimento e nell’utilizzo di qualsiasi linguaggio di programmazione. Lo scopo dei messaggi di errore è quello di aiutare a capire cosa è andato storto da qualche parte nel vostro codice.

Mentre alcuni messaggi di errore sono più semplici da interpretare, altri potrebbero confondere un po’ le idee.

In questo tutorial parleremo di uno degli errori JavaScript più comuni: l’errore “uncaught typeerror: cannot read property”.

Alla fine di questo tutorial, avrete una buona comprensione dell’errore “uncaught typeerror: cannot read property”, e scoprirete anche quali sono le sue cause più comuni e come risolverle.

Cosa Significa “Uncaught Typeerror: Cannot Read Property” in JavaScript?

L’errore “uncaught typeerror: cannot read property” si verifica principalmente quando si cerca di utilizzare o accedere a una variabile undefined. Questo errore può essere generato quando si utilizza vanilla JavaScript o qualsiasi framework Javascript.

È possibile individuare facilmente gli errori durante la codifica utilizzando vari strumenti per sviluppatori come gli strumenti di Chrome dev e lo strumento di staging ad un clic di Kinsta per intercettare gli errori, testare il codice e altro ancora.

Come Risolvere l’Errore “Uncaught Typeerror: Cannot Read Property” in JavaScript

Nelle sezioni che seguono, evidenzieremo alcune delle cause dell’errore “uncaught typeerror: cannot read property” e come risolverle grazie a degli esempi di codice.

Accedere a una Proprietà dell’Oggetto con un Valore non Definito

In questa sezione parleremo di una delle possibili cause dell’errore “uncaught typeerror: cannot read property” in JavaScript. Si tratta dell’accesso a una proprietà dell’oggetto che non è ancora definita.

Ecco un esempio:

let person;

Nel codice qui sopra, abbiamo creato una variabile chiamata person. L’intenzione è quella di rendere questa variabile un oggetto con proprietà come name, age, hobby.

Se dimenticate di creare queste proprietà, otterrete un errore quando cercherete di accedervi. Ovvero:

let person;
console.log(person.name);
// Uncaught TypeError: Cannot read properties of undefined (reading 'name')

Come si può vedere qui sopra, abbiamo provato ad accedere alla proprietà name che non esiste e quindi abbiamo ottenuto un errore che dice: Uncaught TypeError: Cannot read properties of undefined (reading ‘name’).

È una cosa che potrebbe accadere a chiunque, poiché è facile dimenticarsi di creare/aggiungere proprietà al proprio oggetto.

Andiamo avanti e aggiungiamo alcune proprietà all’oggetto per risolvere l’errore:

let person = {
  name: "John",
  age: 200,
  hobby: "coding"
}
console.log(person.name);
// John

Nel codice qui sopra, abbiamo aggiunto la proprietà name in modo che quando proverete ad accedervi, vi verrà restituito il valore “John”.

Accedere a un Elemento che non Esiste in un Array

Proprio come abbiamo visto nell’ultima sezione con gli oggetti, anche in questo caso si verifica l’errore “uncaught typeerror: cannot read property” se si prova ad accedere a un elemento di un array che deve ancora essere inizializzato.

Ecco un esempio:

let arr;
console.log(arr[0]);
// Uncaught TypeError: Cannot read properties of undefined (reading '0')

Nell’esempio precedente, abbiamo provato ad accedere al primo elemento di un array chiamato arr.

L’array è stato dichiarato ma non inizializzato: ciò significa che non gli è stato ancora assegnato alcun elemento.

Per risolvere questo problema, aggiungeremo elementi all’array prima di accedervi. Ovvero:

let arr = [2,4,6,8]
console.log(arr[0]);
// 2

Accedere a un Elemento DOM che non Esiste

Lavorando con il Document Object Model (DOM) in JavaScript, potreste imbattervi nell’errore “uncaught typeerror: cannot read property”.

Questo può accadere per diversi motivi, come ad esempio errori di ortografia durante il riferimento all’elemento DOM, l’accesso a un elemento che non esiste o l’accesso a un elemento prima che il DOM sia stato caricato (ne parleremo nella prossima sezione).

In questa sezione, vedrete un esempio che lancia l’errore “uncaught typeerror: cannot read property” per l’accesso a un elemento DOM inesistente.

Ecco il codice HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Error Tutorial</title>
  </head>
  <body>
    <h1 id="content">Hello World!</h1>
    <script src="app.js"></script>
  </body>
</html>

Nel codice precedente, abbiamo creato un documento HTML di base con un elemento h1 con un ID “content”.

Ecco il codice JavaScript:

let content = document.getElementById("constent");
console.log(content.textContent);
// Uncaught TypeError: Cannot read properties of null (reading 'textContent');

Il codice precedente genera l’errore “uncaught typeerror: cannot read property”; eppure, ci sembra di aver fatto tutto correttamente.

È piuttosto facile non accorgersi di ciò che causa l’errore, che viene generato perché abbiamo scritto “constent” invece di “content” mentre facevamo riferimento all’ID dell’elemento h1.

Ovvero, document.getElementById("constent"); invece di document.getElementById("content");.

Lo stesso errore viene generato se si cerca di fare riferimento a un ID o a un nome di classe che non è ancora stato creato nel DOM.

Per risolvere questo problema, basta semplicemente verificare la presenza di errori di ortografia o assicurarsi che l’elemento a cui si fa riferimento esista effettivamente nel DOM.

Posizionare l’Elemento Script al di Sopra di Altri Elementi DOM all’Interno del Tag Body

La posizione dell’elemento script determina il modo in cui il codice JavaScript viene eseguito nel browser.

Se si posiziona l’elemento script sopra ogni altro elemento del corpo del documento HTML, il codice JavaScript verrà eseguito prima che il DOM sia stato caricato.

Ciò significa che JavaScript non avrà alcun riferimento agli elementi del DOM perché non ne ha atteso il caricamento prima di eseguirlo.

Ecco un esempio:

<!DOCTYPE html>
<html>
  <head>
    <title>Error Tutorial</title>
  </head>
  <body>
    <script src="app.js"></script>
    <h1 id="content">Hello World!</h1>
  </body>
</html>

Nel codice qui sopra, abbiamo posizionato l’elemento script sopra l’elemento h1.

Ecco il codice JavaScript in cui cerchiamo di fare riferimento all’elemento h1 utilizzando il suo ID:

let content = document.getElementById("content");
console.log(content.textContent);
// Uncaught TypeError: Cannot read properties of null (reading 'textContent');

Come previsto, l’errore “uncaught typeerror: cannot read property” è stato lanciato perché il codice JavaScript prima dell’elemento h1 poteva essere registrato nel DOM.

Per risolvere questo problema, inserite sempre l’elemento script prima del tag di chiusura body, cioè sotto ogni altro elemento DOM nel corpo del documento. In questo modo, lo script inizierà ad essere eseguito dopo che ogni elemento del DOM è stato caricato.

<!DOCTYPE html>
<html>
  <head>
    <title>Error Tutorial</title>
  </head>
  <body>
    <h1 id="content">Hello World!</h1>
    <script src="app.js"></script>
  </body>
</html>

Riepilogo

Gli errori sono una parte inevitabile dell’attività di uno sviluppatore. Se da un lato possono farvi esasperare durante la programmazione, dall’altro possono aiutarvi a imparare e padroneggiare meglio il linguaggio di programmazione che state utilizzando.

Quando vi trovate di fronte a un errore, dovete sempre cercare di capire il messaggio di errore perché vi aiuterà a capire da dove iniziare e cosa correggere. Potrete anche riuscire a risolvere altri errori con messaggi simili.

Se volete costruire un sito web, ci sono diverse competenze da imparare e molta pratica da fare per usarle in modo efficiente. DevKinsta semplifica il processo di progettazione, sviluppo e distribuzione, tutto nella tua macchina locale. DevKinsta è utilizzato da oltre 25.000 sviluppatori, web designer e freelance. Scopritelo gratuitamente oggi stesso.