Wat is het verschil tussen de for...in en for...of lussen?

De for...in-lus door de sleutels (eigenschappen) van de enumerateerbare eigenschappen van een object, inclusief eigenschappen in de prototypeketen.

De for...of-lus doorloopt de waarden van iterabele objecten (Array, Map, Set, String, arguments, etc.). Het doorloopt niet de eigenschappen van het prototype.

	for...in	for...of
Itereert over	Sleutels (eigenschappen) van objecten	Waarden van iterabele objecten
Gebruikt met	Objecten	Arrays, strings, Map, Set en andere iterabele objecten
Prototype	Itereert over de eigenschappen van het prototype	Itereert niet over de eigenschappen van het prototype
Volgorde	Niet gegarandeerd voor niet-integer sleutels	Gegarandeerd voor arrays (op index)

Voorbeeld for...in:

const obj = { a: 1, b: 2 };
for (const key in obj) {
  console.log(key, obj[key]); // Toont: "a 1", "b 2"
}

Voorbeeld for...of:

const arr = [1, 2, 3];
for (const value of arr) {
  console.log(value); // Toont: 1, 2, 3
}

Over het algemeen is het beter om for...of te gebruiken voor het itereren over arrays en soortgelijke structuren, en for...in voor het itereren over de eigenschappen van objecten (vaak in combinatie met hasOwnProperty om prototype-eigenschappen uit te sluiten).