Skip to content →

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

Published in Series

2 Comments

  1. […] Quando si passano i parametri in una funzione, normalmente ci si aspetta che la funzione crei una copia dei parametri da utilizzare all’interno del corpo della funzione. Tuttavia, poiché gli array sono variabili di riferimento, il riferimento che passiamo in una funzione sarà lo stesso riferimento utilizzato all’interno del corpo della funzione. Pertanto, quando eseguiamo operazioni come push() su quel riferimento, influisce anche sull’array originale al di fuori della funzione (argomento trattato già qui). […]

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *