Come usare .map() in JavaScript

JavaScript supporta diversi metodi per iterare sugli array. Gli sviluppatori utilizzano spesso il classico ciclo for e il meno comune metodo .forEach(). Tuttavia, il metodo più popolare è .map(). Questo metodo crea un nuovo array chiamando una funzione su ogni elemento dell’array originale. Evita mutazioni e genera array davvero “puliti”.

Questo è diverso dai metodi basati su mutazione, che inevitabilmente modificano l’array originale in qualche modo. In questo articolo esploreremo quattro modi per utilizzare .map() in JavaScript (anche se ne esistono molti altri).

Metodo 1: Chiamare funzioni su singoli elementi dell’array

Quando si usa .map() in JavaScript, la funzione di callback è trattata come un argomento. Il valore dell’elemento dell’array al momento dell’esecuzione diventa un parametro obbligatorio di questa funzione. Puoi usarlo per modificare valori o creare funzioni.

Esempio:

const sweetArray = [6, 7, 11, 13, 20];
const sweeterArray = sweetArray.map(sweetItem => {
    return sweetItem * 2;
});
console.log(sweeterArray);

Output:

[12, 14, 22, 26, 40]

Puoi semplificare e rendere il codice più leggibile:

const makeSweeter = sweetItem => sweetItem * 2;
const sweetArray = [6, 7, 11, 13, 20];
const sweeterArray = sweetArray.map(makeSweeter);
console.log(sweeterArray);

Output:

[12, 14, 22, 26, 40]

L’uso di sweetArray.map(makeSweeter) rende il codice più chiaro rispetto alla prima versione.

Metodo 2: Convertire stringhe in array

È possibile utilizzare il metodo .map() dal prototipo Array per convertire stringhe. Invece di lavorare direttamente con gli array, utilizziamo .call() per applicare .map() a una stringa. Ricorda che in JavaScript le stringhe possono essere trattate come array di caratteri, consentendo l’accesso ad alcuni metodi degli array.

Esempio:

const name = "Hostman";
const map = Array.prototype.map;
const newName = map.call(name, eachLetter => {
    return `${eachLetter}e`;
});
console.log(newName);

Output:

["He", "oe", "se", "te", "me", "ae", "ne"]

In questo esempio, .map() viene usato per trasformare ogni carattere della stringa aggiungendo una “e”. Funziona in modo simile a .split() e ad altri metodi che operano sui caratteri della stringa prima di trasformarli nuovamente in un array.

Metodo 3: Rendering di liste nelle librerie JavaScript

Questo caso d’uso è comune nei framework JavaScript come React. Qui è necessaria la sintassi JSX, poiché .map() viene utilizzato al suo interno. Ad esempio:

import React from "react";
import ReactDOM from "react-dom";

const names = ["cloud", "dbaas", "vps", "storage", "kubernetes"];

const NamesList = () => (
  <div>
    <ul>{names.map(name => <li key={name}>{name}</li>)}</ul>
  </div>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<NamesList />, rootElement);

In questo esempio, il componente React rende un <div> contenente una lista. Il metodo .map() di JavaScript viene utilizzato per iterare sull’array di nomi e generare elementi della lista individuali. Il rendering è gestito da ReactDOM.render su un elemento DOM con l’ID root.

Metodo 4: Trasformare formati di oggetti in array

Un altro caso d’uso di .map() in JavaScript consiste nel trasformare ogni oggetto in un array e restituire un nuovo array con oggetti modificati. Funziona in modo simile all’elaborazione tradizionale dei dati.

Esempio:

const myUsers = [
    { name: 'cloud', likes: 'scalability' },
    { name: 'devops', likes: 'automation' },
    { name: 'kube', likes: 'orchestration' }
];
const usersByLikes = myUsers.map(item => {
    const container = {};
    container[item.name] = item.likes;
    container.popularity = item.name.length * 12;
    return container;
});
console.log(usersByLikes);

Output:

[
  { cloud: 'scalability', popularity: 60 },
  { devops: 'automation', popularity: 72 },
  { kube: 'orchestration', popularity: 48 }
]

In questo esempio, ogni oggetto dell’array viene modificato utilizzando la notazione tra parentesi e le assegnazioni di proprietà. Questo approccio è utile per trasformare e comprimere i dati prima di utilizzarli nelle applicazioni lato client.

Conclusione

Abbiamo esaminato quattro modi principali per utilizzare il metodo .map() in JavaScript. Puoi ampliare le sue capacità combinandolo con altri metodi. Per ulteriori informazioni dettagliate, consulta la documentazione ufficiale.