In questo post, analizzeremo nel dettaglio le Spread Syntax con alcuni esempi.
Prima di tutto diamo una definizione generale della Spread Syntax:
- è semplicemente composta da tre punti: …
- Permette ad un iterabile di espandersi in posti dove sono previsti argomenti 0+.
La definizione è poco intuibile senza un contesto. Esploriamo alcuni casi d’uso per capire cosa significa effettivamente tale definizione.
Esempio 1 – Inseriamo un array
var mid = [3, 4];
var arr = [1, 2, mid, 5, 6];
console.log(arr);
In questo esempio non utilizziamo la spread syntax. L’obiettivo è quello di creare un nuovo array arr integrandolo con l’array mid.
Dallo snippet mostrato sopra otteniamo:
[1, 2, [3, 4], 5, 6]
Inserendo il mid array nell’array arr, otteniamo un array all’interno di un array. Tendenzialmente non ci sono errori ma non è assolutamente l’obiettivo che vogliamo raggiungere. Vogliamo ottere un array singolo con valori che vanno da 1 a 6.
Ecco che entra in scena la spread syntax:
var mid = [3, 4];
var arr = [1, 2, ...mid, 5, 6];
console.log(arr);
Il risultato sarà:
[1, 2, 3, 4, 5, 6]
Perfetto ed è quello che volevamo ottenere.
Come si può constatare, quando creiamo l’array arr e usiamo l’operatore spread sul mid, invece di essere inserito, il mid si espande. Questa espansione significa che ogni singolo elemento del mid è inserito nell’array arr.
Esempio 2 – Copia di un array
In JavaScript, non è possibile semplicemente copiare un array impostando una nuova variabile uguale a quella già esistente. Ad esempio, consideriamo questo snippet:
var arr = ['a', 'b', 'c'];
var arr2 = arr;
console.log(arr2);
Il risultato:
['a', 'b', 'c']
Ora, a prima vista, sembra che abbia funzionato: abbiamo copiato i valori di arr in arr2.
Ma analizziamo nel dettagli e vedremo che non è proprio così. Quando si lavora con oggetti in javascript (gli array sono un tipo di oggetto), l’assegnazione è fatta per riferimento, non per valore. Ciò significa che arr2 è stato assegnato allo stesso riferimento di arr.
In altre parole, tutto ciò che facciamo a arr2 influenzerà anche l’array arr originale (e viceversa).
Ad esempio:
var arr = ['a', 'b', 'c'];
var arr2 = arr;
arr2.push('d');
console.log(arr);
Sopra, abbiamo inserito un nuovo elemento d in arr2. Tuttavia, quando visualizzeremo il valore di arr, vedremo che anche il valore d è stato aggiunto a quell’array.
Facciamo l’identica cosa usando la spread syntax:
var arr = ['a', 'b', 'c'];
var arr2 = [...arr];
console.log(arr2);
arr2.push('d');
console.log(arr);
Ed ecco, il motivo per cui questo funziona è perché il valore di arr è espanso per riempire le parentesi della nostra definizione dell’array arr2. Stiamo assegnando ogni singolo valore di arr ad arr2 … da notare che stiamo lavorando su ogni singolo valore e quindi, non per riferimento come nel primo caso.
Esempio 3 – da una stringa ad un array
Come esempio finale, è possibile utilizzare la spread syntax per convertire una stringa in un array.
Il suo utilizzo è abbastanza banale come mostrato in questo snippet:
var str = "hello";
var chars = [...str];
console.log(chars);
Output: ["h", "e", "l", "l", "o"]
Spero questo articolo sia stato utile. Se si, condividilo con i tuoi amici, colleghi o con chi ritieni che possa essere interessato.
PS. Se sei interessato a conoscere in anticipo gli argomenti per i prossimi appuntamenti, ti consiglio di visitare il primo articolo
