Mini guida su ES6 – Spread Syntax

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 arr = ['a', 'b', 'c'];
var arr2 = [...arr];
console.log(arr2);

arr2.push('d');
console.log(arr);

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