Array e Iterabili

Introduzione

Gli array sono una delle strutture dati più importanti in JavaScript, utilizzati per memorizzare e manipolare collezioni di valori. Questo modulo esplora in dettaglio come lavorare con gli array, i loro metodi e altre strutture dati iterabili come Sets e Maps.

Gli argomenti trattati includono:

Iterabili e array-like: definizioni e differenze
Creazione di array: diversi metodi e quando usarli
Manipolazione di array: aggiungere, rimuovere e modificare elementi
Metodi array: map, filter, reduce, forEach e molti altri
Sintassi avanzata: spread operator e destructuring
Sets e Maps: strutture dati alternative
WeakSet e WeakMap: versioni specializzate per la gestione della memoria

Comprendere questi concetti è essenziale per lavorare efficacemente con i dati in JavaScript.

Iterabili e Array-like

Cos’è un iterabile

Un iterabile è tecnicamente un oggetto che implementa il protocollo iterabile e ha un metodo @@iterator con la proprietà Symbol.iterator.

In termini più semplici, un iterabile è qualsiasi oggetto su cui puoi utilizzare un loop for/of.

1
// Esempi di iterabili
2
const array = [1, 2, 3];
3
const string = 'hello';
4
const nodeList = document.querySelectorAll('div');
5

6
// Tutti possono essere iterati con for/of
7
for (const item of array) {
8
  console.log(item);
9
}

Iterabili comuni

Non tutti gli iterabili sono array. Esempi di iterabili includono:

Array: la struttura dati principale
Stringhe: ogni carattere può essere iterato
NodeList: risultato di querySelectorAll
Maps e Sets: strutture dati che vedremo più avanti

Array-like objects

Un oggetto array-like è diverso da un iterabile, anche se spesso le due caratteristiche coincidono. Un oggetto array-like:

Ha una proprietà length
Utilizza indici numerici per accedere agli elementi

Esempi di oggetti array-like includono:

NodeList: ha length e indici numerici
Stringhe: hanno length e indici numerici
Arguments: l’oggetto arguments nelle funzioni

Differenze importanti

Gli array reali hanno metodi speciali che non esistono su oggetti array-like o altri iterabili. Ad esempio, map, filter, reduce sono disponibili solo su array veri.

Per convertire un iterabile o un oggetto array-like in un array reale, puoi utilizzare Array.from():

1
const nodeList = document.querySelectorAll('li');
2
const array = Array.from(nodeList); // converte in array reale
3
// Ora puoi usare tutti i metodi array

Creare Array

Metodo principale: square brackets

Il modo più comune e raccomandato per creare un array è utilizzare le parentesi quadre:

1
const numbers = [1, 2, 3];
2
const hobbies = ['sports', 'cooking'];

Questo è il metodo più performante e più leggibile. Puoi anche avere una virgola finale per migliorare la leggibilità:

1
const data = [
2
  'item1',
3
  'item2',
4
  'item3', // virgola finale opzionale
5
];

Constructor Array

Puoi creare un array utilizzando il costruttore Array con la parola chiave new:

1
const numbers = new Array(); // array vuoto
2
const moreNumbers = new Array(1, 2, 3); // array con elementi

Comportamento speciale: se passi un singolo numero, viene interpretato come lunghezza dell’array, non come elemento:

1
const arr = new Array(5); // array vuoto con lunghezza 5, non [5]!
2
console.log(arr.length); // 5
3
console.log(arr[0]); // undefined

Questo comportamento può essere confuso, quindi è meglio evitare new Array() nella maggior parte dei casi.

Array.of()

Il metodo Array.of() crea un array dagli argomenti passati:

1
const numbers = Array.of(1, 2, 3); // [1, 2, 3]
2
const single = Array.of(5); // [5] (non array vuoto!)

Array.of() è più prevedibile di new Array() quando si passa un singolo numero, ma è comunque più lento delle parentesi quadre.

Array.from()

Array.from() è particolarmente utile perché converte un iterabile o un oggetto array-like in un array reale:

1
// Da stringa
2
const chars = Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']
3

4
// Da NodeList
5
const listItems = document.querySelectorAll('li');
6
const itemsArray = Array.from(listItems); // array reale
7

