# Hvordan bruke JavaScripts .map()-metode

JavaScript-metoden `.map()` lar deg gjenta hvert element i en matrise og utføre handlinger. En ny matrise opprettes for å lagre resultatene, slik at den opprinnelige matrisen forblir intakt.

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

JavaScripts `.map()` oppretter en ny matrise ved å bruke en **tilbakekallingsfunksjon** på hvert element i den opprinnelige matrisen. Metoden transformerer hver verdi fra den opprinnelige matrisen og lagrer resultatet i en egen matrise. JS `.map()` er ikke-mutativ, noe som betyr at den opprinnelige matrisen forblir uendret.

Metoden `.map()` brukes ofte til **å transformere alle elementene i en matrise**. Den kan for eksempel kvadratere elementer, formatere tekst, filtrere objekter og gjøre en rekke andre modifikasjoner. Det gjør `.map()` praktisk for å gjøre ikke-destruktive endringer i data, noe som resulterer i ren, sammenhengende kode.

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

Syntaksen for JS `.map()` består av en tilbakekallingsfunksjon på en matrise:

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

- **`originalArr`**: Matrisen som `.map()` skal brukes på
- **`element`**: Det aktuelle elementet som behandles
- **`index (optional)`**: Indeksen til det aktuelle elementet i matrisen
- **`array (optional)`**: Den opprinnelige matrisen

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

Tilbakekallingsfunksjonen som er angitt som et argument til `.map()`, tar hvert element fra den opprinnelige matrisen `number` og kvadrerer det. Deretter får vi en ny matrise med kvadratene til hvert element fra den opprinnelige matrisen.

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

JavaScripts `.map()` kan brukes til å utføre ulike operasjoner på elementene i en matrise. Her er noen av de vanligste bruksområdene.

### Filtrering av data

Hvis du kombinerer `.map()` med `.filter()`, får du en matrise som bare inneholder verdier som er sanne for den valgte betingelsen.

```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 eksemplet inneholder matrisen `numbers` verdiene 1-5. Deretter bruker vi metoden `.filter()`. Filtreringsbetingelsen sier at tallet modulo 2 må være null, noe som bare gjelder for partall. Dette resulterer i en ny matrise, som bare inneholder elementer som er delbare med 2, noe som gir oss matrisen `[2,4]`. Deretter bruker vi metoden `.map()` for å doble hvert element i matrisen. Som et resultat blir `[2,4]` til `[4,8]`.

### Gjengivelse av lister i JavaScript-biblioteker

React er et av de mest populære JavaScript-rammeverkene og -bibliotekene, og `.map()`nyttig for å gjengi lister i det. Merk at React bruker **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 importerte vi modellene `React` og `ReactDOM` og opprettet en matrise med `colors` med forskjellige fargenavn. Den **funksjonelle React-komponenten** `ColorList` bruker `.map()` til å opprette et `<li>` for hver farge. Attributtet `key` muliggjør effektive oppdateringer med React. I det siste trinnet blir `ColorsList`gjengitt i DOM med `ReactDOM.render`, og utdataene legges til DOM-elementet med ID `root`.

### Formatering av elementer i en matrise

JavaScripts `.map()` er en enkel måte å formatere elementer som strenger på.

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

I dette eksemplet kombinerer vi `.map()` med metoden `toLowerCase()` for å konvertere hvert navn til små bokstaver. Resultatet er en ny matrise kalt `formattedNames`, som inneholder navnene med små bokstaver. Den opprinnelige matrisen `names` forblir uendret.


This is a markdown version of: [https://www.ionos.com/nb-no/digitalguide/nettsteder/webutvikling/javascript-kart/](https://www.ionos.com/nb-no/digitalguide/nettsteder/webutvikling/javascript-kart/) for AI/LLM consumption.