〰️ Spread and Rest Syntax in JavaScript: A Complete Guide with Examples

In JavaScript, the spread syntax(...) and the rest syntax(...) share the same notation, but perform two opposite functions. This can cause confusion, especially among those learning the language or working with modern code. In this article we will analyze:

What are spread syntax and rest syntax
The main differences
When and how to use them (with detailed examples)
Benefits and use cases
When to avoid them

🔗 Do you like Techelopment? Take a look at website for all the details!

✅ What are Spread and Rest Syntax

🔹 Spread Syntax

The spread syntax allows you to expand an iterable object (such as an array, an object, a string) into single elements.

Example with Array:

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

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

👉 In this case, ...fruits expands the elements of the original array into the new array.

Example with Objects:

const user = { name: 'Alice', age: 25 };

const updatedUser = { ...user, location: 'Paris' };

console.log(updatedUser);

// { name: 'Alice', age: 25, location: 'Paris' }

👉 ...user copies all the properties of the user object to the new updatedUser object.

🔸 Rest Syntax

The rest syntax allows you to collect multiple elements in a single structure (array or object), often used in function parameters or in destructuring.

Example in Function Parameters:

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

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

👉 Here, ...numbers collects all the arguments passed to the function in an array called numbers.

Example with Array Destructuring:

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

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

👉 ...rest captures all remaining elements after the first.

Example with Object Destructuring:

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

const { name, ...otherDetails } = person;

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

🔍 Differences between Spread and Rest

Characterteristica	Spread Syntax	Rest Syntax
Purpose	Expand elements	Collect elements
Supported types	Arrays, objects, strings	Arrays, objects (in destructuring)
Typical usage context	Assignment, functions, merging	Function parameters, destructuring
Position in the expression	To the right of `=` or `return`	To the left of `=` in destructuring

🛠️ When to use them

🟢 When to use Spread Syntax

Merge arrays:

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

Clone arrays or objects (shallow copy):

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

Passing arrays as function arguments:

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

🟢 When to use Rest Syntax

Collecting arguments in variadic function:

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

Destructuring arrays or objects partially:
```
const [first, ...others] = [1, 2, 3];
```
Filtering properties from an object:
```
const { password, ...safeUser } = user;
```

⚠️ When not to use them

❌ Be careful with nested objects:

Spreading only does a shallow copy. Does not deep clone:

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

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

👉 If you need a deep copy, use libraries like Lodash or structuredClone.

❌ Don't overuse rest in parameters unless necessary:

function example(a, ...args) {
   // if args is not used, there's no need to declare it
}

✅ Advantages

Spread Syntax:

Clearer syntax for merging and copying
Reduces the use of Object.assign() or concat() methods
Excellent Readability

Rest Syntax:

Useful with functions with variable arguments
Convenient for the "exclusion" pattern ({ a, ...rest })
Readable and expressive in destructuring

🔚 Conclusion

The spread syntax and rest syntax are two powerful tools introduced with ES6, which significantly improve the writing of cleaner, more expressive, and more flexible JavaScript code.

Situation	Use
Expand arrays/objects	Spread Syntax
Collect more items	Rest Syntax
Copy superficially	Spread Syntax
Filter properties/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