JavaScript Fundamentals / Functions

Rest and Spread Operator

😴 JavaScript Rest and Spread Operators

JavaScript introduced the Rest Parameter and Spread Operator to make working with functions, arrays, and objects easier.

Although both use the same syntax (...), they have different purposes:

  • Rest Parameter (...) → Collects multiple values into an array or object.

  • Spread Operator (...) → Expands an array or object into individual elements.

Remember:
Rest = Collect 📥
Spread = Expand 📤

🧱 Rest Parameter

The Rest Parameter collects multiple arguments into a single array.

🎉 Example

Imagine you're hosting a party, but you don't know how many guests will arrive.

function welcomeGuests(...guests) {
    console.log("Welcome:", guests);
}

welcomeGuests("Alice", "Bob", "Charlie"); // Welcome: ["Alice", "Bob", "Charlie"]

🔍 Explanation

  • ...guests collects all the arguments into an array called guests.

🪄 Use Cases of Rest Parameter

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

console.log(greet("Hello", "Pranjal", "Tanamaya", "Sonam"));
// Hello, Pranjal and Tanamaya and Sonam

🔍 Explanation

  • greeting stores "Hello".

  • ...names collects the remaining arguments into an array.

  • join(" and ") joins the names into one string.

${} is used inside template literals to insert variables or expressions.

const { a, ...rest } = { a: 1, b: 2, c: 3 };

console.log(a); // 1
console.log(rest); // { b: 2, c: 3 }

🔍 Explanation

  • a extracts the value of property a.

  • ...rest collects the remaining properties into a new object.

Destructuring means unpacking values from an object or array into separate variables.

const [first, ...rest] = [1, 2, 3, 4];

console.log(first); // 1
console.log(rest); // [2, 3, 4]

🔍 Explanation

  • first stores the first element.

  • ...rest stores the remaining elements in a new array.

🆚 Object vs Array Destructuring with Rest

Feature

Object Destructuring

Array Destructuring

Syntax

{ a, ...rest }

[first, ...rest]

Works With

Objects ({})

Arrays ([])

Rest Result

Object

Array

Order Matters?

❌ No

✅ Yes

🧱 Spread Operator

The Spread Operator expands an array or object into individual elements or properties.

Example

const numbers = [1, 2, 3];

const newNumbers = [...numbers, 4, 5];

console.log(newNumbers); // [1, 2, 3, 4, 5]

🔍 Explanation

  • ...numbers expands the array.

  • The new array contains all elements of numbers followed by 4 and 5.

💠 Use Cases of Spread Operator

const a1 = [1, 2];
const a2 = [3, 4];

const merged = [...a1, ...a2];

console.log(merged); // [1, 2, 3, 4]

🔍 Explanation

  • ...a1 and ...a2 expand both arrays into one new array.

const original = [10, 20, 30];
const clone = [...original];
console.log(clone); // [10, 20, 30]

🔍 Explanation

  • ...original creates a shallow copy of the array.

  • clone is a separate array from original.

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const combined = { ...obj1, ...obj2 };
console.log(combined); // { a: 1, b: 3, c: 4 }

🔍 Explanation

  • ...obj1 and ...obj2 combine both objects.

  • If the same key exists, the value from the later object overwrites the earlier one.

🔰 Difference Between Rest Parameter and Spread Operator

Feature

Rest Parameter

Spread Operator

Purpose

Collects multiple values

Expands values

Used In

Function parameters, destructuring

Arrays, objects, function calls

Result

Array (or object in destructuring)

Individual elements or properties

📚 Quick Recap

Rest Parameter 📥

Spread Operator 📤

Collects values

Expands values

Packs multiple values into one variable

Unpacks values into individual elements

Mainly used in function parameters

Mainly used for copying, merging, and expanding

Easy Trick:
Rest collects everything together. 📥
Spread spreads everything apart. 📤