what does spread Operator does

spread meas expand , it takes something like an array or object and spread its contents out individually

const arr = [1, 2, 3];

console.log(...arr);

output:

1 2 3 

you passes the each value separately

where we actually used it

Copying arrays

const a = [1, 2, 3];
const b = [...a];

Merging arrays

const a = [1, 2];
const b = [3, 4];

const merged = [...a, ...b]; 
// [1, 2, 3, 4]

Objects

const user = { name: "John", age: 20 };

const updatedUser = { ...user, age: 21 };

it copies and override the value

keypointers:

• spread = break things

• used in arrays, object, function callls

  ---

What rest operator does

rest = collect (gather) values into one things

opposite of spread

spread = break apart

rest = puts together

example

function sum(...numbers) {
  console.log(numbers);
}

sum(1, 2, 3);

output:

[1, 2, 3]

here we pass separate value , rest collect them inti an array

example with array

const arr = [10, 20, 30, 40];

const [first, ...rest] = arr;

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

• first takes the first value

• ...rest collect everything else into an array

example with function

function sum(...numbers) {
  console.log(numbers);
}

sum(1, 2, 3, 4);

output:

[1, 2, 3, 4]

• here we pass multiple argument

• ...numbers collect all of them into a single array

keypoint: usefull when no. of input are not fixed

example with objects

const user = {
  name: "John",
  age: 20,
  city: "Delhi"
};

const { name, ...rest } = user;

console.log(name); // John
console.log(rest); // { age: 20, city: "Delhi" }

here

• name is extracted

• The remaining properties are grouped into rest

note: rest always collect remaiing values amd it must be last element in destructuring

Differences between spread and rest

Spread (expanding)

const arr = [1, 2, 3];

console.log(...arr);

Outcome:

1 2 3

Here, the array is broken into individual values

Rest (collecting)

const [a, ...b] = [1, 2, 3];

outcome:

a = 1
b = [2, 3]

Here, remaining values are collected into one variable

combining

const nums = [10, 20, 30];

// Spread
const copy = [...nums];

// Rest
const [first, ...rest] = nums;

inShort =>

spread operator expand values

rest operator collects values

Using spread with Arrays and Object

Spread with arrays

1. Copying an array

const original = [1, 2, 3];
const copy = [...original];

This creates a new array

If you do this instead:

const copy = original;

You’re not copying, you are pointing to the same memory. That’s how bugs happen.

2. Merging arrays

const a = [1, 2];
const b = [3, 4];

const merged = [...a, ...b];

Output:

[1, 2, 3, 4]

3. Adding elements

const arr = [2, 3];

const newArr = [1, ...arr, 4];

Output:

[1, 2, 3, 4]

spread with object

1. Copying objects

const user = { name: "John", age: 20 };

const copy = { ...user };

New object, not a reference

2. Updating values

const user = { name: "John", age: 20 };

const updated = { ...user, age: 21 };

new object is created

3. Merging objects

const a = { x: 1 };
const b = { y: 2 };

const merged = { ...a, ...b };

Output:

{ x: 1, y: 2 }

Practical use case

we can perform these operation

1. Updating State (Very common in React)

You never directly modify state. You create a new one.

const user = { name: "John", age: 20 };

const updatedUser = { ...user, age: 21 };

• Keeps original data safe

• Prevents unexpected bugs

• Required in frameworks like React

2. Removing Properties from Objects

const user = {
  name: "John",
  password: "12345",
  email: "john@email.com"
};

const { password, ...safeUser } = user;

Now:

safeUser = {
  name: "John",
  email: "john@email.com"
}

Real use:

• Sendi data to frontened without sensitive info

3. Handling Variable Function Arguments

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

sum(1, 2, 3, 4); // 10

here you dont care how many input come in

4. Combining Data (APIs, forms, etc.)

const defaultSettings = { theme: "light", notifications: true };
const userSettings = { theme: "dark" };

const finalSettings = { ...defaultSettings, ...userSettings };

Real use:

• Merging backend + user data

• Applying overrides cleanly

  ---

  conclusion

• Use spread when you want to:

  • copy

  • merge

  • expand data

• Use rest when you want to:

  • collect unknown values

  • separate important vs remaining data

    ---