Itereren over een array

• For-loop
• For-of
• Foreach

For-loop

Een array kan doorlopen worden met een for lus:

const colors = ["red", "green", "blue"];
for (let i = 0; i < colors.length; i++) {
  const currentColor = colors[i];
  console.log(currentColor);
}

Een element kan binnen de lus opgevraagd worden door de index the specificeren bijv. const currentColor = colors[i];. De index van een geïndexeerde collectie begint altijd vanaf 0.

For-of

Het for…of statement creëert een lus die itereert over iterabele objects (zoals: Array, Map, Set …) en roept vervolgens een variabele aan met een waarde die kan verschillen bij iedere iteratie.

const colors = ["red", "green", "blue"];
for (let element of colors) {
  const currentColor = element;
  console.log(currentColor);
}

Hebben we de index van een element nodig binnenin een for...of lus, dan moeten we gebruik maken van de entries() (opens new window) methode uit een Array object.

const colors = ["red", "green", "blue"];
for (let [index, element] of colors.entries()) {
  const currentColor = element;
  console.log(`Index ${index} with color ${currentColor}`);
}

Foreach

Met de forEach() (opens new window) methode van een array kunnen we eveneens itereren over een array:

const colors = ["red", "green", "blue"];
color.forEach(function (currentColor) {
  console.log(currentColor);
});

We kunnen deze code nog korter schrijven door gebruik te maken van een arrow function:

const colors = ['red', 'green', 'blue'];
color.forEach((currentColor) => console.log(currentColor););

De functie als argument in de forEach methode wordt bij iedere iteratie uitgevoerd. Deze functie bevat zelf een argument, namelijk het huidige element uit de array. Niet-toegewezen (Eng. unassigned) waarden worden niet geïtereerd:

const colors = ['red', 'green', , 'blue'];
color.forEach((currentColor) => console.log(currentColor););
// red
// green
// blue

Opgelet

Gebruik de for…in-lus niet om te itereren over de elementen uit de array, want deze lus lijst ook alle eigenschappen op.