TechCorso di programmazioneNewsProfessione web

Mini guida su ES6 – Spread Syntax

Mini guida su ES6 – Spread Syntax 1

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"]

 

Mini guida su ES6 – Spread Syntax 2

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

Leave a Response

Valerio Pisapia
Valerio Pisapia, 34 anni, laureato in Ingegneria Informatica all’Università di Napoli Federico II. Ha esperienza decennale nello sviluppo mobile e web in ambito internazionale. Fornisce training e mentoring per progetti di svariata natura. Founder di una startup IT in Svizzera che si occupa di consulenza specializzata in ambito Web.
Translate »

Su questo sito utilizziamo strumenti nostri o di terze parti che memorizzano piccoli file (cookie) sul tuo dispositivo. I cookie sono normalmente usati per permettere al sito di funzionare correttamente (cookie tecnici), per generare statistiche di uso/navigazione (cookie statistici) e per pubblicizzare opportunamente i nostri servizi/prodotti (cookie di profilazione). Possiamo usare direttamente i cookie tecnici, ma hai il diritto di scegliere se abilitare o meno i cookie statistici e di profilazioneAbilitando questi cookie, ci aiuti ad offrirti una esperienza migliore con noi. 

 

>> Cookie Policy <<