8
// Ora puoi usare metodi array
9
itemsArray.map(item => item.textContent);

Questo è estremamente utile quando lavori con strutture dati che non sono array ma che vuoi trattare come tali.

Cosa memorizzare negli Array

Tipi di dati

Gli array possono contenere qualsiasi tipo di dato:

1
const mixed = [
2
  10, // numero
3
  'hello', // stringa
4
  { name: 'Max' }, // oggetto
5
  true, // booleano
6
];

Array uniformi vs misti

Gli array possono essere uniformi (stesso tipo) o misti (tipi diversi):

1
// Array uniforme
2
const hobbies = ['sports', 'cooking', 'reading'];
3

4
// Array misto
5
const personalData = [
6
  30, // numero
7
  'Max', // stringa
8
  { age: 30, name: 'Max' }, // oggetto
9
];

Array multidimensionali

Gli array possono contenere altri array, creando strutture multidimensionali:

1
const analyticsData = [
2
  [1, 1.6],
3
  [-5.3, 5.4],
4
  [2.1, 3.2],
5
];
6

7
// Iterare array multidimensionali
8
for (const data of analyticsData) {
9
  for (const dataPoint of data) {
10
    console.log(dataPoint);
11
  }
12
}

Puoi avere array annidati a qualsiasi livello di profondità e mescolare array con altri tipi di dati.

Accesso basato su indice

Gli array sono basati su indice, con indici che iniziano da 0:

1
const personalData = [30, 'Max', { age: 30 }];
2

3
console.log(personalData[0]); // 30 (primo elemento)
4
console.log(personalData[1]); // 'Max' (secondo elemento)
5
console.log(personalData.length); // 3
6
// L'indice massimo è length - 1

Nota importante: la lunghezza dell’array è sempre maxIndex + 1. Se un array ha lunghezza 3, gli indici validi sono 0, 1 e 2.

Aggiungere e Rimuovere Elementi

push() - aggiungere alla fine

Il metodo push() aggiunge uno o più elementi alla fine dell’array:

1
const hobbies = ['sports', 'cooking'];
2
hobbies.push('reading');
3
console.log(hobbies); // ['sports', 'cooking', 'reading']
4

5
// Puoi aggiungere più elementi
6
hobbies.push('coding', 'music');

push() restituisce la nuova lunghezza dell’array.

pop() - rimuovere dalla fine

Il metodo pop() rimuove l’ultimo elemento dell’array e lo restituisce:

1
const hobbies = ['sports', 'cooking', 'reading'];
2
const lastHobby = hobbies.pop();
3
console.log(lastHobby); // 'reading'
4
console.log(hobbies); // ['sports', 'cooking']

unshift() - aggiungere all’inizio

Il metodo unshift() aggiunge uno o più elementi all’inizio dell’array:

1
const hobbies = ['sports', 'cooking'];
2
hobbies.unshift('coding');
3
console.log(hobbies); // ['coding', 'sports', 'cooking']

unshift() restituisce la nuova lunghezza dell’array.

shift() - rimuovere dall’inizio

Il metodo shift() rimuove il primo elemento dell’array e lo restituisce:

1
const hobbies = ['coding', 'sports', 'cooking'];
2
const firstHobby = hobbies.shift();
3
console.log(firstHobby); // 'coding'
4
console.log(hobbies); // ['sports', 'cooking']

Perché “shift” e “unshift”?

I nomi derivano dall’operazione di spostamento degli elementi:

shift: sposta tutti gli elementi di una posizione a sinistra, eliminando il primo
unshift: sposta tutti gli elementi di una posizione a destra, inserendo un nuovo elemento all’inizio

Considerazioni sulle prestazioni

push() e pop() sono più veloci di unshift() e shift() perché:

push/pop operano solo sull’ultimo elemento
unshift/shift devono spostare tutti gli elementi dell’array

Usa unshift/shift solo quando necessario.

Modificare elementi esistenti

Puoi modificare elementi direttamente tramite indice:

1
const hobbies = ['sports', 'cooking'];
2
hobbies[1] = 'reading';
3
console.log(hobbies); // ['sports', 'reading']

Puoi anche assegnare a indici che non esistono ancora:

