Una delle strutture dati che usiamo maggiormente in JavaScript sono gli oggetti. Questi ultimi, spesso e volentieri eccessivamente saturi di proprietà, metodi e variabili di vario tipo, possono facilmente sovraccaricarsi e risultare poco efficienti, specialmente se nella nostra applicazione effettuiamo continue operazioni sull'oggetto stesso.

Generalmente, è corretto eseguire operazioni sugli elementi che salviamo in memoria: d'altronde, se decidiamo di memorizzare un determinato valore è perché desideriamo averne accesso in seguito, in un modo o nell'altro. JavaScript, d'altra parte, offre una struttura dati più performante e molto simile agli oggetti cui siamo abituati, ovvero le Mappe.

Per chi ha familiarità con le più note strutture dati potrebbe già sapere di cosa parliamo. Difatti, le Mappe in JavaScript non sono altro che la rappresentazione delle cosiddette HashHaps presenti in altri linguaggi di programmazione.

Seppur gli oggetti siano indicati per una programmazione orientata alla programmazione ad oggetti, spesso e volentieri avremo bisogno di leggere, modificare, eliminare o scrivere all'interno dei nostri oggetti. Queste operazioni, effettuate continuamente, possono produrre cali di performance e leggere congestioni nel codice durante l'accesso ai dati a questa particolare struttura dati, che non è ottimizzata per effettuare sovente questo genere di operazioni.

JavaScript introduce dunque le Mappe, con un miglioramento significativo a livello di performance e rapidità destinato all'accesso ai valori della nostra entità. Possiamo dunque effettuare letture e modifiche alle proprietà interne alle nostre Mappe in modo più rapido ed efficiente, grazie al meccanismo che governa le Mappe dietro le quinte.

A differenza delle altre strutture dati più comuni, le Mappe godono della presenza di una particolare tecnica di accesso ai dati: in particolare, il motore JavaScript non avrà bisogno di scorrere, una per una, tutte le proprietà interne della nostra Mappa per trovare il valore che stiamo richiedendo. La lettura di un'informazione sarà indirizzata ad una precisa chiave ("key"), ed il motore che esegue la ricerca del valore cui intendiamo ottenere accesso sa già in quale spazio di memoria andare a guardare.

Pertanto, un'operazione di ricerca di un valore su una Mappa, risulterà notevolmente più veloce ed efficiente rispetto ad una stessa operazione eseguita, però, su un oggetto.

Per costruire una Mappa in JavaScript è richiesta semplicemente una riga di codice, così come per le altre strutture dati più comuni:

const javascriptMap = new Map();

Metodi e proprietà utilizzabili con le Mappe

Di seguito, una lista di metodi e proprietà utilizzabili con le Mappe, associati ad una breve spiegazione di ciascuno.

📦 Metodo set()

Serve ad aggiungere un valore alla Mappa. Si aspetta di ricevere due argomenti: un identificatore della proprietà (che utilizzeremo per recuperare il valore) ed il valore.

javascriptMap.set('username', 's333mo');
// Map(1) { 'username' => 's333mo' }

javascriptMap.set('username');
// Map(1) { 'username' => undefined }

📦 Metodo delete()

Serve a rimuovere un valore alla Mappa. Prende come argomento la proprietà da rimuovere. Ritorna true se il valore era presente nella Mappa ed è stato quindi correttamente rimosso, e false se il valore non era presente nella Mappa, dunque nessuna proprietà è stata rimossa.

javascriptMap.delete('username');
// true (the property 'username' was present in the Map)

javascriptMap.delete('unexistingProperty');
// false (the property 'unexistingProperty' was NOT present in the Map)

📦 Metodo get()

Serve a recuperare il valore associato ad una determinata proprietà. Prende come argomento il nome della proprietà della quale vogliamo recuperare il valore.

javascriptMap.get('username');
// 's333mo'

📦 Metodo has()

Serve a controllare se la Mappa contiene un determinato valore. Prende come argomento il nome della proprietà di cui vogliamo controllare la presenza. Ritorna un valore booleano, dipendente dalla presenza o meno di una proprietà all'interno della Mappa.

javascriptMap.has('username');
// true

javascriptMap.has('nonPresentProperty');
// false

📦 Metodo clear()

Svuota la nostra Mappa, e ne rimuove ogni proprietà contenuta al suo interno. Ritorna undefined, e la nostra Mappa risulterà completamente vuota.

javascriptMap.clear();
// undefined

console.log(javascriptMap);
// Map(0) { size: 0 }

📦 Proprietà size

Ritorna la lunghezza della nostra Mappa, ovvero la quantità di proprietà contenute al suo interno. La proprietà size è paragonabile al metodo length degli Array.

javascriptMap.set('username', 's333mo');
javascriptMap.set('password', 'myPassword123');
javascriptMap.set('email', 'email@provider.com');

console.log(javascriptMap.size);
// 3