Metodo Ja­va­Script .map()

Il metodo Ja­va­Script .map() ti permette di eseguire un’ite­ra­zio­ne su ogni elemento di un array e compiere de­ter­mi­na­te azioni. L’array originale rimane invariato.

Che cos’è Ja­va­Script .map()?

Il metodo Ja­va­Script .map() crea un nuovo array ap­pli­can­do una funzione di callback su ciascun elemento dell’array originale. Il metodo trasforma ogni valore dell’array di partenza; il risultato viene me­mo­riz­za­to in un array separato. Un aspetto chiave è l’im­mu­ta­bi­li­tà, ossia il fatto che l’array originale rimane invariato.

Il metodo .map() viene uti­liz­za­to spesso per tra­sfor­ma­re tutti gli elementi in un array. Ad esempio, può elevare al quadrato gli elementi, for­mat­ta­re testi, filtrare oggetti o eseguire una gran varietà di altri adat­ta­men­ti. Per questi motivi, .map() è un metodo pratico per mo­di­fi­ca­re i dati in modo non di­strut­ti­vo e permette di scrivere codice pulito e com­pren­si­bi­le.

La sintassi di Ja­va­Script .map()

La sintassi del metodo .map() è co­sti­tui­ta da un richiamo di funzione (funzione di callback) su un array:

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’ite­ra­zio­ne
• index (opzionale): l’indice dell’elemento corrente nell’array
• array (opzionale): l’array originale

Diamo un’occhiata a un esempio concreto:

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 Ja­va­Script .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 pro­ve­nien­ti dall’array originale.

Esempi pratici per .map()

Con il metodo Ja­va­Script .map() è possibile eseguire una gran varietà di ope­ra­zio­ni sugli elementi degli array. Questi sono alcuni degli scenari più frequenti:

Fil­trag­gio dei dati

Com­bi­nan­do i metodi .map() e .filter() puoi creare un array con­te­nen­te solo i valori per i quali è vera la con­di­zio­ne indicata.

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, ap­pli­chia­mo il metodo .filter(). Il criterio del filtro determina che il numero 2 deve essere uguale a 0, con­di­zio­ne vera per i numeri pari. Il risultato è un nuovo array che contiene solo gli elementi di­vi­si­bi­li per 2. Il risultato in­ter­me­dio è quindi [2, 4]. Uti­liz­zia­mo quindi il metodo .map() sull’array per rad­dop­pia­re 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 Ja­va­Script

React è tra i framework e le librerie Ja­va­Script più co­no­sciu­ti. La funzione .map() è utile per rap­pre­sen­ta­re le liste in React. Ricorda che React utilizza la sintassi JSX.

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

Im­por­tia­mo i moduli React e ReactDOM e creiamo un array di nome colors con­te­nen­te i nomi di diversi colori. Il com­po­nen­te fun­zio­na­le di React ColorsList utilizza il metodo Ja­va­Script map() per generare un elemento <sx> per ciascun colore. L’attributo key consente di ef­fet­tua­re un ag­gior­na­men­to ef­fi­cien­te con React. Infine, il com­po­nen­te ColorsList viene ren­de­riz­za­to con ReactDOM.render nel DOM e l’output viene aggiunto all’elemento DOM con l’ID root.

For­mat­ta­zio­ne di elementi nell’array

Il metodo .map() è un modo semplice per for­mat­ta­re a piacere elementi come le stringhe.

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

In questo caso com­bi­nia­mo i metodi .map() e toLowerCase() per con­ver­ti­re ciascun nome in lettere minuscole. Il risultato è il nuovo array formattedNames che contiene i nomi scritti in minuscolo. L’array originale names rimane invariato.