1
const hobbies = ['sports', 'cooking'];
2
hobbies[5] = 'reading';
3
console.log(hobbies); // ['sports', 'cooking', empty × 3, 'reading']
4
console.log(hobbies[3]); // undefined

Questo crea “buchi” nell’array ed è generalmente sconsigliato.

splice() - metodo versatile

Cos’è splice

Il metodo splice() è estremamente versatile e permette di:

Inserire elementi in posizioni specifiche
Rimuovere elementi
Sostituire elementi

Sintassi

1
array.splice(startIndex, deleteCount, ...itemsToInsert);

startIndex: indice da cui iniziare (incluso)
deleteCount: numero di elementi da rimuovere
itemsToInsert: elementi da inserire (opzionale)

Inserire elementi

1
const hobbies = ['sports', 'cooking'];
2
hobbies.splice(1, 0, 'reading'); // inserisce 'reading' all'indice 1
3
console.log(hobbies); // ['sports', 'reading', 'cooking']

Rimuovere elementi

1
const hobbies = ['sports', 'reading', 'cooking'];
2
hobbies.splice(0, 1); // rimuove 1 elemento dall'indice 0
3
console.log(hobbies); // ['reading', 'cooking']
4

5
// Rimuovere tutti gli elementi da un indice in poi
6
hobbies.splice(1); // rimuove tutto dall'indice 1 in poi
7
console.log(hobbies); // ['reading']

Sostituire elementi

1
const hobbies = ['sports', 'cooking'];
2
hobbies.splice(1, 1, 'reading'); // sostituisce 'cooking' con 'reading'
3
console.log(hobbies); // ['sports', 'reading']

Indici negativi

splice() supporta indici negativi che contano dalla fine:

1
const hobbies = ['sports', 'cooking', 'reading'];
2
hobbies.splice(-1, 1); // rimuove l'ultimo elemento
3
console.log(hobbies); // ['sports', 'cooking']

Valore di ritorno

splice() restituisce un array contenente gli elementi rimossi:

1
const hobbies = ['sports', 'cooking', 'reading'];
2
const removed = hobbies.splice(0, 2);
3
console.log(removed); // ['sports', 'cooking']
4
console.log(hobbies); // ['reading']

slice() - copiare e selezionare

Copiare un array

slice() senza argomenti crea una copia completa dell’array:

1
const testResults = [1, 5.3, 1.5, 10.99, 1.5];
2
const storedResults = testResults.slice();
3
console.log(storedResults); // nuovo array indipendente

Questo è utile perché gli array sono reference values. Con slice() ottieni un nuovo array con un nuovo indirizzo in memoria.

Selezionare un range

slice() può selezionare una porzione dell’array:

1
const testResults = [1, 5.3, 1.5, 10.99, 1.5];
2

3
// slice(startIndex, endIndex)
4
// startIndex incluso, endIndex escluso
5
const selected = testResults.slice(0, 2);
6
console.log(selected); // [1, 5.3]
7

8
// Da un indice fino alla fine
9
const fromIndex = testResults.slice(2);
10
console.log(fromIndex); // [1.5, 10.99, 1.5]
11

12
// Con indici negativi
13
const lastTwo = testResults.slice(-2);
14
console.log(lastTwo); // [10.99, 1.5]

slice() non modifica l’originale

Importante: slice() non modifica l’array originale, restituisce sempre un nuovo array.

concat() - concatenare array

Il metodo concat() combina array esistenti creando un nuovo array:

1
const testResults = [1, 5.3, 1.5];
2
const moreResults = [10.99, 1.5];
3
const allResults = testResults.concat(moreResults);
4
console.log(allResults); // [1, 5.3, 1.5, 10.99, 1.5]

Differenza con push()

push() aggiunge un array come elemento singolo (creando un array annidato), mentre concat() estrae gli elementi:

1
const arr1 = [1, 2];
2
const arr2 = [3, 4];
3

4
arr1.push(arr2); // [1, 2, [3, 4]] - array annidato
5
arr1.concat(arr2); // [1, 2, 3, 4] - elementi estratti

Vantaggi

concat() è utile quando:

Vuoi combinare array senza modificare gli originali
Hai bisogno di un nuovo array indipendente
Vuoi evitare mutazioni accidentali

Trovare Elementi negli Array

indexOf() e lastIndexOf()

