〰️ Spread e Rest Syntax in JavaScript: Guida Completa con Esempi

In JavaScript, la spread syntax (...) e la rest syntax (...) condividono la stessa notazione, ma svolgono due funzioni opposte. Questo può causare confusione, soprattutto tra chi sta imparando il linguaggio o è alle prese con codice moderno. In questo articolo analizzeremo:

Cosa sono la spread syntax e la rest syntax
Le differenze principali
Quando e come usarle (con esempi dettagliati)
Vantaggi e casi d'uso
Quando evitarle

🔗 Ti piace Techelopment? Dai un'occhiata al sito per tutti i dettagli!

✅ Cosa sono Spread e Rest Syntax

🔹 Spread Syntax

La spread syntax permette di espandere un oggetto iterabile (come un array, un oggetto, una stringa) in elementi singoli.

Esempio con Array:

const fruits = ['apple', 'banana'];
const moreFruits = ['orange', ...fruits, 'kiwi'];

console.log(moreFruits); // ['orange', 'apple', 'banana', 'kiwi']

👉 In questo caso, ...fruits espande gli elementi dell’array originale all’interno del nuovo array.

Esempio con Oggetti:

const user = { name: 'Alice', age: 25 };
const updatedUser = { ...user, location: 'Paris' };

console.log(updatedUser);
// { name: 'Alice', age: 25, location: 'Paris' }

👉 ...user copia tutte le proprietà dell’oggetto user nel nuovo oggetto updatedUser.

🔸 Rest Syntax

La rest syntax permette di raccogliere più elementi in una singola struttura (array o oggetto), spesso utilizzata in parametri di funzione o nella destrutturazione.

Esempio nei Parametri di Funzione:

function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}

console.log(sum(1, 2, 3)); // 6

👉 Qui, ...numbers raccoglie tutti gli argomenti passati alla funzione in un array chiamato numbers.

Esempio con Destructuring di Array:

const [first, ...rest] = [10, 20, 30, 40];

console.log(first); // 10
console.log(rest);  // [20, 30, 40]

👉 ...rest cattura tutti gli elementi rimanenti dopo il primo.

Esempio con Destructuring di Oggetti:

const person = { name: 'Bob', age: 30, country: 'USA' };
const { name, ...otherDetails } = person;

console.log(name);         // Bob
console.log(otherDetails); // { age: 30, country: 'USA' }

🔍 Differenze tra Spread e Rest

Caratteristica	Spread Syntax	Rest Syntax
Scopo	Espandere elementi	Raccogliere elementi
Tipi supportati	Array, oggetti, stringhe	Array, oggetti (in destrutturazione)
Contesto d’uso tipico	Assegnazione, funzioni, merge	Parametri di funzione, destructuring
Posizione nell’espressione	A destra di `=` o in `return`	A sinistra di `=` in destructuring

🛠️ Quando usarli

🟢 Quando usare la Spread Syntax

Unire array:

const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = [...arr1, ...arr2]; // [1, 2, 3, 4]

Clonare array o oggetti (shallow copy):

const original = { a: 1, b: 2 };
const clone = { ...original };

Passare array come argomenti di funzione:

const nums = [5, 6, 7];
console.log(Math.max(...nums)); // 7

🟢 Quando usare la Rest Syntax

Raccogliere argomenti in funzione variadica:

function joinStrings(separator, ...words) {
  return words.join(separator);
}
console.log(joinStrings('-', 'a', 'b', 'c')); // "a-b-c"

Destrutturare array o oggetti parzialmente:
```
const [first, ...others] = [1, 2, 3];
```
Filtrare proprietà da un oggetto:
```
const { password, ...safeUser } = user;
```

⚠️ Quando non usarli

❌ Attenzione con oggetti nidificati:

Lo spread fa solo una shallow copy. Non clona in profondità:

const obj1 = { nested: { a: 1 } };
const obj2 = { ...obj1 };

obj2.nested.a = 999;
console.log(obj1.nested.a); // 999

👉 Se hai bisogno di una deep copy, usa librerie come Lodash o structuredClone.

❌ Non abusare di rest nei parametri se non necessario:

function example(a, ...args) {
  // se args non è usato, inutile dichiararlo
}

✅ Vantaggi

Spread Syntax:

Sintassi più chiara per il merge e la copia
Riduce l’uso di Object.assign() o metodi concat()
Ottima leggibilità

Rest Syntax:

Utile con funzioni a numero variabile di argomenti
Comoda per il pattern "exclusion" ({ a, ...rest })
Leggibile ed espressiva nella destrutturazione

🔚 Conclusione

La spread syntax e la rest syntax sono due potenti strumenti introdotti con ES6, che migliorano significativamente la scrittura di codice JavaScript più pulito, espressivo e flessibile.

Situazione	Usa
Espandere array/oggetti	Spread Syntax
Raccogliere più elementi	Rest Syntax
Copiare superficialmente	Spread Syntax
Filtrare proprietà/destructuring	Rest Syntax

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment

Techelopment

Cerca nel blog