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:

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.

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¹. 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.

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ì:

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

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.

Andrea Passaglia

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. ↩