indexOf() restituisce l’indice del primo elemento che corrisponde al valore cercato:

1
const testResults = [1, 5.3, 1.5, 10.99, 1.5];
2
const index = testResults.indexOf(1.5);
3
console.log(index); // 2
4

5
// Se non trovato, restituisce -1
6
const notFound = testResults.indexOf(99);
7
console.log(notFound); // -1

lastIndexOf() cerca dalla fine:

1
const testResults = [1, 5.3, 1.5, 10.99, 1.5];
2
const lastIndex = testResults.lastIndexOf(1.5);
3
console.log(lastIndex); // 4

Limitazione: funzionano solo con primitive values, non con oggetti.

find() e findIndex()

Per oggetti o valori complessi, usa find() e findIndex():

1
const personData = [
2
  { name: 'Max', age: 30 },
3
  { name: 'Manuel', age: 31 },
4
];
5

6
// find() restituisce l'elemento trovato
7
const manuel = personData.find(person => person.name === 'Manuel');
8
console.log(manuel); // { name: 'Manuel', age: 31 }
9

10
// findIndex() restituisce l'indice
11
const manuelIndex = personData.findIndex(person => person.name === 'Manuel');
12
console.log(manuelIndex); // 1

La funzione passata a find() viene eseguita su ogni elemento e deve restituire true per l’elemento cercato.

Importante: find() restituisce lo stesso oggetto presente nell’array, non una copia. Modificarlo modificherà anche l’originale.

includes()

includes() verifica se un valore è presente nell’array:

1
const testResults = [1, 5.3, 1.5, 10.99];
2
const hasValue = testResults.includes(10.99);
3
console.log(hasValue); // true

È equivalente a indexOf(value) !== -1 ma più leggibile.

forEach() - iterare con accesso all’indice

forEach() è un’alternativa ai loop for/of che fornisce accesso all’indice:

1
const prices = [10.99, 5.99, 3.99, 6.59];
2
const tax = 0.19;
3

4
prices.forEach((price, index, array) => {
5
  const taxAdjustedPrice = price * (1 + tax);
6
  console.log(`Price ${index}: ${taxAdjustedPrice}`);
7
});

La funzione callback riceve:

Valore corrente: l’elemento dell’array
Indice: l’indice corrente
Array completo: l’array originale (raramente usato)

Quando usare forEach

Usa forEach() quando:

Hai bisogno dell’indice durante l’iterazione
Preferisci un approccio più funzionale ai loop
Vuoi trasformare elementi in oggetti con informazioni aggiuntive

map() - trasformare array

map() crea un nuovo array trasformando ogni elemento:

1
const prices = [10.99, 5.99, 3.99];
2
const tax = 0.19;
3

4
const taxAdjustedPrices = prices.map((price, index) => {
5
  return {
6
    index: index,
7
    taxAdjustedPrice: price * (1 + tax),
8
  };
9
});
10

11
console.log(taxAdjustedPrices);
12
// [{ index: 0, taxAdjustedPrice: 13.08 }, ...]

Differenza con forEach

forEach: esegue codice per ogni elemento, non restituisce nulla
map: restituisce un nuovo array con elementi trasformati

Vantaggi di map

Non modifica l’array originale
Restituisce un nuovo array pronto all’uso
Codice più conciso e leggibile
Può essere concatenato con altri metodi

sort() e reverse()

sort()

sort() ordina l’array in place (modifica l’originale):

1
const prices = [10.99, 5.99, 3.99, 6.59];
2
prices.sort(); // ordina come stringhe!
3
console.log(prices); // [10.99, 3.99, 5.99, 6.59] - non corretto!

Per ordinare correttamente i numeri, passa una funzione di confronto:

1
const prices = [10.99, 5.99, 3.99, 6.59];
2
prices.sort((a, b) => {
3
  if (a > b) return 1; // a viene dopo b
4
  if (a === b) return 0; // stesso ordine
5
  return -1; // a viene prima di b
6
});
7
console.log(prices); // [3.99, 5.99, 6.59, 10.99]

Versione più concisa:

1
prices.sort((a, b) => a - b); // ordine crescente
2
prices.sort((a, b) => b - a); // ordine decrescente

reverse()

reverse() inverte l’ordine degli elementi:

