map, filter og find

En funktion som ingrediens#

De her metoder gør noget, der virker mærkeligt første gang: du giver en funktion med som argument. Metoden kalder så din funktion én gang for hvert element.

const tal = [1, 2, 3, 4];

const fordoblet = tal.map(function (t) {
return t * 2;
});

console.log(fordoblet);
console.log(tal);

Tryk på “Kør koden”.

Læg mærke til, at det oprindelige array er uændret. map laver et nyt array. Det er en pointe, der går igen: de her metoder ændrer ikke listen, de laver en ny.

Med en arrow function bliver det kortere, og det er den form, du vil se overalt:

const tal = [1, 2, 3, 4];

console.log(tal.map((t) => t * 2));

Tryk på “Kør koden”.

Når en arrow function kun består af ét udtryk, kan du droppe krølleparenteserne og return. Værdien bliver returneret automatisk.

map: lav hvert element om#

map giver altid et array af samme længde som det oprindelige.

const studerende = [
{ navn: "Ida", karakter: 10 },
{ navn: "Omar", karakter: 7 },
{ navn: "Sofie", karakter: 4 }
];

const navne = studerende.map((s) => s.navn);
console.log(navne);

Tryk på “Kør koden”.

Det er den typiske måde at trække ét felt ud af en liste objekter, for eksempel lige inden data skal vises på en side.

filter: behold nogle af dem#

filter giver et array, der er kortere eller lige så langt. Din funktion skal returnere true for dem, der skal med.

const studerende = [
{ navn: "Ida", karakter: 10 },
{ navn: "Omar", karakter: 7 },
{ navn: "Sofie", karakter: 4 }
];

const bedste = studerende.filter((s) => s.karakter >= 7);
console.log(bedste.map((s) => s.navn));

Tryk på “Kør koden”.

De to kan altså sættes sammen: først filtrér, så map. Det læses fra venstre mod højre som en sætning: “tag dem med karakter over 7, og giv mig deres navne”.

find: kun den første#

const studerende = [
{ navn: "Ida", karakter: 10 },
{ navn: "Omar", karakter: 7 }
];

const fundet = studerende.find((s) => s.navn === "Omar");
console.log(fundet);

const ikkeFundet = studerende.find((s) => s.navn === "Karl");
console.log(ikkeFundet);

Tryk på “Kør koden”.

Finder den ingen, får du undefined. Derfor ser du så ofte et tjek lige efter: if (fundet) { … }.

reduce: læg det hele sammen til én værdi#

reduce er den sværeste af dem, og den, der oftest bliver spurgt til. Den samler hele listen til én værdi.

const priser = [120, 45, 300];

const total = priser.reduce((sum, pris) => sum + pris, 0);
console.log(total);

Tryk på “Kør koden”.

sum er det, der er samlet indtil nu, pris er det aktuelle element, og 0 til sidst er startværdien. Første gennemløb er sum altså 0 og pris 120.

Hvornår vælger du hvad?#

Alt det her kan også skrives med en almindelig for-løkke, og i starten er det helt fint at gøre det. Metoderne er kortere at læse, når man er vant til dem, og de fortæller læseren, hvad hensigten er, i stedet for bare hvordan det gøres.

Kort opsamling#

• Alle tre tager en funktion, der kaldes for hvert element.
• map giver samme længde, filter kortere, find ét element eller undefined.
• Ingen af dem ændrer det oprindelige array.
• forEach giver ingen værdi tilbage.