# Kako uporabljati metodo .map() v JavaScriptu

Metoda JavaScript `.map()` omogoča ponavljanje vsakega elementa v nizu in izvajanje akcij. Ustvari se nov niz za shranjevanje rezultatov, pri čemer ostane prvotni niz nespremenjen.

## Kaj je JavaScript `.map()`?

Metoda JavaScript `.map()` ustvari nov niz z uporabo **funkcije povratnega klica** za vsak element izvirnega niza. Metoda pretvori vsako vrednost iz izvirnega niza in rezultat shrani v ločenem nizu. JS `.map()` je nemutirajoč, kar pomeni, da izvirni niz ostane nespremenjen.

Metoda `.map()` se pogosto uporablja za **preoblikovanje vseh elementov v nizu**. Na primer, lahko kvadrira elemente, oblikuje besedilo, filtrira objekte in izvede vrsto drugih sprememb. To pomeni, da je `.map()` praktična za nedestruktivne spremembe podatkov, kar ima za posledico čisto in koherentno kodo.

## Kakšna je sintaksa za JavaScript `.map()`?

Sintaksa za JS `.map()` je sestavljena iz funkcije za povratni klic na nizu:

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

- **`originalArr`**: Niz, na katerega se bo `.map()` uporabilo
- **`element`**: Trenutni element, ki se obdeluje
- **`index (optional)`**: Indeks trenutnega elementa v nizu
- **`array (optional)`**: Izvorni niz

Poglejmo primer.

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

Funkcija callback, ki je vnesena kot argument v `.map()`, vzame vsak element iz izvirnega niza `number` in ga kvadrira. Tako dobimo nov niz s kvadrati vsakega elementa iz izvirnega niza.

## Primeri JavaScriptovih `.map()`

JavaScript `.map()` se lahko uporablja za izvajanje različnih operacij na elementih niza. Tukaj je nekaj najpogostejših primerov uporabe.

### Filtriranje podatkov

Če združite `.map()` in `.filter()`, dobite niz, ki vsebuje samo vrednosti, ki ustrezajo izbranemu pogoju.

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

V tem primeru niz `numbers` vsebuje vrednosti 1–5. Nato uporabimo metodo `.filter()`. Pogoj filtriranja pravi, da mora biti število modulo 2 enako nič, kar velja samo za sode števila. Rezultat je nov niz, ki vsebuje samo elemente, ki so deljivi z 2, kar nam da niz `[2,4]`. Nato uporabimo metodo `.map()`, da podvojimo vsak element v nizu. Rezultat je, da `[2,4]` postane `[4,8]`.

### Renderiranje seznamov v JavaScriptovih knjižnicah

React je eden najbolj priljubljenih JavaScriptovih okvirov in knjižnic, `.map()`pa `.map()`uporaben za upodabljanje seznamov v njem. Upoštevajte, da React uporablja **sintakso JSX**.

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

Zgoraj smo uvozili modela `React` in `ReactDOM` ter ustvarili niz z imenom `colors` z različnimi imeni barv. **Funkcionalna komponenta React** `ColorList` uporablja `.map()` za ustvarjanje elementa `<li>` za vsako barvo. Atribut `key` omogoča učinkovite posodobitve z React. V zadnjem koraku se `ColorsList`upodobi v DOM z `ReactDOM.render`, izhod pa se doda elementu DOM z ID `root`.

### Oblikovanje elementov matrike

Metoda `.map()` v JavaScriptu je preprost način za oblikovanje elementov, kot so nizi.

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

V tem primeru združimo `.map()` z metodo `toLowerCase()`, da pretvorimo vsako ime v male črke. Rezultat je nov niz z imenom `formattedNames`, ki vsebuje imena v malih črkah. Izvirni niz `names` ostane nespremenjen.


This is a markdown version of: [https://www.ionos.com/sl-si/digitalguide/spletne-strani/razvoj-spletnih-strani/javascript-zemljevid/](https://www.ionos.com/sl-si/digitalguide/spletne-strani/razvoj-spletnih-strani/javascript-zemljevid/) for AI/LLM consumption.