1
const prices = [3.99, 5.99, 6.59, 10.99];
2
prices.reverse();
3
console.log(prices); // [10.99, 6.59, 5.99, 3.99]

Nota: invece di ordinare e poi invertire, è meglio modificare la logica di sort().

filter() - filtrare elementi

filter() crea un nuovo array contenente solo gli elementi che soddisfano una condizione:

1
const prices = [10.99, 5.99, 3.99, 6.59];
2
const filteredPrices = prices.filter(price => price > 6);
3
console.log(filteredPrices); // [10.99, 6.59]

La funzione passata a filter() deve restituire true per gli elementi da mantenere, false per quelli da escludere.

Caratteristiche

Non modifica l’array originale
Restituisce un nuovo array
Utile per ridurre il numero di elementi in base a criteri

reduce() - ridurre a un valore

reduce() riduce un array a un singolo valore:

1
const prices = [10.99, 5.99, 3.99, 6.59];
2
const sum = prices.reduce((prevValue, curValue) => {
3
  return prevValue + curValue;
4
}, 0); // 0 è il valore iniziale
5

6
console.log(sum); // 27.56

Come funziona

Prima esecuzione: prevValue = valore iniziale (0), curValue = primo elemento
Esecuzioni successive: prevValue = risultato precedente, curValue = elemento corrente
Risultato finale: il valore restituito dall’ultima esecuzione

Sintassi concisa

1
const sum = prices.reduce((prev, cur) => prev + cur, 0);

Altri usi di reduce

reduce() può essere usato per:

Sommare valori
Trovare massimo/minimo
Contare occorrenze
Trasformare array in oggetti
Qualsiasi operazione che combina elementi

Arrow Functions con Array Methods

Le arrow functions rendono il codice con i metodi array molto più conciso:

1
// Versione completa
2
const filtered = prices.filter(function(price) {
3
  return price > 6;
4
});
5

6
// Con arrow function
7
const filtered = prices.filter(price => price > 6);

Vantaggi

Più breve: meno codice da scrivere
Più leggibile: quando la logica è semplice
Return implicito: con una singola espressione

Quando usare arrow functions

Usa arrow functions quando:

La funzione è semplice e breve
Non hai bisogno di this binding
Vuoi codice più conciso

Chaining Methods

Puoi concatenare i metodi array uno dopo l’altro:

1
const originalArray = [
2
  { price: 10.99 },
3
  { price: 5.99 },
4
  { price: 29.99 },
5
];
6

7
const sum = originalArray
8
  .map(obj => obj.price)
9
  .reduce((sumVal, curVal) => sumVal + curVal, 0);
10

11
console.log(sum); // 46.97

Ogni metodo restituisce un array (o valore), quindi puoi chiamare il metodo successivo direttamente sul risultato.

Vantaggi

Codice più conciso
Evita variabili intermedie non necessarie
Leggibilità migliorata per trasformazioni complesse

Metodi String: split() e join()

split() - da stringa ad array

split() divide una stringa in un array usando un separatore:

1
const data = 'New York;10.99;2000';
2
const transformedData = data.split(';');
3
console.log(transformedData); // ['New York', '10.99', '2000']

Puoi specificare un limite opzionale:

1
const text = 'a,b,c,d';
2
const firstTwo = text.split(',', 2); // ['a', 'b']

join() - da array a stringa

join() unisce gli elementi di un array in una stringa:

1
const nameFragments = ['Max', 'Schwarz'];
2
const fullName = nameFragments.join(' '); // 'Max Schwarz'
3
const withComma = nameFragments.join(); // 'Max,Schwarz' (virgola di default)

Utilizzo pratico

Questi metodi sono utili per:

Parsing di dati CSV
Costruire stringhe da array
Trasformare dati tra formati stringa e array

Spread Operator

Cos’è lo spread operator

Lo spread operator (...) estrae tutti gli elementi da un array:

1
const nameFragments = ['Max', 'Schwarz'];
2
const copiedFragments = [...nameFragments];
3
console.log(copiedFragments); // nuovo array indipendente

Copiare array

Lo spread operator è un modo semplice per copiare array:

1
const hobbies = ['sports', 'cooking'];
2
const copiedHobbies = [...hobbies];
3

