Articolo originale: https://www.freecodecamp.org/news/javascript-map-how-to-use-the-js-map-function-array-method/

A volte potresti aver bisogno di prendere un array, applicargli qualche procedura così che ottieni un array con gli elementi modificati.

Invece di iterare manualmente sugli array usando un loop potresti invece usare il metodo integrato Array.map().

Il metodo Array.map() ti permette di iterare su un array e modificare gli elementi usando una funzione di callback, che verrà eseguita su ognungo degli elementi dell'array.

Per esempio, se hai il seguente array:

let arr = [3, 4, 5, 6];
Un semplice array JavaScript

Ora immagina che ti è richiesto di moltiplicare ogni elemento dell'array per 3. Potresti considerare di usare un loop come segue:

let arr = [3, 4, 5, 6];

for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 3;
}

console.log(arr); // [9, 12, 15, 18]
Iterare su array usando un loop

Ma puoi invece usare Array.map() per ottenere lo stesso risultato. Ecco un esempio:

let arr = [3, 4, 5, 6];

let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr); // [9, 12, 15, 18]
Iterare su un array usando il metodo map

Il metodo Array.map() è comunemente usato per applicare cambiamenti agli elementi, sia moltiplicando per un numero specifico come nell'esempio sopra, sia facendo qualsiasi altra operazione di cui potresti avere bisogno per la tua applicazione.

Come usare map con un array di oggetti

Per esempio, potresti avere un array di oggetti che include il nome e il cognome (come firstName e lastName) dei tuoi amici come segue:

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];
Un array di oggetti

Puoi usare il metodo map() per iterare sull'array di oggetti e unire i valori di firstName e lastName come segue:

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

let userFullnames = users.map(function(element){
    return `${element.firstName} ${element.lastName}`;
})

console.log(userFullnames);
// ["Susan Steward", "Daniel Longbottom", "Jacob Black"]
Usare il metodo map() per iterare su un array di oggetti

Il metodo map() passa più di un solo elemento, vediamo tutti gli argomenti passati da map() alla funzione di callback.

La sintassi completa del metodo map()

La sintassi del metodo map() è come segue:

arr.map(function(element, index, array){  }, this);

La funzione callback function() è invocata su ogni elemento dell'arrau, e il metodo map() passa sempre alla funzione l'elemento corrente (element), l'indice (index) dell'elemento corrente, e l'intero oggetto array.

L'argomento this è usato dentro la funzione callback. Come default il suo valore è undefined. Per esempio, ecco come cambiare il valore di this al numero 80:

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
	console.log(this) // 80
}, 80);
Assegnare un valore numerico all'argomento this del metodo map

Puoi anche testare gli altri argomenti usando console.log() se sei interessato:

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
    console.log(element);
    console.log(index);
    console.log(array);
    return element;
}, 80);
Stampare gli argomenti per vedere i valori

E questo è tutto quello che devi sapere sul metodo Array.map(). La maggior parte delle volte userai solo l'argomento elements dentro la funzione callback ignorando il resto, è quello che faccio di solito nei  miei progetti di tutti i giorni :)

Grazie per avere letto questo tutorial! :)