# Sådan bruges JavaScripts .map()-metode

JavaScript-metoden `.map()` giver dig mulighed for at gennemgå hvert element i en matrix og udføre handlinger. Der oprettes en ny matrix til at gemme resultaterne, så den oprindelige matrix forbliver intakt.

## Hvad er JavaScript `.map()`?

JavaScripts `.map()` opretter en ny matrix ved at anvende en **callback-funktion** på hvert element i den oprindelige matrix. Metoden transformerer hver værdi fra den oprindelige matrix og gemmer resultatet i en separat matrix. JS `.map()` er ikke-muterende, hvilket betyder, at den oprindelige matrix forbliver uændret.

Metoden `.map()` bruges ofte til **at transformere alle elementerne i en matrix**. Den kan for eksempel kvadrere elementer, formatere tekst, filtrere objekter og foretage en række andre ændringer. Det gør `.map()` praktisk til at foretage ikke-destruktive ændringer af data, hvilket resulterer i ren, sammenhængende kode.

## Hvad er syntaksen for JavaScript `.map()`?

Syntaksen for JS `.map()` består af en callback-funktion på en array:

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

- **`originalArr`**: Den matrix, som `.map()` skal anvendes på
- **`element`**: Det aktuelle element, der behandles
- **`index (optional)`**: Indekset for det aktuelle element i arrayet
- **`array (optional)`**: Den oprindelige matrix

Lad os se på et eksempel.

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

Callback-funktionen, der indtastes som argument til `.map()`, tager hvert element fra den oprindelige matrix `number` og kvadrerer det. Vi får derefter en ny matrix med kvadraterne af hvert element fra den oprindelige matrix.

## Eksempler på JavaScripts `.map()`

JavaScripts `.map()` kan bruges til at udføre forskellige operationer på elementerne i en matrix. Her er nogle af de mest almindelige anvendelsesmuligheder.

### Filtrering af data

Hvis du kombinerer `.map()` med `.filter()`, får du en matrix, der kun indeholder værdier, der er sande for den valgte betingelse.

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

I dette eksempel indeholder arrayet `numbers` værdierne 1-5. Derefter anvender vi metoden `.filter()`. Filtreringsbetingelsen siger, at tallet modulo 2 skal være nul, hvilket kun er tilfældet for lige tal. Dette resulterer i en ny matrix, der kun indeholder elementer, der kan deles med 2, hvilket giver os matrixen `[2,4]`. Dernæst bruger vi metoden `.map()` til at fordoble hvert element i matrixen. Som resultat bliver `[2,4]` til `[4,8]`.

### Gengivelse af lister i JavaScript-biblioteker

React er et af de mest populære JavaScript-frameworks og -biblioteker, og `.map()`nyttigt til at gengive lister i det. Bemærk, at React bruger **JSX-syntaks**.

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

Ovenfor importerede vi modellerne `React` og `ReactDOM` og oprettede en matrix ved navn `colors` med forskellige farvenavne. Den **funktionelle React-komponent** `ColorList` bruger `.map()` til at oprette et `<li>` for hver farve. Attributten `key` muliggør effektive opdateringer med React. I det sidste trin gengives `ColorsList`i DOM med `ReactDOM.render`, og outputtet føjes til DOM-elementet med ID `root`.

### Formatering af elementer i en matrix

JavaScripts `.map()` er en enkel måde at formatere elementer som strenge på.

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

I dette eksempel kombinerer vi `.map()` med metoden `toLowerCase()` for at konvertere hvert navn til små bogstaver. Resultatet er en ny matrix kaldet `formattedNames`, som indeholder navnene med små bogstaver. Den oprindelige matrix `names` forbliver uændret.


This is a markdown version of: [https://www.ionos.com/da-dk/digitalguide/websteder/webudvikling/javascript-kort/](https://www.ionos.com/da-dk/digitalguide/websteder/webudvikling/javascript-kort/) for AI/LLM consumption.