Parametri resto e operatore di espansione

Se provassimo ad accedere all’oggetto arguments all’interno di una funzione freccia, questo preleverebbe le variabili dal contesto esterno.

Un esempio:

function f() {
  let showArg = () => alert(arguments[0]);
  showArg();
}

f(1); // 1

In sostanza, le funzioni freccia non hanno un proprio this. Ora sappiamo anche che non possiedono nemmeno l’oggetto arguments.

Operatore di espansione

Abbiamo appena visto come ottenere un array da una lista di parametri.

In certe situazioni abbiamo bisogno di fare esattamente il contrario.

Ad esempio, esempio esiste una funzione integrata Math.max che ritorna il numero maggiore di una lista:

alert( Math.max(3, 5, 1) ); // 5

Ora ipotizziamo di avere un array [3, 5, 1]. Come invochiamo Math.max su un array?

Il semplice passaggio “cosi com’è” non funzionerebbe, perché Math.max si aspetta di ricevere una lista di argomenti numerici, non un singolo array:

let arr = [3, 5, 1];

alert( Math.max(arr) ); // NaN

E ovviamente non possiamo nemmeno elencare manualmente tutti gli elementi in questo modo: Math.max(arr[0], arr[1], arr[2]), poiché il numero di elementi contenuti nell’array potrebbe non essere noto. In ogni caso non sarebbe nemmeno elegante.

L’operatore di espansione ci aiuta in questo! La sintassi è simile a quella dei parametri resto, utilizza ..., ma fa esattamente l’opposto.

Quando si utilizza ...arr in una chiamata a funzione, l’array arr verrà “espanso” in una lista di argomenti.

Nel caso Math.max:

let arr = [3, 5, 1];

alert( Math.max(...arr) ); // 5 (spread turns array into a list of arguments)

Possiamo anche fornire più oggetti iterabili in questo modo:

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];

alert( Math.max(...arr1, ...arr2) ); // 8

Possiamo anche combinare l’operatore di espansione con valori “normali”:

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];

alert( Math.max(1, ...arr1, 2, ...arr2, 25) ); // 25

Inoltre, l’operatore di spread può essere utilizzato anche per fondere array:

let arr = [3, 5, 1];
let arr2 = [8, 9, 15];

let merged = [0, ...arr, 2, ...arr2];

alert(merged); // 0,3,5,1,2,8,9,15 (0, then arr, then 2, then arr2)

Negli esempi sopra abbiamo utilizzato un array per dimostrare l’operatore di espansione, ma funziona correttamente con qualsiasi oggetto iterabile.

Ad esempio, in questo esempio utilizziamo l’operatore di espansione per convertire la stringa in un array di caratteri:

let str = "Hello";

alert( [...str] ); // H,e,l,l,o

L’operatore di spread internamente sfrutta gli iteratori per ottenere gli elementi, proprio come for..of.

Quindi, per una stringa, for..of ritorna dei caratteri e ...str diventa "H","e","l","l","o". La lista di caratteri viene passata per inizializzare un array [...str].

Per quest’attività in particolare potremmo anche utilizzare Array.from, poiché converte un oggetto iterabile (come una stringa) in un array:

let str = "Hello";

// Array.from converts an iterable into an array
alert( Array.from(str) ); // H,e,l,l,o

Il risultato è lo stesso ottenuto con [...str].

C’è però una sottile differenza tra Array.from(obj) e [...obj]:

• Array.from funziona sia con array che con oggetti iterabili.
• L’operatore di espansione opera solamente su oggetti iterabili.

Quindi, per convertire qualcosa in array, la scelta migliore è Array.from.

Copiare un array/oggetto

Ricordate quando abbiamo parlato del metodo Object.assign()?

E’ possibile fare la stessa cosa con l’operatore di espansione (spread).

let arr = [1, 2, 3];
let arrCopy = [...arr]; // espande l'array in una lista di parametri
                        // successivamente inserisce il risultato in un nuovo array

// l'array ha gli stessi contenuti?
alert(JSON.stringify(arr) === JSON.stringify(arrCopy)); // true

// gli array sono uguali?
alert(arr === arrCopy); // false (non contengono lo stesso riferimento)

// la modifica dell'array iniziale non modifica la copia:
arr.push(4);
alert(arr); // 1, 2, 3, 4
alert(arrCopy); // 1, 2, 3

Da notare che è possibile fare la stessa cosa per copiare un oggetto:

let obj = { a: 1, b: 2, c: 3 };
let objCopy = { ...obj }; // espande l'oggetto in una lista di parametri
                          // successivamente inserisce il risultato in un oggetto

// l'oggetto ha gli stessi contenuti?
alert(JSON.stringify(obj) === JSON.stringify(objCopy)); // true

// gli oggetti sono uguali?
alert(obj === objCopy); // false (non contengono lo stesso riferimento)

// modificando l'oggetto iniziale non viene modificata la copia:
obj.d = 4;
alert(JSON.stringify(obj)); // {"a":1,"b":2,"c":3,"d":4}
alert(JSON.stringify(objCopy)); // {"a":1,"b":2,"c":3}

Questa modalità di copia di un oggetto è molto più rapida rispetto a let objCopy = Object.assign({}, obj); o per un array let arrCopy = Object.assign([], arr); per questo preferiamo utilizzarla quando possibile.

Riepilogo

Quando nel codice incontriamo: "...", potrebbe essere sia i l’operatore di resto dei parametri che l’operatore di espansione.

Un modo semplice per distinguere i due casi:

• Quando ... si trova alla fine della lista dei parametri della funzione, allora è l’operatore “resto dei parametri”, il quale raccoglie tutti i parametri forniti (sotto forma di array) alla funzione che non trovano spazio nelle variabili.
• Quando ... si trova in una chiamata a funzione o situazioni simili, viene chiamato “operatore operatore di espansione”, che espande un array in una lista.

Casi d’uso:

• L’operatore parametri di resto viene utilizzato per creare una funzione che accetta un qualsiasi numero di argomenti.
• L’operatore di espansione viene utilizzato per passare un array ad una funzione che richiede una lista di argomenti.

Insieme questi due operatori consentono di lavorare facilmente con le funzioni e i parametri passati.

Tutti gli argomenti di una funzione sono accessibili anche con il metodo “vecchio stile” arguments: un oggetto simil-array.