# Metodo JavaScript .map()

Il metodo JavaScript `.map()` ti permette di eseguire un’iterazione su ogni elemento di un array e compiere determinate azioni. L’array originale rimane invariato.

## Che cos’è JavaScript `.map()`?

Il metodo JavaScript `.map()` crea un nuovo array applicando una **funzione di callback** su ciascun elemento dell’array originale. Il metodo trasforma ogni valore dell’array di partenza; il risultato viene memorizzato in un array separato. Un aspetto chiave è l’immutabilità, ossia il fatto che l’array originale rimane invariato.

Il metodo `.map()` viene utilizzato spesso per **trasformare tutti gli elementi in un array**. Ad esempio, può elevare al quadrato gli elementi, formattare testi, filtrare oggetti o eseguire una gran varietà di altri adattamenti. Per questi motivi, `.map()` è un metodo pratico per modificare i dati in modo non distruttivo e permette di scrivere codice pulito e comprensibile.

## La sintassi di JavaScript `.map()`

La sintassi del metodo `.map()` è costituita da un richiamo di funzione (funzione di callback) su un array:

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

- **`originalArr`**: l’array su cui viene applicato il metodo `.map()`
- **`element`**: l’elemento corrente che viene elaborato durante l’iterazione
- **`index (opzionale)`**: l’indice dell’elemento corrente nell’array
- **`array (opzionale)`**: l’array originale

Diamo un’occhiata a un esempio concreto:

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

La funzione di callback assegnata come argomento a JavaScript `.map()` prende ciascun elemento dell’array originale `number` e lo eleva al quadrato. Come risultato otteniamo un nuovo array composto dai numeri al quadrato degli elementi provenienti dall’array originale.

## Esempi pratici per `.map()`

Con il metodo JavaScript `.map()` è possibile eseguire una gran varietà di operazioni sugli elementi degli array. Questi sono alcuni degli scenari più frequenti:

### Filtraggio dei dati

Combinando i metodi `.map()` e `.filter()` puoi creare un array contenente solo i valori per i quali è vera la condizione indicata.

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

In questo esempio, l’array `numbers` contiene i valori da 1 a 5. A seguire, applichiamo il metodo `.filter()`. Il criterio del filtro determina che il numero 2 deve essere uguale a 0, condizione vera per i numeri pari. Il risultato è un nuovo array che contiene solo gli elementi divisibili per 2. Il risultato intermedio è quindi `[2, 4]`. Utilizziamo quindi il metodo `.map()` sull’array per raddoppiare ogni elemento. Il risultato finale è un array i cui elementi possono essere divisi due volte per 2, cioè `[4, 8]`.

### Rendering di liste in librerie di JavaScript

React è tra [i framework e le librerie JavaScript più conosciuti](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/le-librerie-e-i-framework-javascript-piu-conosciuti/). La funzione `.map()` è utile per rappresentare le liste in React. Ricorda che React utilizza la **sintassi 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);
```

Importiamo i moduli `React` e `ReactDOM` e creiamo un array di nome `colors` contenente i nomi di diversi colori. Il **componente funzionale di React** `ColorsList` utilizza il metodo JavaScript `map`() per generare un elemento `<sx>` per ciascun colore. L’attributo `key` consente di effettuare un aggiornamento efficiente con React. Infine, il componente `ColorsList` viene renderizzato con `ReactDOM.render` nel DOM e l’output viene aggiunto all’elemento DOM con l’ID `root`.

### Formattazione di elementi nell’array

Il metodo `.map()` è un modo semplice per formattare a piacere elementi come le stringhe.

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

In questo caso combiniamo i metodi `.map()` e `toLowerCase()` per convertire ciascun nome in lettere minuscole. Il risultato è il nuovo array `formattedNames` che contiene i nomi scritti in minuscolo. L’array originale `names` rimane invariato.


This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/javascript-map/](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/javascript-map/) for AI/LLM consumption.