4
hobbies.push('reading');
5
console.log(copiedHobbies); // ['sports', 'cooking'] - non modificato

Passare argomenti a funzioni

Lo spread operator è utile quando una funzione richiede argomenti separati invece di un array:

1
const prices = [10.99, 5.99, 3.99];
2
const minPrice = Math.min(...prices); // invece di Math.min(10.99, 5.99, 3.99)
3
console.log(minPrice); // 3.99

Limitazione: copia superficiale

Lo spread operator crea una copia superficiale. Per array di oggetti, gli oggetti stessi non vengono copiati:

1
const persons = [
2
  { name: 'Max', age: 30 },
3
  { name: 'Manuel', age: 31 },
4
];
5

6
const copiedPersons = [...persons];
7
persons[0].age = 31; // modifica anche copiedPersons!
8
console.log(copiedPersons[0].age); // 31

Per copiare anche gli oggetti, usa map():

1
const copiedPersons = persons.map(person => ({
2
  name: person.name,
3
  age: person.age,
4
}));

Array Destructuring

Cos’è la destructuring

La destructuring permette di estrarre elementi da un array in variabili separate:

1
const nameData = ['Max', 'Schwarz'];
2
const [firstName, lastName] = nameData;
3
console.log(firstName); // 'Max'
4
console.log(lastName); // 'Schwarz'

Vantaggi

Invece di:

1
const firstName = nameData[0];
2
const lastName = nameData[1];

Puoi scrivere:

1
const [firstName, lastName] = nameData;

Rest operator nella destructuring

Puoi raccogliere gli elementi rimanenti con il rest operator:

1
const nameData = ['Max', 'Schwarz', 'Mr', 30];
2
const [firstName, lastName, ...otherInfo] = nameData;
3
console.log(otherInfo); // ['Mr', 30]

Utilizzo pratico

La destructuring è utile quando:

Ricevi dati come array ma vuoi lavorare con variabili separate
Leggi valori da funzioni che restituiscono array
Vuoi codice più leggibile e conciso

Sets

Cos’è un Set

Un Set è una struttura dati che memorizza valori unici. A differenza degli array:

Nessun duplicato: ogni valore può apparire solo una volta
Ordine non garantito: l’ordine degli elementi può cambiare
Nessun accesso per indice: non puoi accedere agli elementi tramite indice

Creare un Set

1
const ids = new Set(); // Set vuoto
2
const idsWithData = new Set([1, 2, 3]); // Set con valori iniziali

Metodi principali

1
const ids = new Set([1, 2, 3]);
2

3
// Aggiungere valori
4
ids.add(4);
5
ids.add(2); // ignorato, già presente
6

7
// Verificare esistenza
8
ids.has(2); // true
9

10
// Eliminare valori
11
ids.delete(2);
12

13
// Dimensione
14
ids.size; // numero di elementi

Iterare un Set

1
const ids = new Set(['hi', 'from', 'set']);
2

3
// Usando entries()
4
for (const entry of ids.entries()) {
5
  console.log(entry); // ['hi', 'hi'] - valore ripetuto due volte
6
  console.log(entry[0]); // 'hi' - il valore effettivo
7
}

Quando usare Set

Usa Set quando:

Hai bisogno di valori unici
Vuoi verificare rapidamente l’esistenza di un valore
Non ti interessa l’ordine degli elementi
Non hai bisogno di accesso per indice

Maps

Cos’è una Map

Una Map è una struttura dati che memorizza coppie chiave-valore. A differenza degli oggetti:

Chiavi di qualsiasi tipo: puoi usare oggetti, array, numeri come chiavi
Ordine garantito: l’ordine delle inserzioni è preservato
Metodi dedicati: metodi specifici per gestire le coppie

Creare una Map

1
const personData = new Map();
2

3
// Inizializzare con dati
4
const personData = new Map([
5
  [person1, [{ date: 'yesterday', price: 10 }]],
6
]);

Metodi principali

1
const personData = new Map();
2

3
// Aggiungere coppie chiave-valore
4
personData.set(person1, [{ date: 'yesterday', price: 10 }]);
5
personData.set(person2, [{ date: 'two weeks ago', price: 100 }]);
6

7
// Ottenere valore per chiave
8
const purchases = personData.get(person1);
9

