Imparare ad usare Array.map in JavaScript
Tags: javascript, map, functional
Published: 2021-01-09 11:24:46

---
title: Imparare ad usare Array.map in JavaScript
published: true
description: La nuova versione di JavaScript aggiunge il coltellino svizzero della programmazione funzionale: il metodo map. In questo tutorial spiegato in modo semplice come si usa.
tags: javascript, js, map, fp, functional
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/d4vnsaaxwexf23frslrr.png
---

# Imparare ad usare Array.map in JavaScript

Il metodo `.map` è disponibile in JavaScript per tutti i browser e Node.js da ormai un bel pezzo (ECMAScript 2015). Se l’hai visto in giro e non lo stai ancora usando, dopo aver letto questo articolo nessuno ne saprà più di te sull’argomento!

## Ma perché? Serve veramente? 

Per velocizzare l’apprendimento, niente è meglio di un esempio. Qualsiasi programmatore JavaScript avrà visto questo codice svariate volte:

```javascript
const users = [
  { email: 'giovanni@gmail.com', display: 'giova38' },
  { email: 'giangiorgio@toptech.com', display: 'giangi23' }
]

let usersWithAdmin = []
for (let i = 0; i < users.length; ++i) {
  const domain = users[i].email.split('@') // vedi nota 1
  let admin = false
  if (domain === 'toptech.com') {
    admin = true
  }
  usersWithAdmin[i] = Object.assign(users[i], { admin })
}
console.log(usersWithAdmin)
// l’output sarà
// [ { email: 'giovanni@gmail.com', display: 'giova38', admin: false },
//   { email: 'giangiorgio@toptech.com', display: 'giangi23', admin: true } ]
```
In questo codice creiamo un array vuoto, iteriamo tutti gli elementi di `users` e per ognuno controlliamo se il dominio della mail è "toptech.com", in quel caso dichiariamo l’utente come admin (tralasciamo la sicurezza di tale codice 🤣).

Una bella pappardella, lo stesso identico risultato si può ottenere con 4 leggibilissime righe.

```javascript
const isUserAdmin = user => user.email.split('@')[1] === 'toptech.com'

const usersWithAdmin = users.map(user => 
  Object.assign(user, { admin: isUserAdmin(user) }))
```

Nella prima riga dichiariamo, in maniera un po’ più succinta, cosa significa essere admin. Nella seconda prendiamo un bel respiro. Infine, nelle ultime due "mappiamo" ogni elemento dell’array ad una copia con il nuovo campo `admin` aggiunto.

> *(Semi)immutabilità*
>Prima di spendere due parole su `.map` si prega di notare che `usersWithAdmin` prima era stato dichiarato `let`, nel nuovo codice è `const`[^1]. Questo ha implicazioni importanti: il nostro array nasce già inizializzato, non possiamo mai referenziare, nemmeno facendolo apposta, il nostro array in fase di inizializzazione.

## Come funziona map

In due parole `.map` è un metodo che permette di applicare la stessa funzione a tutti gli elementi dell’array.

```javascript
const array = ['ciao', 'mondo']
const maiuscolizza = stringa => stringa.toUpperCase()
console.log(array.map(maiuscolizza))
// l’output sarà
// [ 'CIAO', 'MONDO' ]
```

Nel caso sopra abbiamo usato la funzione `maiuscolizza` che manda una stringa nella sua versione maiuscola.

Guardiamo la segnatura della funzione che possiamo passare:

    function callback(cursore[, indice[, array]])

- Il `cursore` che è l’unico parametro usato negli esempi è l’elemento corrente che vogliamo elaborare.
- `indice` è l’attuale indice associato al cursore. Il primo elemento avrà indice `0`.
- `array` ci restituisce l’array su cui stiamo agendo. Utile nel caso in cui la nostra funzione deve combinare diversi elementi. Da notare che si tratta dell’array originale.

### Estrarre proprietà di un oggetto con map

Supponiamo di avere oggetti con molte proprietà e di volere un nuovo array con solo una di queste, l’equivalente di una colonna. Potremmo fare così:

```javascript
const esperimenti = [
  { nome: 'Large Hadron Collider', costo: 5000000000 },
  { nome: 'Vulcano di bicarbonato', costo: 3.50 },
  { nome: 'International Space Station', costo: 150000000000 }
]
const nomiEsperimenti = esperimenti.map(esperimento => esperimento.nome)
console.log(nomiEsperimenti)
// l’output sarà
// [ 'Large Hadron Collider', 
//   'Vulcano di bicarbonato',
//   'International Space Station' ]
```

> *Reduce*
> Di solito si estrae una colonna per effettuare dei calcoli, ad esempio se vogliamo calcolare il costo totale degli esperimenti potremmo scrivere
```javascript
esperimenti.map(e => e.costo).reduce((prec, succ) => prec + succ)
// output: 155000000003.5
```
> Abbiamo usato `reduce` che agisce come accumulatore di valori ed effettua la somma. Piu informazioni sul [sito di MDN](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce).

[^1]: Ad essere perfettamente onesti, `const` viene qui usato solo in maniera convenzionale a dire "ehy questo array non dovrebbe più essere mutato". La verità tuttavia è che, anche se non possiamo più riassegnare la variabile, l’array può benissimo essere mutato tramite assegnamento dei suoi elementi. Nei prossimi articoli risolveremo anche questo problema.

---
[_Andrea Passaglia_](https://www.linkedin.com/in/gurghet/?locale=it_ITs)

<!--altri usi utili su https://www.robinwieruch.de/javascript-map-array, tipo debugging e come fare map su oggetti-->