Spread vs Rest Operators in JavaScript

Have you ever seen ... in JavaScript and wondered if the developer just forgot to finish their sentence? Those three dots are actually one of the most powerful features in modern JS.

1. The Spread Operator (Expanding)

Think of Spread like taking a deck of cards and spreading them all out on a table. It takes an array (or object) and "unpacks" its elements into individual pieces.

Using Spread with Arrays

If you want to combine two arrays, you don't need to use loops anymore.

The Old Way:

let fruits = ['apple', 'banana']; 
let moreFruits = ['mango', 'kiwi']; 
let allFruits = fruits.concat(moreFruits);

The Spread Way:

let allFruits = [...fruits, ...moreFruits, 'orange']; console.log(allFruits); // ['apple', 'banana', 'mango', 'kiwi', 'orange']

Gemini said

Spread vs. Rest: The JavaScript "Dots" That Do It All ⚪⚪⚪

Have you ever seen ... in JavaScript and wondered if the developer just forgot to finish their sentence? Those three dots are actually one of the most powerful features in modern JS.

Depending on where you use them, they either Spread things out or Rest (collect) them together. It’s like a Swiss Army knife for your data.

1. The Spread Operator (Expanding)

Think of Spread like taking a deck of cards and spreading them all out on a table. It takes an array (or object) and "unpacks" its elements into individual pieces.

Using Spread with Arrays

If you want to combine two arrays, you don't need to use loops anymore.

The Old Way:

JavaScript

let fruits = ['apple', 'banana'];
let moreFruits = ['mango', 'kiwi'];
let allFruits = fruits.concat(moreFruits);

The Spread Way:

JavaScript

let allFruits = [...fruits, ...moreFruits, 'orange'];
console.log(allFruits); // ['apple', 'banana', 'mango', 'kiwi', 'orange']

Using Spread with Objects

This is perfect for creating a shallow copy of an object or updating just one specific property (remember our laptop object?).

const laptop = { brand: "Dell", price: 50000 }; 
const discountedLaptop = { ...laptop, price: 45000, color: "Silver" };

console.log(discountedLaptop); 
// { brand: "Dell", price: 45000, color: "Silver" }

2. The Rest Operator (Collecting)

The Rest operator looks exactly the same (...), but it does the opposite. It gathers multiple individual elements and "squishes" them into a single array.

You’ll usually see this in function parameters when you don't know how many arguments will be passed.

Example:

function sumAll(...numbers) { 
    // 'numbers' is now an array containing all arguments passed 
    return numbers.reduce((acc, curr) => acc + curr, 0); 
}
console.log(sumAll(10, 20, 30, 40)); // 100

3. Key Differences: Spread vs. Rest

It’s easy to get them confused. Here is a simple rule of thumb:

• Spread is on the Right side of the assignment (or inside a function call). It expands.

• Rest is on the Left side of the assignment (or in function parameters). It collects.

Practical Use Case: Destructuring + Rest

Remember our post on Destructuring? You can use Rest to grab the "leftover" parts of an object.

const person = {
    name: "Pawan", 
    age: 21, city: "Indore", 
    hobby: "Coding" 
};

// Extract 'name', and put everything else into 'details' c
onst { name, ...details } = person;

console.log(name); // Pawan 
console.log(details); // { age: 21, city: "Indore", hobby: "Coding" }

Practice Time!

Imagine you have an array of marks: [90, 85, 70, 60]. You want to store the highest mark (the first one) in a variable called topMark and all the other marks in an array called others.

How would you use the Rest operator to do this in one line?

const marks = [90, 85, 70, 60]; 
// Your code here: