Rest Parameters and Spread Syntax in JavaScript

JavaScript provides Rest Parameters (...) and Spread Syntax (...) to handle variable numbers of arguments and spread arrays/objects into individual elements.

Rest Parameters (`...`)

Rest parameters allow a function to accept any number of arguments and store them in an array.

Example: Function with Rest Parameters

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

console.log(sum(1, 2, 3, 4)); // Output: 10
console.log(sum(5, 10, 15)); // Output: 30

How it works?

The ...numbers collects all arguments into an array.
We use reduce() to sum the values.

Rest Parameters with Other Arguments

function greet(message, ...names) {
    return `${message} ${names.join(", ")}`;
}

console.log(greet("Hello", "Alice", "Bob", "Charlie"));
// Output: "Hello Alice, Bob, Charlie"

Rules for Rest Parameters: ✔ Must be the last parameter in the function.
✔ Only one rest parameter is allowed per function.

Spread Syntax (`...`)

The spread operator (...) expands iterable objects (arrays, strings, objects, etc.) into individual elements.

Example: Spreading an Array into Arguments

const numbers = [1, 2, 3, 4];
console.log(Math.max(...numbers)); // Output: 4

How it works?

Math.max() normally expects separate arguments.
...numbers spreads the array elements into separate arguments.

Combining Arrays

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const combined = [...arr1, ...arr2];
console.log(combined); // Output: [1, 2, 3, 4, 5, 6]

✔ Spread syntax makes it easy to merge arrays!

Copying Arrays (Avoid Mutating Original)

const original = [10, 20, 30];
const copy = [...original];

copy.push(40);
console.log(original); // Output: [10, 20, 30] (unchanged)
console.log(copy);     // Output: [10, 20, 30, 40]

✔ Unlike arr2 = arr1 (which creates a reference), [...] creates a new copy.

Spreading Objects (`...`)

We can spread object properties into a new object.

Cloning an Object

const user = { name: "Alice", age: 25 };
const clone = { ...user };

console.log(clone); // Output: { name: "Alice", age: 25 }

Merging Objects

const user = { name: "Alice", age: 25 };
const extraInfo = { city: "New York", country: "USA" };

const merged = { ...user, ...extraInfo };
console.log(merged); 
// Output: { name: "Alice", age: 25, city: "New York", country: "USA" }

Overriding Properties

const user = { name: "Alice", age: 25 };
const updatedUser = { ...user, age: 30 }; // Age is updated

console.log(updatedUser); // Output: { name: "Alice", age: 30 }

✔ The last spread property takes precedence.

🎯 Summary

✔ Rest Parameters (...) collect multiple arguments into an array.
✔ Spread Syntax (...) expands arrays/objects into individual elements.
✔ Use cases:

Rest parameters: Handle dynamic function arguments.
Spread: Clone, merge, and expand arrays/objects.

🚀 These features make JavaScript code more concise and flexible! Let me know if you need more examples. 😊

Souy Soeng

Rest Parameters and Spread Syntax in JavaScript