# JavaScript .map()-Methode

Die JavaScript `.map()`-Methode gibt Ihnen die Möglichkeit, durch jedes Element in einem Array zu iterieren und bestimmte Aktionen auszuführen. Dabei bleibt das ursprüngliche Array erhalten.

## Was ist JavaScript .map()?

Die JavaScript `.map()`-Methode stellt ein neues Array her, indem sie eine **Callback-Funktion** auf jedes Element des ursprünglichen Arrays anwendet. Die Methode transformiert jeden Wert des Ausgangsarrays, wobei das Ergebnis in einem separaten Array gespeichert wird. Ein Schlüsselaspekt ist die Nichtveränderlichkeit, was bedeutet, dass das ursprüngliche Array unverändert bleibt.

Die `.map()`-Methode wird häufig für die **Transformation aller Elemente in einem Array** eingesetzt. Zum Beispiel kann es Elemente quadrieren, Texte formatieren, Objekte filtern oder eine Vielzahl anderer Anpassungen vornehmen. Dadurch ist `.map()` praktisch, wenn eine nichtdestruktive Veränderung der Daten gewünscht ist, und sorgt für sauberen, verständlichen Code.

## Das ist die Syntax von JavaScript .map()

Die Syntax der `.map()`-Methode besteht aus einem Funktionsaufruf (Callback-Function) auf einem Array:

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

- **`originalArr`**: Das Array, auf das die `.map()`-Methode angewendet wird
- **`element`**: Das aktuelle Element, das während der Iteration verarbeitet wird
- **`index (optional)`**: Der Index des aktuellen Elements im Array
- **`array (optional)`**: Das ursprüngliche Array

Schauen wir uns ein konkretes Beispiel an:

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

Die Callback-Funktion, die als Argument an JavaScript `.map()` übergeben wird, nimmt jedes Element des ursprünglichen Arrays `number` und quadriert es. Wir erhalten ein neues Array, das aus den Quadratzahlen der Elemente aus dem ursprünglichen Array besteht.

## Praktische Beispiele für `.map()`

Mit der JavaScript `.map()`-Methode lassen sich eine Vielzahl von Operationen auf Array-Elementen durchführen. Hier sind einige der häufigsten Szenarien:

### Filtern von Daten

Wenn Sie `.map()` mit der `.filter()`-Methode kombinieren, schaffen Sie ein Array, das nur die Werte enthält, für die die gegebene Bedingung wahr ist.

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

In diesem Beispiel besitzt das Array `numbers` die Werte von 1 bis 5. Anschließend wenden wir die `.filter()`-Methode an. Das Filterkriterium bestimmt, dass die Zahl modulo 2 gleich 0 sein muss, was für gerade Zahlen zutrifft. Das Ergebnis ist ein neues Array, welches nur die durch 2 teilbaren Elemente enthält. Das Zwischenergebnis ist also `[2, 4]`. Daraufhin nutzen wir die `.map()`-Methode auf das Array, um jedes Element zu verdoppeln. Als Endergebnis bekommen wir ein Array, dessen Elemente zweimal durch 2 geteilt werden können, also `[4, 8]`.

### Listen in JavaScript-Bibliotheken rendern

React zählt zu den beliebtesten JavaScript-Frameworks und -Bibliotheken. Die `.map()`-Funktion ist nützlich, um Listen in React darzustellen. Beachten Sie, dass React die **JSX-Syntax** verwendet.

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

Wir importieren die Module `React` und `ReactDOM` und erstellen ein Array namens `colors` mit verschiedenen Farbnamen. Die **funktionale React-Komponente** `ColorsList` nutzt die JavaScript `map`()-Methode, um für jede Farbe ein `<li>`-Element zu erzeugen. Das `key`-Attribut ermöglicht die effiziente Aktualisierung durch React. Abschließend wird die `ColorsList`-Komponente mit `ReactDOM.render` im DOM gerendert und die Ausgabe dem DOM-Element mit der ID `root` hinzugefügt.

### Elemente im Array formatieren

Die `.map()`-Methode ist eine einfache Möglichkeit, um Elemente wie Strings nach Belieben zu formatieren.

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

Hier kombinieren wir `.map()` mit der `toLowerCase()`-Methode, um jeden Namen in Kleinbuchstaben zu konvertieren. Das Ergebnis ist das neue Array `formattedNames`, das die Namen in Kleinbuchstaben enthält. Das ursprüngliche Array `names` bleibt unverändert.


This is a markdown version of: [https://www.ionos.com/de-ch/digitalguide/websites/web-entwicklung/javascript-map/](https://www.ionos.com/de-ch/digitalguide/websites/web-entwicklung/javascript-map/) for AI/LLM consumption.