Les erreurs font partie intégrante de l’apprentissage et de l’utilisation de tout langage de programmation. Les messages d’erreur ont tendance à vous aider à comprendre ce qui a mal tourné quelque part dans votre code.

Si certains messages d’erreur sont directs et faciles à comprendre, d’autres peuvent être un peu déroutants lorsque vous les voyez.

Dans ce tutoriel, nous allons parler de l’une des erreurs JavaScript les plus courantes – l’erreur « uncaught typeerror : cannot read property ».

À la fin de ce tutoriel, vous devriez comprendre ce que signifie l’erreur « uncaught typeerror : cannot read property », ses causes courantes et comment la corriger.

Que signifie l’erreur « uncaught typeerror : cannot read property » en JavaScript ?

L’erreur « uncaught typeerror : cannot read property » se produit principalement lorsque vous essayez d’utiliser ou d’accéder à une variable undefined. Cette erreur peut être soulevée lorsque vous utilisez vanilla JavaScript ou tout autre framework JavaScript.

Vous pouvez facilement détecter les erreurs pendant le codage en utilisant divers outils de développement comme les outils de développement de Chrome et l’outil de staging en un clic de Kinsta pour intercepter les erreurs, tester votre code, etc.

Comment corriger l’erreur « uncaught typeerror : cannot read property » en JavaScript

Dans les sections qui suivent, nous allons mettre en évidence certaines des causes de l’erreur « uncaught typeerror : cannot read property » et comment les corriger à l’aide d’exemples de code.

Accès à la propriété d’un objet dont la valeur est indéfinie

Dans cette section, nous allons aborder l’une des causes possibles de l’erreur « uncaught typeerror : cannot read property » en JavaScript. Cela concerne l’accès à une propriété d’objet dont la valeur est encore indéfinie.

Voici un exemple :

let person;

Dans le code ci-dessus, nous avons créé une variable appelée person. L’intention est de faire de cette variable un objet avec des propriétés comme name, age, hobby.

En supposant que vous oubliez de créer ces propriétés, vous obtiendrez une erreur lorsque vous tenterez d’y accéder. C’est-à-dire :

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

Comme on peut le voir ci-dessus, nous avons essayé d’accéder à la propriété name qui n’existe pas, donc nous avons obtenu une erreur disant : Uncaught TypeError : Cannot read properties of undefined (reading ‘name’).

Cela peut arriver à n’importe qui, car vous pouvez oublier de créer/ajoutez des propriétés à votre objet.

Continuons et ajoutons quelques propriétés à l’objet pour corriger l’erreur :

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

Dans le code ci-dessus, nous avons ajouté la propriété name. Ainsi, lorsque vous essayez d’y accéder, vous obtiendrez la valeur de «John » en retour.

Accès à un élément qui n’existe pas dans un tableau

Comme nous l’avons vu dans la dernière section avec les objets, vous obtiendrez également l’erreur « uncaught typeerror : cannot read property » si vous essayez d’accéder à un élément dans un tableau qui n’a pas encore été initialisé.

Voici un exemple :

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

Dans l’exemple ci-dessus, nous avons essayé d’accéder au premier élément d’un tableau appelé arr.

Le tableau a été déclaré mais pas initialisé – cela signifie qu’aucun élément ne lui a encore été attribué.

Pour résoudre ce problème, nous allons ajouter des éléments au tableau avant d’y accéder. C’est-à-dire :

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

Accéder à un élément DOM qui n’existe pas

Lorsque vous travaillez avec le Document Object Model (DOM) en JavaScript, vous pouvez rencontrer le message « ncaught typeerror : cannot read property ».

Cela peut se produire pour différentes raisons, comme des erreurs d’orthographe lors de la référence à l’élément DOM, l’accès à un élément qui n’existe pas ou l’accès à un élément avant que le DOM n’ait été chargé (nous en parlerons dans la section suivante).

Dans cette section, vous verrez un exemple qui lance l’erreur « uncaught typeerror : cannot read property » pour avoir accédé à un élément DOM inexistant.

Voici le code HTML :

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

Dans le code ci-dessus, nous avons créé un document HTML de base avec un élément h1 dont l’ID est « content ».

Voici le code JavaScript :

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

Le code ci-dessus soulève l’erreur « uncaught typeerror : cannot read property » même s’il semble que nous ayons tout fait correctement.

Il est assez facile de ne pas voir ce qui provoque cette erreur. Elle est soulevée parce que nous avons épelé « constent » au lieu de « content » en faisant référence à l’ID de l’élément h1.

C’est-à-dire, document.getElementById("constent"); au lieu de document.getElementById("content");.

La même erreur se produira si vous essayez de référencer un ID ou un nom de classe qui n’a pas encore été créé dans le DOM.

Pour résoudre ce problème, vous pouvez simplement vérifier les fautes d’orthographe ou vous assurer que l’élément référencé existe réellement dans le DOM.

Placer l’élément de script au-dessus des autres éléments du DOM dans la balise Body

La position de votre élément script détermine la façon dont votre code JavaScript est exécuté dans le navigateur.

Si vous placez l’élément script au-dessus de tous les autres éléments du corps de votre document HTML, le code JavaScript sera exécuté avant que le DOM ne soit chargé.

Cela signifie que JavaScript n’aura aucune référence aux éléments du DOM car il n’a pas attendu qu’ils soient chargés pour s’exécuter.

Voici un exemple :

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

Dans le code ci-dessus, nous avons placé l’élément script au-dessus de l’élément h1.

Voici le code JavaScript dans lequel nous essayons de faire référence à l’élément h1 en utilisant son ID :

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

Comme prévu, l’erreur « uncaught typeerror : cannot read property » nous a été envoyée car le code JavaScript avant l’élément h1 a pu être enregistré dans le DOM.

Pour résoudre ce problème, placez toujours votre élément script avant la balise de fermeture body, c’est-à-dire sous tous les autres éléments du DOM dans le corps du document. De cette façon, le script commencera à s’exécuter après que chaque élément du DOM ait été chargé.

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

Résumé

Les erreurs sont une partie inévitable du métier de développeur. Si elles peuvent vous frustrer pendant le codage, elles peuvent aussi vous aider à apprendre davantage et à maitriser le langage de programmation que vous utilisez.

Lorsque vous êtes confronté à une erreur, vous devez toujours essayer de comprendre le message d’erreur car cela vous aidera à savoir par où commencer et ce qu’il faut réparer. Vous serez également en mesure de corriger d’autres erreurs présentant des messages d’erreur similaires.

Si vous voulez construire un site web, il y a une variété de compétences à apprendre et beaucoup de pratique nécessaire pour utiliser ces compétences efficacement. DevKinsta facilite le processus de conception, de développement et de déploiement, le tout dans votre machine locale. DevKinsta est utilisé par plus de 25.000 développeurs, concepteurs web et indépendants. Essayez-le gratuitement dès aujourd’hui.