map JavaScript, mappare elementi di un array, map()

In questa lezione parleremo del metodo map in JavaScript, utilizzato con gli array. Questo metodo crea un nuovo array con i risultati della chiamata di una funzione per ciascun elemento dell’array di partenza.

La sintassi è la seguente: nomearray.map(function)

Dove function può essere una funzione già esistente come ad esempio la funzione valore assoluto: Math.abs. Oppure può anche essere una funzione definita dall’utente.

Il metodo restituisce un nuovo array.

Inoltre si può indicare un valore opzionale nomearray.map(function, thisValue) che indica il valore da passare alla funzione da utilizzare come valore this. Altrimenti il valore passato sarà undefined.

Facciamo degli esempi d’utilizzo del metodo map().

map JavaScript – primo esempio

Applichiamo la funzione cubo a tutti gli elementi di un array.

In questo primo esempio creiamo innanzitutto un array di numeri.

Quindi implementiamo una funzione cubo che restituisce semplicemente il cubo di un numero. Dopo vogliamo applicarla a tutti gli elementi dell’array. Bene possiamo utilizzare proprio il metodo map sull’array di partenza.

Il risultato sarà un nuovo array dove ciascun elemento è stato elevato alla terza.

Ecco il semplice codice di esempio:



var numeri = [5,4,3,2,6,12];

function cubo(n) {
  return n * n * n;
}

var cuboNumeri = numeri.map(cubo);
console.log(cuboNumeri);

Per semplicità visualizziamo il risultato sempre nella console del browser.

map JavaScript – secondo esempio

Trasformare un array di numeri in un array di stringhe con la parola pari o dispari.

In questo secondo esempio prendiamo un array di numeri.

Poi realizziamo una funzione che verifichi se un numero è pari oppure dispari. Se è pari facciamo ritornare la parola pari, se invece è dispari la parola dispari.

Dunque applichiamo con il metodo map questa funzione a ciascun elemento dell’array. Come risultato avremo un array dove al posto dei numeri comparirà il valore pari o dispari.

Ecco il codice completo dell’esempio che illustra il funzionamento del metodo map in JavaScript.



var numeri = [5,4,3,2,6,12];
console.log(numeri);

function pariDispari(n) {
  if (n % 2 == 0) {
    return 'pari';
  }
  return 'dispari';
}

var arrayStringa = numeri.map(pariDispari);
console.log(arrayStringa);

Al solito visualizziamo nella console l’array modificato.

Questi sono solo alcuni semplici esempi d’utilizzo del metodo map in JavaScript, più avanti vedremo altri campi di applicazione.

Lezione precedente: metodo indexOf()

Lezione successiva: metodo sort()