Hoe .map() te gebruiken in JavaScript

JavaScript ondersteunt verschillende methoden om over arrays te itereren. Ontwikkelaars gebruiken vaak de traditionele for-lus en de minder gebruikelijke .forEach()-methode. De populairste methode is echter .map(). Deze methode maakt een nieuwe array door een functie aan te roepen voor elk element van de oorspronkelijke array. Het voorkomt mutaties en genereert echt “schone” arrays.

Dit verschilt van op mutatie gebaseerde methoden, die de originele array op een bepaalde manier wijzigen. In dit artikel bekijken we vier manieren om .map() in JavaScript te gebruiken (hoewel er veel meer bestaan).

Methode 1: Functies aanroepen op afzonderlijke array-elementen

Bij het gebruik van .map() in JavaScript wordt de callbackfunctie behandeld als een argument. De waarde van het array-element op het moment van uitvoering wordt een verplicht parameter van deze functie. Je kunt het gebruiken om waarden te wijzigen of functies te creëren.

Voorbeeld:

const sweetArray = [6, 7, 11, 13, 20];
const sweeterArray = sweetArray.map(sweetItem => {
    return sweetItem * 2;
});
console.log(sweeterArray);

Uitvoer:

[12, 14, 22, 26, 40]

Je kunt de code opschonen en vereenvoudigen:

const makeSweeter = sweetItem => sweetItem * 2;
const sweetArray = [6, 7, 11, 13, 20];
const sweeterArray = sweetArray.map(makeSweeter);
console.log(sweeterArray);

Uitvoer:

[12, 14, 22, 26, 40]

Het gebruik van sweetArray.map(makeSweeter) maakt de code leesbaarder in vergelijking met de eerste versie.

Methode 2: Strings omzetten in arrays

Je kunt de .map()-methode van het Array-prototype gebruiken om strings om te zetten. In plaats van rechtstreeks met arrays te werken, gebruiken we .call() om .map() toe te passen op een string. Houd er rekening mee dat strings in JavaScript behandeld kunnen worden als arrays van karakters, waardoor toegang tot bepaalde arraymethoden mogelijk is.

Voorbeeld:

const name = "Hostman";
const map = Array.prototype.map;
const newName = map.call(name, eachLetter => {
    return `${eachLetter}e`;
});
console.log(newName);

Uitvoer:

["He", "oe", "se", "te", "me", "ae", "ne"]

In dit voorbeeld wordt .map() gebruikt om elk teken in de string te transformeren door een “e” toe te voegen. Dit werkt vergelijkbaar met .split() en andere methoden die op tekens in een string werken voordat ze weer in een array worden omgezet.

Methode 3: Lijsten renderen in JavaScript-bibliotheken

Dit gebruik komt vaak voor in JavaScript-frameworks zoals React. Hier heb je de JSX-syntaxis nodig, omdat .map() hierin wordt gebruikt. Bijvoorbeeld:

import React from "react";
import ReactDOM from "react-dom";

const names = ["cloud", "dbaas", "vps", "storage", "kubernetes"];

const NamesList = () => (
  <div>
    <ul>{names.map(name => <li key={name}>{name}</li>)}</ul>
  </div>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<NamesList />, rootElement);

In dit voorbeeld rendert de React-component een <div> met een lijst. De JavaScript .map()-methode wordt gebruikt om over de array van namen te itereren en afzonderlijke lijstitems te genereren. De rendering wordt afgehandeld door ReactDOM.render op een DOM-element met de ID root.

Methode 4: Array-objectformaten transformeren

Een ander gebruik van .map() in JavaScript is het transformeren van elk object in een array en het retourneren van een nieuwe array met gewijzigde objecten. Dit werkt vergelijkbaar met traditionele gegevensverwerking.

Voorbeeld:

const myUsers = [
    { name: 'cloud', likes: 'scalability' },
    { name: 'devops', likes: 'automation' },
    { name: 'kube', likes: 'orchestration' }
];
const usersByLikes = myUsers.map(item => {
    const container = {};
    container[item.name] = item.likes;
    container.popularity = item.name.length * 12;
    return container;
});
console.log(usersByLikes);

Uitvoer:

[
  { cloud: 'scalability', popularity: 60 },
  { devops: 'automation', popularity: 72 },
  { kube: 'orchestration', popularity: 48 }
]

In dit voorbeeld wordt elk object in de array aangepast met behulp van bracketnotatie en objecteigenschaptoewijzingen. Deze aanpak is handig voor het transformeren en comprimeren van inkomende gegevens voordat ze worden gebruikt in client-side applicaties.

Conclusie

We hebben vier hoofdmanieren besproken om de .map()-methode in JavaScript te gebruiken. Je kunt de mogelijkheden uitbreiden door deze te combineren met andere methoden. Raadpleeg de officiële documentatie voor meer gedetailleerde informatie.