Ja­va­Script .map()-Methode

Die Ja­va­Script-Methode .map() erlaubt es dir, jedes Element eines Arrays zu durch­lau­fen und gezielte Aktionen aus­zu­füh­ren. Das Beste daran: Dein ur­sprüng­li­ches Array bleibt dabei voll­kom­men un­ver­än­dert.

Was steckt hinter Ja­va­Script .map()?

Mit der Ja­va­Script-Methode .map() erzeugst du ein frisches Array, indem du eine Callback-Funktion auf jedes einzelne Element des Aus­gangs­ar­rays anwendest. Die Methode wandelt jeden Wert um und speichert das Resultat in einem neuen Array ab. Ein we­sent­li­cher Vorteil ist die Im­mu­ta­bi­li­ty (Un­ver­än­der­lich­keit) – dein Original-Array wird also nicht an­ge­tas­tet.

Häufig wird .map() genutzt, um sämtliche Elemente innerhalb eines Arrays zu trans­for­mie­ren. Ob du Zahlen qua­drie­ren, Texte neu for­ma­tie­ren oder Objekte anpassen möchtest: .map() ist die ideale Wahl für sauberen, wartbaren Code ohne de­struk­ti­ve Da­ten­än­de­run­gen.

Die Syntax von Ja­va­Script .map() im Überblick

Die Anwendung der .map()-Methode erfolgt über einen Funk­ti­ons­auf­ruf (Callback) direkt auf einem Array:

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

• originalArr: Das Array, das du mit .map() be­ar­bei­ten möchtest
• element: Das Element, das im aktuellen Durchlauf an der Reihe ist
• index (optional): Die Position (Index) des aktuellen Elements
• array (optional): Das Quell-Array in seiner Ge­samt­heit

Hier ein prak­ti­sches Beispiel zur Ver­an­schau­li­chung:

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]

Die Callback-Funktion, die wir an .map() übergeben, schnappt sich jeden Wert aus number und quadriert ihn. Am Ende halten wir ein neues Array in Händen, das aus­schließ­lich die be­rech­ne­ten Qua­drat­zah­len enthält.

Ein­satz­mög­lich­kei­ten für .map()

Dank .map() stehen dir viele Wege offen, Array-Daten effizient zu ver­ar­bei­ten. Das sind die typischen An­wen­dungs­fäl­le:

Daten präzise filtern

Kom­bi­nierst du .map() mit der .filter()-Methode, erstellst du im Hand­um­dre­hen ein Array, das nur noch jene Werte enthält, die deine Kriterien erfüllen.

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

In diesem Szenario fangen wir mit dem Array numbers (Werte 1 bis 5) an. Zuerst nutzen wir .filter(), um nur gerade Zahlen (Modulo 2 gleich 0) her­aus­zu­fil­tern. Das ergibt das Zwi­schen­er­geb­nis [2, 4]. Danach kommt .map() ins Spiel, um jeden dieser Werte zu ver­dop­peln. Das finale Resultat ist ein Array mit den Werten [4, 8].

Listen in Frame­works ausgeben

React gehört zu den ge­frag­tes­ten Ja­va­Script-Bi­blio­the­ken am Markt. Hier ist .map() der Stan­dard­weg, um Listen mittels JSX-Syntax dar­zu­stel­len.

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

Nach dem Import von React und ReactDOM de­fi­nie­ren wir das Array colors. Die Kom­po­nen­te ColorsList nutzt map(), um für jeden Eintrag ein passendes <li>-Element zu ge­ne­rie­ren. Über das key-Attribut weiß React genau, welche Teile ak­tua­li­siert werden müssen. Zum Schluss rendert ColorsList das Ganze via ReactDOM.render direkt in das DOM-Element mit der ID root.

Array-Elemente schnell for­ma­tie­ren

Wenn du zum Beispiel Strings ein­heit­lich anpassen willst, ist .map() ein extrem hilf­rei­ches Werkzeug.

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

Wir ver­knüp­fen .map() mit toLowerCase(), damit alle Namen kon­se­quent in Klein­schrei­bung um­ge­wan­delt werden. Du erhältst das neue Array formattedNames, während die ur­sprüng­li­chen Daten in names glück­li­cher­wei­se unberührt bleiben.