# JavaScriptin .map()-menetelmän käyttö

JavaScript-menetelmällä `.map()` voit käydä läpi jokaisen elementin taulukossa ja suorittaa toimintoja. Tulosten tallentamiseksi luodaan uusi taulukko, jolloin alkuperäinen taulukko säilyy ennallaan.

## Mikä on JavaScript `.map()`?

JavaScriptin `.map()` luo uuden taulukon soveltamalla **kutsufunktiota** alkuperäisen taulukon jokaiseen elementtiin. Metodi muuntaa alkuperäisen taulukon jokaisen arvon ja tallentaa tuloksen erilliseen taulukkoon. JS `.map()` ei muuta alkuperäistä taulukkoa, eli se pysyy muuttumattomana.

`.map()` käytetään usein **taulukon kaikkien elementtien muuntamiseen**. Sen avulla voidaan esimerkiksi neliöidä elementtejä, muotoilla tekstiä, suodattaa objekteja ja tehdä monia muita muutoksia. Tämä tekee `.map()` käytännöllisen työkalun tietojen muuttamiseen tuhoamatta niitä, mikä johtaa siistiin ja johdonmukaiseen koodiin.

## Mikä on JavaScript `.map()`:n syntaksi?

JS `.map()`:n syntaksi koostuu taulukon callback-funktiosta:

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

- **`originalArr`**: Taulukko, johon `.map()` sovelletaan
- **`element`**: Käsiteltävä nykyinen elementti
- **`index (optional)`**: Nykyisen elementin indeksi taulukossa
- **`array (optional)`**: Alkuperäinen taulukko

Katsotaanpa esimerkkiä.

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

Argumenttina `.map()` aan syötetty callback-funktio ottaa jokaisen elementin alkuperäisestä taulukosta `number` ja neliöi sen. Sitten saamme uuden taulukon, jossa on alkuperäisen taulukon jokaisen elementin neliöt.

## Esimerkkejä JavaScriptin `.map()`:stä

JavaScriptin `.map()` voidaan käyttää suorittamaan erilaisia operaatioita taulukon elementeille. Tässä on joitakin sen yleisimpiä käyttötapauksia.

### Tietojen suodattaminen

Jos yhdistät `.map()` ja `.filter()`, saat taulukon, joka sisältää vain arvot, jotka ovat totta valitsemallesi ehdolle.

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

Tässä esimerkissä taulukko `numbers` sisältää arvot 1–5. Sitten sovellamme menetelmää `.filter()`. Suodatusehto sanoo, että luvun modulo 2 on oltava nolla, mikä pätee vain parillisiin lukuihin. Tuloksena on uusi taulukko, joka sisältää vain luvut, jotka ovat jaollisia kahdella, jolloin saamme taulukon `[2,4]`. Seuraavaksi käytämme menetelmää `.map()` kaksinkertaistamaan jokaisen taulukon elementin. Tuloksena `[2,4]` muuttuu `[4,8]`.

### Luetteloiden renderointi JavaScript-kirjastoissa

React on yksi suosituimmista JavaScript-kehyksistä ja -kirjastoista, ja `.map()`hyödyllinen luetteloiden renderoinnissa siinä. Huomaa, että React käyttää **JSX-syntaksia**.

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

Yllä olemme tuoneet mallit `React` ja `ReactDOM` ja luoneet taulukon nimeltä `colors`, jossa on erilaisia värinimiä. **React-funktionaalisessa komponentissa** `ColorList` käytetään `.map()` luomaan `<li>` jokaiselle värille. `key` mahdollistaa tehokkaat päivitykset Reactin avulla. Viimeisessä vaiheessa `ColorsList`renderöidään DOM:ssa `ReactDOM.render` ä ja tulos lisätään DOM-elementtiin, jonka ID on `root`.

### Taulukon muotoiluelementit

JavaScriptin `.map()` -metodi on yksinkertainen tapa muotoilla elementtejä, kuten merkkijonoja.

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

Tässä esimerkissä yhdistämme `.map()` ja `toLowerCase()` muuntaaksemme jokaisen nimen pieniksi kirjaimiksi. Tuloksena on uusi taulukko nimeltä `formattedNames`, joka sisältää pienet kirjaimet. Alkuperäinen taulukko `names` pysyy muuttumattomana.


This is a markdown version of: [https://www.ionos.com/fi-fi/digitalguide/verkkosivustot/verkkosivujen-kehittaeminen/javascript-kartta/](https://www.ionos.com/fi-fi/digitalguide/verkkosivustot/verkkosivujen-kehittaeminen/javascript-kartta/) for AI/LLM consumption.