Con l’avvento di ES7 abbiamo a disposizione un nuovo tipo di operatore che consiste in tre puntini “…”. Questo a seconda dell’utilizzo può aggiungere oggetti (spread) o selezionare determinati oggetti (rest).
Operatore Spread
Vediamo questo esempio, abbiamo un array di numeri definito, con Javascript classico potremo aggiungere in questo modo.
const numeri = [1, 2, 3];
// aggiungiamo un nuovo numero
numeri.push(4);
console.log(numeri);
// otteniamo [1, 2, 3, 4]Con l’operatore spread potremo scriverlo così:
const numeri = [1, 2, 3];
const nuoviNumeri = […numeri, 4];
console.log(nuoviNumeri);
// otteniamo [1, 2, 3, 4]Come si può vedere ci sono delle significative differenze anche dinnanzi ad un esempio piuttosto banale come questo. Abbiamo infatti definito una variabile “nuoviNumeri” a cui abbiamo sommato un array con dei valori. Questo in un’ottica più complessa di struttura, può venire in aiuto.
Operatore Rest
Vediamo l’esempio contrario, cioè quello di estrazione da un oggetto, che non ci è noto nella composizione dei suoi valori (in questo caso numerici) ne nella sua lunghezza. Ma noi vogliamo estrarre un determinato valore se presente.
const filter = (…args) => {
return args.filter(el => el === 2);
}
console.log(filter(1,2,3));
// il risultato sarà [2]Se all’esempio sopra, mettiamo un valore 4 anziché 2, l’array ci verrà tornato come vuoto. Quindi di fatto “…args” è un array, nell’esempio di cui sopra, non noto nella sua composizione.
Sono due esempi banali, ma calati nel contesto di una applicazione ben più complicata ci possono tornare utili in molti contesti.