Zo los je de “uncaught typeerror: cannot read property” fout op in JavaScript

Fouten en errors zijn een cruciaal onderdeel van het leren en gebruiken van een programmeertaal. Ze helpen je te begrijpen wat er ergens in je code fout is gegaan.

Waar sommige foutmeldingen rechttoe rechtaan en gemakkelijk te begrijpen zijn, kunnen anderen voor verwarring zorgen als je ze tegenkomt.

In deze tutorial gaan we het hebben over een van de meest voorkomende JavaScript fouten – de “uncaught typeerror: cannot read property” fout.

Aan het eind van deze handleiding zou je moeten begrijpen wat de “uncaught typeerror: cannot read property” betekent, wat de meest voorkomende oorzaken zijn en hoe je hem kunt oplossen.

Wat betekent “uncaught typeerror: cannot read property” in JavaScript?

De “uncaught typeerror: cannot read property” fout treedt vooral op als je probeert een undefined variabele te gebruiken of op wil vragen. Deze fout kan optreden als je vanilla JavaScript of een ander Javascript framework gebruikt.

Je kunt overigens gemakkelijk fouten opsporen tijdens het coderen door developertools te gebruiken, zoals de Chrome dev tools, en de Kinsta one-click testtool om fouten te onderscheppen, je code te testen, en meer.

Zo los je de “uncaught typeerror: cannot read property” fout in JavaScript op

In de volgende paragrafen bespreken we enkele oorzaken van de “uncaught typeerror: cannot read property” fout en hoe je die kunt oplossen met behulp van codevoorbeelden.

Gebruiken van een object property met een ongedefinieerde waarde

In dit gedeelte bespreken we een van de mogelijke oorzaken van de “uncaught typeerror: cannot read property” fout in JavaScript. Dit heeft te maken met het gebruiken/opvragen van een object dat nog ongedefinieerd is.

Hier volgt een voorbeeld:

let person;

In bovenstaande code hebben we een variabele aangemaakt met de naam person. De bedoeling is om van deze variabele een object te maken met propertjes als name, age, hobby.

Stel dat je vergeet deze propertjes aan te maken, dan krijg je een foutmelding als je ze probeert te gebruiken. Namelijk:

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

Zoals hierboven te zien is, probeerden we de property name te gebruiken die niet bestaat, dus kregen we een fout die zei: Uncaught TypeError: Cannot read properties of undefined (reading ‘name’).

Dit kan iedereen overkomen, omdat je wel eens kunt vergeten properties aan je object toe te voegen.

Laten we verder gaan en een paar properties aan het object toevoegen om de fout op te lossen:

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

In bovenstaande code hebben we de property name toegevoegd, zodat wanneer je die probeert te openen, je de waarde “John” terugkrijgt.

Gebruiken van een element dat niet bestaat in een array

Net zoals we in de vorige paragraaf zagen met objecten, krijg je ook de “uncaught typeerror: cannot read property” foutmelding als je een element in een array probeert te gebruiken dat nog geïnitialiseerd moet worden.

Hier is een voorbeeld:

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

In het bovenstaande voorbeeld probeerden we toegang te krijgen tot het eerste element van een array genaamd arr.

De array is gedeclareerd maar niet geïnitialiseerd – dit betekent dat er nog geen element aan is toegekend.

Om dit op te lossen voegen we elementen toe aan de array voordat we ze willen opvragen. Dat wil zeggen:

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

Gebruiken van een DOM element dat niet bestaat

Bij het werken met het Document Object Model (DOM) in JavaScript kun je de “uncaught typeerror: cannot read property” tegenkomen.

Dit kan om verschillende redenen gebeuren, zoals spelfouten bij het verwijzen naar het DOM element, gebruik van een element dat niet bestaat, of gebruik van een element voordat het DOM is geladen (we zullen het hierover hebben in de volgende paragraaf).

In deze paragraaf zul je een voorbeeld zien dat de “uncaught typeerror: cannot read property” foutmelding geeft bij het opvragen van een niet bestaand DOM element.

Hier is de HTML code:

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

In bovenstaande code hebben we een basic HTML document gemaakt met een h1 element met een ID van “content”.

Hier is de JavaScript code:

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

Bovenstaande code geeft de foutmelding “uncaught typeerror: cannot read property”, ook al lijkt het alsof we alles goed hebben gedaan.

Het is vrij eenvoudig om te missen wat deze foutmelding veroorzaakt. De fout wordt veroorzaakt doordat we “constent” hebben gespeld in plaats van “content” bij de verwijzing naar het ID van het h1 element.

Dat wil zeggen, document.getElementById("constent"); in plaats van document.getElementById("content");.

Dezelfde fout zal optreden als je probeert te verwijzen naar een ID of class-naam die nog moet worden aangemaakt in het DOM.

Om dit op te lossen moet je simpelweg controleren op spelfouten of je ervan verzekeren dat het element waarnaar verwezen wordt ook echt bestaat in het DOM.

Plaatsing van het script element boven andere DOM elementen binnen de body tag

De positie van je script element bepaalt hoe je JavaScript code in de browser wordt uitgevoerd.

Als je het script element boven elk ander element in de body van je HTML document plaatst, wordt de JavaScript code uitgevoerd voordat de DOM is geladen.

Dit betekent dat JavaScript geen verwijzing heeft naar de DOM elementen omdat het niet gewacht heeft tot ze geladen waren voor het uitvoeren.

Hier is een voorbeeld:

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

In bovenstaande code hebben we het script element boven het h1 element geplaatst.

Hier is de JavaScript code waarin we proberen te verwijzen naar het h1 element door zijn ID te gebruiken:

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

Zoals verwacht werd de “uncaught typeerror: cannot read property” fout aan ons gegeven omdat de JavaScript code voordat het h1 element kon worden geregistreerd in het DOM.

Om dit probleem op te lossen, plaats je altijd je script element vóór de afsluitende body tag; dat wil zeggen, onder elk ander DOM element in de body van het document. Op deze manier begint het script te lopen nadat elk element in het DOM is geladen.

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

Samenvatting

Fouten zijn een onvermijdelijk onderdeel in het leven van een developer. Hoewel ze je gefrustreerd kunnen maken tijdens het coderen, kunnen ze je ook helpen meer te leren en de programmeertaal die je gebruikt beter onder de knie te krijgen.

Als je met een fout te maken krijgt, moet je altijd proberen de foutmelding te begrijpen, omdat je dan weet waar je moet beginnen en wat je moet repareren. Je zult dan ook andere fouten met soortgelijke foutmeldingen kunnen oplossen.

Als je een website gaat bouwen, zijn er allerlei vaardigheden te leren en is er veel oefening nodig om deze vaardigheden efficiënt te gebruiken. DevKinsta maakt het proces gemakkelijker: van ontwerp, ontwikkeling en deployment – allemaal in je lokale machine. DevKinsta wordt gebruikt door meer dan 25.000 developers, webdesigners en freelancers. Neem vandaag nog een kijkje en gebruik het gratis.