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:

const newArr = originalArr.map(function(element, index, array) {
    // Code
});
javascript
  • 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.

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]
javascript

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.

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

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.

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);
javascript

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 ColorsListweergegeven 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.

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

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.

Ga naar hoofdmenu