Il metodo map di javascript: come utilizzarlo-#6
Tempo di lettura: 3 minuti
Il metodo map si utilizza nel momento in cui abbiamo la necessità di gestire o modificare i valori memorizzati negli array.
Per ogni elemento dell’Array sorgente viene richiamata una funzione di callback mediante una arrow function, vista in una delle lezioni precedenti.
In programmazione, un callback (o, in italiano, richiamo) è, in genere, una funzione, o un “blocco di codice” che viene passata come parametro ad un’altra funzione. In particolare, quando ci si riferisce alla callback richiamata da una funzione, la callback viene passata come argomento ad un parametro della funzione chiamante. In questo modo la chiamante può realizzare un compito specifico (quello svolto dalla callback) che non è, molto spesso, noto al momento della scrittura del codice.
Se invece ci si riferisce alla callback come funzione richiamata dal sistema operativo, di norma ciò si utilizza allo scopo di gestire particolari eventi: dal premere un bottone con il mouse, allo scrivere caratteri in un campo di testo. Ciò consente, quindi, a un programma di livello più basso, di richiamare una funzione (o servizio) definita a un livello più alto.
(fonte wikipedia)
Questa ne elabora il risultato e ne restituisce il valore modificato che popolerà un nuovo array.
Il metodo map e le “firme”
Le firme del metodo map variano in base al numero dei parametri che si passano alla funzione di callback:
let Array = ['file1.jpg', 'file2.png', 'file3.png'];
let ArrayNew = Array.map((nomeimg) => {
return 'http://www.miosito.com/' + nomeimg;
})nel suddetto esempio l’Array originario è costituito da una lista di nomi di immagini le quali dovranno essere modificate con l’aggiunta di un prefisso.
La funzione di callback è stata scritta con la notazione compatta:
(nomeimg) => {
return 'http://www.miosito.com/' + nomeimg;
}
L’Array di nome ArrayNew ha all’interno una serie di url relativi alle singole immagini dell’array originario.
Il callback può essere una funzione predefinita , anonima o personalizzata in JavaScript.L’array originario non viene mai modificato.
Ricordatevi di inserire sempre l’istruzione return nel corpo del callback nel caso in cui questo sia costituito da più istruzioni.
L’operatore map della libreria RXjs
Come visto in uno dei precedenti tutorial ,in Angular, spesso si utilizzano gli Observable, quindi all’interno della libreria Rxjs è stato introdotto un operatore di trasformazione map simile a quello usato in Javascript.
Quest’ultimo , a differenza del primo, non va ad agire all’interno di un array bensì va ad agire all’interno di un Observable.
La sintassi ci consente di trasformare ogni elemento emesso da un Observable, dove si può accedere ai dati o vi si può applicare una funzione di nostra scelta.
In Angular ogni qual volta che comunichiamo con un server esterno, applicando la classe HttpClient,otteniamo degli Observable (anche il dato restituito, a sua volta, è un Observable).
Vediamo un esempio tratto dal corso “Angular dalla alla webApp“:
getAll():Observable<Device[]>{
return this.http.get<Device[]>(url)
.map(res => res['dati'])
.catch(this.errorhandler)
);
}
dove il risultato della chiamata http.get è un oggetto con dei dati che non sono noti ad Angular e, di conseguenza, dovrò sfruttare la classica notazione delle parentesi quadre per accedere alla proprietà restutuita dall’interrogazione della Url.
Chi è lucio ?
Lucio Ticali è un Web & App developer con la passione per il web marketing,si occupa anche di tecniche di indicizzazione del sito e di promozione dello stesso (SEO e SEM).
