# Fouten lezen

Je hebt verschillende soorten foutmeldingen in Javascript, hier vinden jullie een overzichtje van enkele soorten en veel voorkomende foutmeldingen.

TypeError
SyntaxError
ReferenceError
RangeError
NetworkError

# TypeError

TypeError

Probleem met het type van de waarde of variabele.

TypeError: Cannot read property 'yourProperty' of undefined

Dit treedt op wanneer je probeert een eigenschap te lezen van een ongedefinieerde variabele of null.
```
const testArray = undefined;

if (testArray.length) {
  console.log("There are items in your array!");
}

console.log(nogEenNietBestaandObject.name);
```
1
2
3
4
5
6
7
Als je zeker bent dat je dit object toch aanmaakt en geen schrijffouten hebt gemaakt ligt de oorzaak meer dan waarschijnlijk bij de initialisatie.

Safari

TypeError: ‘undefined’ is not an object (evaluating yourArray.yourProperty)

Dezelfde oorzaak dan bovenstaande error maar dan in Safari. Browsers kiezen namelijk zelf welke message ze toevoegen aan hun foutmeldingen.
TypeError: null is not an object (evaluating yourArray.yourProperty)

Opnieuw een Safari specifieke foutmelding, is gelijkaardig met de bovenstaande foutmeldingen maar hier is het object niet undefined maar null.
```
const testArray = null;

if (testArray.length) {
  console.log("There are items in your array!");
}
```
1
2
3
4
5
Dit zou bijvoorbeeld kunnen voorkomen wanneer je de javascript zal initialiseren wanneer de DOM nog niet geladen is, en je hier een element wil aanspreken.

TypeError: X is not a function.

const x = 42;
x(); // 42 is geen functie

1
2

TypeError: ‘undefined’ is not a function Dit wil zeggen dat je functie niet bestaat. Meer dan waarschijnlijk ligt de fout in de scope van je functie.
```
function clearBoard() {
  alert("Cleared");
}

document.addEventListener("click", function () {
  window.clearBoard();
});
```
1
2
3
4
5
6
7
TypeError: X is not iterable

Dit geeft aan dat je probeert te itereren over iets dat niet iterabel is.
```
const notIterable = 42;
for (const item of notIterable) {
  console.log(item);
}
```
1
2
3
4
TypeError: Cannot read property ‘length’ Deze foutmelding spreekt voor zich, je probeert de property length aan te spreken voor een niet-bestaande variabele. Dit kan bijvoorbeeld wanneer je als argument van een functie dezelfde naam gebruikt als de variabele.
```
var testArray = ["Test"];

function testFunction(testArray) {
  for (var i = 0; i < testArray.length; i++) {
    console.log(testArray[i]);
  }
}

testFunction();
```
1
2
3
4
5
6
7
8
9
Je kan dit oplossen door geen parameter te definiëren en testArray als globale variable te gebruiken. Of door testArray mee te geven als argument aan de functie.
Uncaught TypeError: Cannot set property 'yourValue' of undefined Je zal deze foutmelding krijgen wanneer je een property wil zetten van een niet bestaande/undefined variabele.
```
const test = undefined;
test.value = "Test";
```
1
2

TypeError: Cannot set property 'X' of null:

const obj = null;
obj.property = "value"; // Kan geen eigenschap instellen op 'null'

1
2

# SyntaxError

SyntaxError

Fout in de syntaxis van de code.

SyntaxError: Unexpected token 'X'

for (let i = 0; i < 5,; ++i) {
console.log(i);
}
// Uncaught SyntaxError: expected expression, got ';'

1
2
3
4

Expected ( of Missing ( Dit wilt meestal zeggen dat je een haakje bent vergeten.

function example() {
  console.log('Hello, world';
  }
  // Expected ( at the end of the console.log line

1
2
3
4

# ReferenceError

ReferenceError

Ongedefinieerde variabele of object.

Uncaught ReferenceError: 'yourEvent' is not defined Deze foutmelding wil zeggen dat je een variabele zal aanspreken die niet in jouw scope zit.

console.log(variable); // ReferenceError: variable is not defined

function testFunction() {
  const test = "Test";
}

console.log(test);

1
2
3
4
5

# RangeError

RangeError

Numerieke waarde buiten het toegestane bereik.

Uncaught RangeError: Maximum call stack size exceeded Deze foutmelding zal je krijgen wanneer je een recursieve functie aanspreekt die nooit lijkt te eindigen.

function infiniteRecursion() {
  infiniteRecursion();
}
infiniteRecursion();

1
2
3
4

const arr = newArray(1);

function recurse(a) {
  a[0] = new Array(1);
  recurse(a[0]);
}

recurse(arr);

1
2
3
4
5
6
7
8

Het kan zich ook voordoen wanneer je een ‘out of range’ getal meegeeft aan bepaalde functies.

// Number.toExponential(digits) and Number.toFixed(digits) accept digits from 0 to 100, and Number.toPrecision(digits) accepts digits from 1 to 100.

var a = new Array(4294967295); //OK
var b = new Array(-1); //range error

var num = 2.555555;
document.writeln(num.toExponential(4)); //OK
document.writeln(num.toExponential(-2)); //range error!

num = 2.9999;
document.writeln(num.toFixed(2)); //OK
document.writeln(num.toFixed(105)); //range error!

num = 2.3456;
document.writeln(num.toPrecision(1)); //OK
document.writeln(num.toPrecision(0)); //range error!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# NetworkError

NetworkError

Problemen met netwerkoperaties, zoals het ophalen van bronnen van een server.

NetworkError: Failed to fetch

fetch("https://nonexistent-url.com")
  .then((response) => response.json())
  .catch((error) => console.error(error));

1
2
3

(unknown): Script error Dit heeft te maken met het inladen van externe bestanden of stukjes code. Stel dat je jouw JavaScript host op een CDN en je gaat daar een exception throwen dan zal je in plaats van betekenisvolle informatie over je error zelf deze Script error foutmelding krijgen. Dit is een beveiligingsmaatregel van de browsers, browsers laten niet alle communicatie toe tussen twee verschillende domeinen.

Zie ook

CORS (opens new window)

Introductie Maken