# Hoe gebruik je de .map()-methode van JavaScript?

Met de JavaScript-methode `.map()` kunt u elk element in een array doorlopen en acties uitvoeren. Er wordt een nieuwe array aangemaakt om de resultaten op te slaan, waardoor de oorspronkelijke array intact blijft.

## Wat is JavaScript `.map()`?

De methode `.map()` van JavaScript maakt een nieuwe array door een **callback-functie** toe te passen op elk element van de oorspronkelijke array. De methode transformeert elke waarde uit de oorspronkelijke array en slaat het resultaat op in een aparte array. JS `.map()` is niet-mutatief, wat betekent dat de oorspronkelijke array ongewijzigd blijft.

`.map()` wordt vaak gebruikt om **alle elementen in een array te transformeren**. Zo kan deze methode bijvoorbeeld elementen kwadrateren, tekst opmaken, objecten filteren en allerlei andere wijzigingen aanbrengen. Dat maakt `.map()` praktisch voor het aanbrengen van niet-destructieve wijzigingen in gegevens, wat resulteert in schone, coherente code.

## Wat is de syntaxis voor JavaScript `.map()`?

De syntaxis voor JS `.map()` bestaat uit een callback-functie op een array:

```javascript
const newArr = originalArr.map(function(element, index, array) {
    // Code
});
```

- **`originalArr`**: De array waarop `.map()` zal worden toegepast
- **`element`**: Het huidige element dat wordt verwerkt
- **`index (optional)`**: De index van het huidige element in de array
- **`array (optional)`**: De oorspronkelijke array

Laten we eens naar een voorbeeld kijken.

```javascript
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(function(number) {
    return number * number;
});
console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]
```

De callback-functie die als argument voor `.map()` wordt ingevoerd, neemt elk element uit de oorspronkelijke array `number` en kwadrateert het. Vervolgens krijgen we een nieuwe array met de kwadraten van elk element uit de oorspronkelijke array.

## Voorbeelden van JavaScript `.map()`

JavaScript’s `.map()` kan worden gebruikt om verschillende bewerkingen uit te voeren op de elementen van een array. Hier zijn enkele van de meest voorkomende gebruikssituaties.

### Gegevens filteren

Als je `.map()` combineert met `.filter()`, krijg je een array die alleen waarden bevat die waar zijn voor de door jou gekozen voorwaarde.

```javascript
const numbers = [1, 2, 3, 4, 5];
const evenNumbersTimesTwo = numbers.filter(num => num % 2 === 0) .map(num => num * 2);
// Output: [4, 8]
```

In dit voorbeeld bevat de array `numbers` de waarden 1-5. Vervolgens passen we de methode `.filter()` toe. De filtervoorwaarde zegt dat het getal modulo 2 nul moet zijn, wat alleen geldt voor even getallen. Dit resulteert in een nieuwe array, die alleen elementen bevat die deelbaar zijn door 2, wat ons de array `[2,4]` oplevert. Vervolgens gebruiken we de methode `.map()` om elk element in de array te verdubbelen. Als gevolg daarvan wordt `[2,4]` `[4,8]`.

### Lijsten weergeven in JavaScript-bibliotheken

React is een van de populairste JavaScript-frameworks en -bibliotheken, en `.map()`handig voor het weergeven van lijsten daarin. Houd er rekening mee dat React **JSX-syntaxis** gebruikt.

```javascript
import React from "react";
import ReactDOM from "react-dom";
const colors = ["red", "green", "blue", "yellow", "orange"];
const ColorsList = () => (
    <div>
        <ul>{colors.map(color => <li key={color}> {color} </li>)}</ul>
    </div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<ColorsList />, rootElement);
```

Hierboven hebben we de modellen `React` en `ReactDOM` geïmporteerd en een array met de naam `colors` gemaakt met verschillende kleurnamen. De **React-functionele component** `ColorList` gebruikt `.map()` om voor elke kleur een `<li>` te maken. Het `key` maakt efficiënte updates met React mogelijk. In de laatste stap wordt de `ColorsList`weergegeven in DOM met `ReactDOM.render` en wordt de uitvoer toegevoegd aan het DOM-element met de ID `root`.

### Opmaakelementen van een array

De methode `.map()` van JavaScript is een eenvoudige manier om elementen zoals strings op te maken.

```javascript
const names = ["Alice", "Bob", "Charlie"];
const formattedNames = names.map(name => name.toLowerCase());
// Output: ["alice", "bob", "charlie"]
```

In dit voorbeeld combineren we `.map()` met de methode `toLowerCase()` om elke naam om te zetten naar kleine letters. Het resultaat is een nieuwe array met de naam `formattedNames`, die de namen in kleine letters bevat. De oorspronkelijke array `names` blijft ongewijzigd.


This is a markdown version of: [https://www.ionos.com/nl-be/digitalguide/websites/webontwikkeling/javascript-kaart/](https://www.ionos.com/nl-be/digitalguide/websites/webontwikkeling/javascript-kaart/) for AI/LLM consumption.