Hoe gebruik je de .map()-methode van Ja­vaScript?

Met de Ja­vaScript-methode .map() kunt u elk element in een array doorlopen en acties uitvoeren. Er wordt een nieuwe array aan­ge­maakt om de re­sul­ta­ten op te slaan, waardoor de oor­spron­ke­lij­ke array intact blijft.

Wat is Ja­vaScript .map()?

De methode .map() van Ja­vaScript maakt een nieuwe array door een callback-functie toe te passen op elk element van de oor­spron­ke­lij­ke array. De methode trans­for­meert elke waarde uit de oor­spron­ke­lij­ke array en slaat het resultaat op in een aparte array. JS .map() is niet-mutatief, wat betekent dat de oor­spron­ke­lij­ke array on­ge­wij­zigd blijft.

.map() wordt vaak gebruikt om alle elementen in een array te trans­for­me­ren. Zo kan deze methode bij­voor­beeld elementen kwa­dra­te­ren, tekst opmaken, objecten filteren en allerlei andere wij­zi­gin­gen aan­bren­gen. Dat maakt .map() praktisch voor het aan­bren­gen van niet-de­struc­tie­ve wij­zi­gin­gen in gegevens, wat re­sul­teert in schone, coherente code.

Wat is de syntaxis voor Ja­vaScript .map()?

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

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 oor­spron­ke­lij­ke 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]

De callback-functie die als argument voor .map() wordt ingevoerd, neemt elk element uit de oor­spron­ke­lij­ke array number en kwa­dra­teert het. Ver­vol­gens krijgen we een nieuwe array met de kwadraten van elk element uit de oor­spron­ke­lij­ke array.

Voor­beel­den van Ja­vaScript .map()

Ja­vaScript’s .map() kan worden gebruikt om ver­schil­len­de be­wer­kin­gen uit te voeren op de elementen van een array. Hier zijn enkele van de meest voor­ko­men­de ge­bruiks­si­tu­a­ties.

Gegevens filteren

Als je .map() com­bi­neert met .filter(), krijg je een array die alleen waarden bevat die waar zijn voor de door jou gekozen voor­waar­de.

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. Ver­vol­gens passen we de methode .filter() toe. De fil­ter­voor­waar­de zegt dat het getal modulo 2 nul moet zijn, wat alleen geldt voor even getallen. Dit re­sul­teert in een nieuwe array, die alleen elementen bevat die deelbaar zijn door 2, wat ons de array [2,4] oplevert. Ver­vol­gens gebruiken we de methode .map() om elk element in de array te ver­dub­be­len. Als gevolg daarvan wordt [2,4] [4,8].

Lijsten weergeven in Ja­vaScript-bi­bli­o­the­ken

React is een van de po­pu­lair­ste Ja­vaScript-fra­me­works en -bi­bli­o­the­ken, 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);

Hierboven hebben we de modellen React en ReactDOM ge­ïm­por­teerd en een array met de naam colors gemaakt met ver­schil­len­de kleur­na­men. De React-func­ti­o­ne­le component ColorList gebruikt .map() om voor elke kleur een <li> te maken. Het key maakt ef­fi­ci­ën­te updates met React mogelijk. In de laatste stap wordt de ColorsListweer­ge­ge­ven in DOM met ReactDOM.render en wordt de uitvoer toe­ge­voegd aan het DOM-element met de ID root.

Op­maak­ele­men­ten van een array

De methode .map() van Ja­vaScript is een een­vou­di­ge manier om elementen zoals strings op te maken.

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

In dit voorbeeld com­bi­ne­ren 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 oor­spron­ke­lij­ke array names blijft on­ge­wij­zigd.