# Kuidas kasutada JavaScripti meetodit .map()

JavaScripti meetod .map() võimaldab teil läbida kõik massiivi elemendid ja täita toiminguid. Tulemuste salvestamiseks luuakse uus massiiv, jättes algse massiivi muutmata.

## Mis on JavaScript `.map()`?

JavaScripti meetod `.map()` loob uue massiivi, rakendades **tagasikõnefunktsiooni** algse massiivi igale elemendile. Meetod teisendab algse massiivi iga väärtuse, salvestades tulemuse eraldi massiivi. JS `.map()` on mittemuutuv, mis tähendab, et algne massiiv jääb muutumatuks.

Meetodit `.map()` kasutatakse sageli **massiivi kõikide elementide teisendamiseks**. Näiteks saab sellega elemente ruutuda, teksti vormindada, objekte filtreerida ja teha mitmesuguseid muudatusi. See muudab `.map()` praktiliseks andmete mittetühistavate muudatuste tegemiseks, mille tulemuseks on puhas ja ühtne kood.

## Milline on JavaScript `.map()` süntaks?

JS `.map()` süntaks koosneb massiivi tagasikõnefunktsioonist:

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

- **`originalArr`**: massiiv, millele `.map()` rakendatakse
- **`element`**: Praegu töödeldav element
- **`index (optional)`**: Praeguse elemendi indeks massiivis
- **`array (optional)`**: Algne massiiv

Vaatame ühte näidet.

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

Argumendina .map() sisestatud tagasikõnefunktsioon võtab iga elemendi algsest massiivist number ja ruutub selle. Seejärel saame uue massiivi, mis sisaldab iga algse massiivi elemendi ruutu.

## JavaScripti `.map()` näiteid

JavaScripti `.map()` abil saab teha mitmesuguseid operatsioone massiivi elementidega. Siin on mõned selle kõige levinumad kasutusjuhud.

### Andmete filtreerimine

Kui ühendate `.map()` ja `.filter()`, saate massiivi, mis sisaldab ainult väärtusi, mis vastavad teie valitud tingimusele.

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

Selles näites sisaldab massiiv numbers väärtusi 1–5. Seejärel rakendame meetodit .filter(). Filtreerimistingimus ütleb, et number modulo 2 peab olema null, mis kehtib ainult paarisarvude puhul. Selle tulemusena saame uue massiivi, mis sisaldab ainult 2-ga jaguvaid elemente, mille tulemuseks on massiiv [2,4]. Seejärel kasutame meetodit .map(), et kahekordistada iga massiivi element. Selle tulemusena muutub [2,4] [4,8].

### Nimekirjade renderdamine JavaScripti raamatukogudes

React on üks populaarsemaid JavaScripti raamistikke ja raamatukogusid ning `.map()`kasulik nimekirjade renderdamiseks selles. Pange tähele, et React kasutab **JSX-süntaksit**.

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

Eespool importisime mudelid React ja ReactDOM ning lõime massiivi nimega colors, mis sisaldab erinevaid värvinimesid. **Reacti funktsionaalne komponent** ColorList kasutab .map(), et luua iga värvi jaoks &lt;li&gt; element. Atribuut key võimaldab Reactiga tõhusalt uuendusi teha. Viimases etapis renderdatakse ColorsListDOMis koos ReactDOM.render ja väljund lisatakse DOM-elemendile ID-ga root.

### Massiivi vormingu elemendid

JavaScripti meetod `.map()` on lihtne viis stringide ja muude elementide vormindamiseks.

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

Selles näites kombineerime .map() meetodiga toLowerCase(), et muuta iga nimi väiketäheks. Tulemuseks on uus massiiv nimega formattedNames, mis sisaldab väiketähti. Algne massiiv names jääb muutumatuks.


This is a markdown version of: [https://www.ionos.com/et-ee/digitalguide/veebisaidid/veebiarendus/javascripti-kaart/](https://www.ionos.com/et-ee/digitalguide/veebisaidid/veebiarendus/javascripti-kaart/) for AI/LLM consumption.