Ga naar hoofdinhoud

Array.map()

De map functie stelt je in staat om elk item in een lijst (array) te pakken, er iets mee te doen, en de resultaten in een nieuwe lijst te stoppen. In plaats van een ouderwetse for-loop te schrijven waarbij je handmatig een nieuwe lijst moet bijhouden, doet map() al het zware werk voor je. Het houdt je code kort, leesbaar en "clean".

map-doubled.ts
let numbers: number[] = [1, 2, 3, 4, 5];
 
let doubled: number[] = numbers.map(
(element: number)
: number => element * 2);
numbers
1
2
3
4
5
doubled

De map functie wordt ook vaak gebruikt om een array van objecten om te zetten naar een array van 1 van zijn properties. Bijvoorbeeld als je een array van studenten hebt en je wil alleen een array van de namen van de studenten hebben:

map-students.ts
const students: Student[] = [
{ id: 0, name: "Andie" },
{ id: 1, name: "John" },
{ id: 2, name: "Jessie" },
];
 
let studentNames: string[] = students.map(
(student: Student)
: string => student.name);
students
{ id: 0, name: "Andie" }
{ id: 1, name: "John" }
{ id: 2, name: "Jessie" }
studentNames

Soms heb je aan alleen het item zelf niet genoeg en wil je ook weten op welke plek in de lijst je bent. De callback-functie van map() geeft je standaard een tweede parameter mee: de index.

De index is het rangnummer van het item waar je op dat moment bent, beginnend bij 0. Dit is bijvoorbeeld ideaal voor het nummeren van een lijst of wanneer je om de beurt een andere styling wilt toepassen.

const taken = ["Afwassen", "Stofzuigen", "Gras maaien"];

const genummerdeTaken = taken.map((taak, index) => {
  return `Taak ${index + 1}: ${taak}`;
});

console.log(genummerdeTaken.join("\n"));
// Output: ["Taak 1: Afwassen", "Taak 2: Stofzuigen", "Taak 3: Gras maaien"]
map-index.ts
const taken: string[] = ["Afwassen", "Stofzuigen", "Gras maaien"];
 
const genummerdeTaken: string[] = taken.map(
(taak: string, index: number)
: string => `Taak ${index + 1}: ${taak}`);
taken
0"Afwassen"
1"Stofzuigen"
2"Gras maaien"
genummerdeTaken

Test je kennis​

Quiz laden…