# 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 `<li>` element. Atribuut `key` võimaldab Reactiga tõhusalt uuendusi teha. Viimases etapis renderdatakse `ColorsList`DOMis 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.