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:

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:

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.

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. La funzione .map() è utile per rappresentare 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);

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.

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.