Lo spread operator in Javascript
Con gli "spread operator", introdotti a partire da ECMAScript 6 (ES6), è possibile copiare tutto o parte di un esistente array o oggetto, in un'altro array o oggetto, combinare array o oggetti, e passare ad una funzione un array come argomento.
La notazione che identifica lo spread operator sono i tre punti ...
Lo spread operator e gli array
Vediamo subito un esempio pratico di utilizzo negli array.
Abbiamo due varabili array "numbersOne" e "numbersTwo". Creiamo una nuova variabile chiamata "numbersCombined" che combina le due variabili precedenti
<script>
const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [...numbersOne, ...numbersTwo];
console.log(numbersCombined);
</script>Se facciamo un console.log di "numbersCombined", vedremo il nuovo array
[ 1, 2, 3, 4, 5, 6 ]Lo spread operator è spesso utilizzato nella destrutturazione di array (ed oggetti), come in questo esempio
<script>
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;
console.log(rest);
</script>Destrutturando l'array "numbers", abbiamo ottenuto la variabile "one" con valore 1, la variabile "two" con valore 2, e la variabile "rest" con valore l'array degli elementi residui.
[3, 4, 5, 6]Vediamo un esempio di utilizzo di spread operator con una funzione
<script>
function pippo(a, b, ...args) {
console.log(args);
}
pippo(1, 2, 3, 4, 5);
</script>La funzione pippo riceve come parametri "a", "b", e ... lo spread operator "args": a vale 1, b vale 2, args è un array contente 3, 4 e 5.
Il risultato del console.log sarà infatti questo
[ 3, 4, 5 ]In questo ulteriore esempio vediamo come usare lo spread operator per inserire un array in un altro array
<script>
let x = ['A', 'B'];
let y = [...x, 'C', 'D'];
console.log(chars);
</script>Il risultato sarà questo array
["A", "B", "C", "D"]Infine vediamo come usare lo spread operator per copiare un array in un nuovo array
<script>
var punteggio = [50, 60, 70];
var copiapunteggio = [...punteggio ];
console.log(copiapunteggio);
</script>Il risultato sarà una variabile "copiapunteggio" che contiene lo stesso valore della variabile "punteggio"
[50, 60, 70]Lo spread operator e gli oggetti
Così come è possibile combinare due array, e possibile combinare due oggetti, come nel seguente esempio
<script>
const myCar = {
marca: 'Fiat',
modello: 'Musa',
colore: 'nero'
}
const updateCar = {
anno: 2002,
colore: 'giallo'
}
const myUpdatedCar = {...myCar , ...updateCar}
console.log(myUpdatedCar);
</script>Nella console vedremo il nuovo oggetto myUpdatedCar che non è altro che la combinazione dei due oggetti "myCar" e "updateCar"
{marca: "Lancia", modello: "Musa", anno: 2002, colore: "giallo"}Come puoi vedere, le proprietà dell'oggetto che hanno la stessa chiave (nel nostro esempio il "colore") vengono inserite una sola volta nel nuovo oggetto, con il valore dell'ultima proprietà considerata: ecco perchè nel nostro caso il colore è "giallo".
Vediamo un altro esempio in cui andiamo ad "inserire" un oggetto in un'altro
<script>
const persona = {nome:"paolo", cognome:"rossi"};
const persona2 = {... persona, citta:"vicenza"}
console.log(persona2);
</script>La variabile "persona2" avrà questo valore
{ nome: "paolo", cognome: "rossi", citta: "vicenza" }E con questo esempio concludiamo la lezione dededicata allo spread operator.
