Elemente auswählen: filter()

In den Lektionen über Schleifen und Objekte hast du viele Schleifen geschrieben, die ein Array durchlaufen: um einige seiner Elemente auszuwählen, ihre Namen zu sammeln oder eines davon zu finden. Programme brauchen das ständig, deshalb haben Arrays Methoden, die dir das abnehmen, jeweils in einer einzigen Zeile. Jede Methode in dieser Lektion ersetzt eine Schleife, die du schon schreiben kannst.

Hier ist eine Schleife, die die Temperaturen über 20 Grad auswählt:

const temperaturen = [18, 24, 27, 15, 21];

const warme = [];
for (const temperatur of temperaturen) {
    if (temperatur > 20) {
        warme.push(temperatur);
    }
}
console.log(warme);

[24, 27, 21]

Die Methode filter() macht dasselbe in einer Zeile:

const warme = temperaturen.filter((temperatur) => temperatur > 20);
console.log(warme);

[24, 27, 21]

Das Argument von filter() ist eine Funktion, hier die Pfeilfunktion (temperatur) => temperatur > 20. filter() ruft sie für jedes Element des Arrays einmal auf und übergibt ihr das Element als Argument. Wenn die Funktion true zurückgibt, kommt das Element in ein neues Array. Wenn sie false zurückgibt, wird das Element weggelassen. Die Funktion ist also die Bedingung aus dem if in der Schleife. Eine Funktion, die du einer anderen Funktion übergibst und die diese dann aufruft, heißt Callback.

filter() verändert das ursprüngliche Array nicht: temperaturen enthält weiterhin alle fünf Zahlen. Die Methode gibt ein neues Array zurück, das du in einer Variable speicherst. Wenn kein Element die Bedingung erfüllt, ist das neue Array leer: [].

Bei einem Array aus Objekten bekommt der Callback jeweils ein ganzes Objekt, genau wie die Schleifenvariable in for...of:

const tiere = [
    { name: "Ella", art: "Elefant", alter: 12 },
    { name: "Leo", art: "Löwe", alter: 6 },
    { name: "Gina", art: "Giraffe", alter: 4 },
    { name: "Pip", art: "Pinguin", alter: 2 }
];

const junge = tiere.filter((tier) => tier.alter < 5);
console.log(junge);
console.log("Junge Tiere:", junge.length);

[{ name: "Gina", art: "Giraffe", alter: 4 }, { name: "Pip", art: "Pinguin", alter: 2 }]
Junge Tiere: 2

Die Länge des neuen Arrays verrät dir, wie viele Elemente die Bedingung erfüllt haben. Das ist das Zählmuster aus der Lektion über Schleifen, in einer Zeile.

Typische Fehler:

• Das Ergebnis nicht benutzen. temperaturen.filter((temperatur) => temperatur > 20); in einer eigenen Zeile erstellt ein neues Array und wirft es weg, und temperaturen bleibt, wie es war. Speichere das Ergebnis in einer Variable oder gib es aus.
• Geschweifte Klammern ohne return, wie in der Lektion über Funktionen. (temperatur) => { temperatur > 20 } gibt undefined zurück, was als falsch gilt, also ist das neue Array immer leer.