10
// Verificare esistenza chiave
11
personData.has(person1); // true
12

13
// Eliminare coppia
14
personData.delete(person1);
15

16
// Dimensione
17
personData.size; // numero di coppie

Iterare una Map

1
const personData = new Map([
2
  [person1, purchases1],
3
  [person2, purchases2],
4
]);
5

6
// Iterare tutte le entry (chiave-valore)
7
for (const [key, value] of personData.entries()) {
8
  console.log(key, value);
9
}
10

11
// Solo le chiavi
12
for (const key of personData.keys()) {
13
  console.log(key);
14
}
15

16
// Solo i valori
17
for (const value of personData.values()) {
18
  console.log(value);
19
}

Quando usare Map

Usa Map quando:

Hai bisogno di chiavi di tipo complesso (oggetti, array)
L’ordine delle inserzioni è importante
Gestisci grandi quantità di dati chiave-valore
Aggiungi/rimuovi coppie frequentemente

Map vs Object

Caratteristica	Map	Object
Chiavi	Qualsiasi tipo	Solo stringhe, numeri, symbol
Ordine	Garantito	Non garantito
Prestazioni	Migliori per grandi quantità	Migliori per piccole quantità
Metodi	Metodi dedicati	Metodi integrati limitati

WeakSet e WeakMap

Cos’è WeakSet

WeakSet è una versione specializzata di Set che:

Accetta solo oggetti come valori
Permette la garbage collection automatica degli oggetti non più referenziati
Non permette di iterare o ottenere tutti gli elementi

Creare WeakSet

1
const persons = new WeakSet();
2
const person = { name: 'Max' };
3

4
persons.add(person);
5
persons.has(person); // true
6

7
// Se l'oggetto non è più referenziato, può essere garbage collected
8
person = null; // WeakSet non impedisce la garbage collection

Quando usare WeakSet

Usa WeakSet quando:

Memorizzi oggetti temporanei
Vuoi che gli oggetti non referenziati vengano automaticamente rimossi
Non hai bisogno di iterare o contare gli elementi

Cos’è WeakMap

WeakMap è simile a WeakSet ma per coppie chiave-valore:

Le chiavi devono essere oggetti
I valori possono essere qualsiasi tipo
Permette garbage collection automatica delle chiavi non referenziate

Creare WeakMap

1
const personData = new WeakMap();
2
const person = { name: 'Max' };
3

4
personData.set(person, [{ date: 'yesterday', price: 10 }]);
5
const purchases = personData.get(person);
6

7
// Se person non è più referenziato, la coppia può essere garbage collected
8
person = null;

Quando usare WeakMap

Usa WeakMap quando:

Vuoi associare dati temporanei a oggetti
Non vuoi impedire la garbage collection degli oggetti chiave
Non hai bisogno di iterare o contare le coppie

Limitazioni

WeakSet e WeakMap hanno limitazioni intenzionali:

Non puoi iterare gli elementi
Non puoi ottenere la dimensione (size)
Non puoi ottenere tutti gli elementi
Solo metodi: add, delete, has (WeakSet) o set, get, delete, has (WeakMap)

Queste limitazioni esistono perché JavaScript non può garantire quali elementi sono ancora presenti se alcuni sono stati garbage collected.

Conclusione

Questo modulo ha esplorato in dettaglio gli array e le strutture dati iterabili in JavaScript:

Array: la struttura dati principale con molti metodi utili
Metodi array: map, filter, reduce, forEach e molti altri per trasformare e manipolare dati
Sintassi avanzata: spread operator e destructuring per codice più conciso
Sets: per valori unici
Maps: per coppie chiave-valore flessibili
WeakSet/WeakMap: per gestione avanzata della memoria

Quando usare cosa

Array: nella maggior parte dei casi, quando hai bisogno di una lista ordinata di elementi
Set: quando hai bisogno di valori unici e verifiche rapide di esistenza
Map: quando hai bisogno di chiavi complesse o grandi quantità di dati chiave-valore
WeakSet/WeakMap: in applicazioni avanzate con gestione automatica della memoria

Gli array rimangono la struttura dati più importante e utilizzata, ma comprendere Sets e Maps ti dà strumenti aggiuntivi per risolvere problemi specifici in modo efficiente.