Fout meldingen

Wat kan er allemaal fout gaan?

Veel studenten lopen tegen foutmeldingen aan die ze nog niet kunnen plaatsen. Vaak zijn de foutmeldingen ook in het Engels en daarom nog wat moelijker te begrijpen. Om je een beetje op weg te helpen tonen we hier een aantal van de meest voorkomende foutmeldingen.

De foutmelding lezen

Een foutmelding in JavaScript bestaat uit een aantal onderdelen. Een foutmelding, een bericht en in welk bestand/ locatie de fout gebeurt inclusief de regel en de tekstpositie.

Het eerste deel tot aan de : geeft de foutmelding aan. (Uncaught TypeError)
Het tweede deel (tot aan het woordje at) geeft het bericht wat er fout is. (Cannot read ..)
Het derde deel geeft aan waar:
 <anonymous> Het bestand, in dit geval is het in de console geschreven en anoniem.
:1:5 het staat in regel 1 op positie 5

Tip van flip:

Bij een foutmelding in de HTML-CSS-JS Fiddle omgeving van MBO-SD wordt de regel en de positie in het Nederlands los vermeld!

Lees goed en let op consistentie!

Veel foutcodes in JavaScript zijn "domme" fouten. Doordat je niet goed leest of inconsistent in je code bent.
let myArrayName = [1,2,3,4,5]; console.log(myarrayname);
Bovenstaande werkt niet omdat je eerst netjes camelCase schrijft en daarna alles in kleine letters zet.

Uncaught SyntaxError

Dit is een van de meest voorkomende foutmeldingen en ook meteen een van de lastigste. Lees goed en kijk wat er bedoeld wordt. Het betekend dat de syntax van je code niet goed is (m.a.w. er mist iets of je hebt iets onlogisch gedaan.

:: Invalid or unexpected token

console.log('Hello world);

:: missing [iets] after argument list

De iets geeft aan wat er gemist wordt, bijvoorbeeld een ronde haak )

console.log('Hello world';

:: Unexpected token [iets]

Een unexpected token gaat over { } [ ] tekens. In dit geval kan het zijn dat de fout niet in de regel zit die aangegeven wordt, maar daarvoor.

if (1==1)
    console.log(1);
}

Uncaught TypeError

Dit is de meest voorkomende fout en kan verschillende oorzaken hebben. Het hangt af van het bericht wat er na de Uncaught TypeError: staat. Zie hier onder voor de mogelijkheden.

:: Cannot read property

Dit komt omdat een onderdeel van bijvoorbeeld een array of een object niet gelezen kan worden, het bestaat simpel weg niet.

:: Undefined is not an object.

Je probeert een waarde op te halen van een Array of een Object maar je variabele is geen Array of Object.

const myArray = undefined;
if (myArray.length === 0) {
  console.log('Mijn array is leeg');
}

:: null is not an object.

Het zelfde als de vorige, maar je variabele is niet undefined maar null

const myArray = null;
if (myArray.length === 0) {
  console.log('Mijn array is leeg');
}

:: [iets] is not a function.

Je moet [iets] vervangen door een object met functie (zie het voorbeeld). Dit geeft aan dat de gekozen functie niet gekoppeld is in jouw object.

const myObject = {name: 'Henk'};
myObj.myFunction()

Uncaught ReferenceError: [iets] is not defined.

Als je een variabele probeert te gebruiken die niet bestaat

const myVar = 12345;
console.log(myOtherVar);