Elemente umwandeln: map()

Eine weitere Schleife, die du gut kennst, durchläuft ein Array und macht aus jedem Element etwas Neues. Diese hier erstellt ein Array mit den Namen der Zootiere aus der vorigen Übung:

const namen = [];
for (const tier of tiere) {
    namen.push(tier.name);
}
console.log(namen);

["Ella", "Leo", "Gina", "Pip"]

Dafür gibt es die Methode map():

const namen = tiere.map((tier) => tier.name);
console.log(namen);

["Ella", "Leo", "Gina", "Pip"]

Auch map() ruft den Callback für jedes Element auf, und was der Callback zurückgibt, kommt in der gleichen Reihenfolge in das neue Array. Das neue Array hat also immer genauso viele Elemente wie das ursprüngliche. Der Callback kann alles zurückgeben: eine Eigenschaft, eine Berechnung oder einen Text.

const alter = tiere.map((tier) => tier.alter);
const alterImNaechstenJahr = alter.map((jahre) => jahre + 1);
const etiketten = tiere.map((tier) => `${tier.name} (${tier.art})`);

console.log(alterImNaechstenJahr);
console.log(etiketten);

[13, 7, 5, 3]
["Ella (Elefant)", "Leo (Löwe)", "Gina (Giraffe)", "Pip (Pinguin)"]

Wie filter() verändert auch map() das ursprüngliche Array nicht: alter ist weiterhin [12, 6, 4, 2].

In vielen Programmen siehst du außerdem die Methode forEach(). Sie ruft den Callback ebenfalls für jedes Element auf, erstellt aber kein neues Array. Sie ist nur eine andere Art, eine for...of-Schleife zu schreiben:

tiere.forEach((tier) => console.log(tier.name));

Ella
Leo
Gina
Pip

Das tut dasselbe wie for (const tier of tiere) { console.log(tier.name); }, benutze also, was dir besser gefällt. Wenn du ein neues Array brauchst, benutze map().

Ein typischer Fehler ist ein Callback mit geschweiften Klammern, aber ohne return. tiere.map((tier) => { tier.name; }) ergibt [undefined, undefined, undefined, undefined], weil der Callback für kein Tier etwas zurückgibt.