JS 11

Excellent. This is one of the Top 5 JavaScript concepts for modern development.

If you understand this chapter, you'll instantly recognize a huge amount of React code.

---

Chapter 11 — Spread (...) & Rest (...) Operator ⭐⭐⭐⭐⭐

🎯 Goal (1 line)

Learn how to copy, merge, and collect data using ...—one of the most useful features in modern JavaScript.

---

🤔 One Symbol, Two Jobs

The same symbol ... has two different meanings.

Syntax	Job	Easy way to remember
Spread	Expand values	📦 Open the box
Rest	Collect values	🧺 Put everything into one basket

Think:

Spread = OPEN 📦

Rest = COLLECT 🧺

---

1. Spread with Arrays

Suppose you have:

const fruits = ["Apple", "Banana"];

Instead of:

const newFruits = ["Mango", fruits];

(which gives)

["Mango", ["Apple", "Banana"]]

Use spread:

const fruits = ["Apple", "Banana"];

const newFruits = ["Mango", ...fruits];

console.log(newFruits);

Output

["Mango", "Apple", "Banana"]

...fruits means:

Put every item from fruits here.

---

2. Copy an Array

Wrong way:

const numbers = [1, 2, 3];

const copy = numbers;

Both variables point to the same array.

Better:

const numbers = [1, 2, 3];

const copy = [...numbers];

console.log(copy);

Output

[1, 2, 3]

Now copy is a new array.

---

3. Merge Arrays

const teamA = ["Alice", "Bob"];
const teamB = ["Charlie", "David"];

const team = [...teamA, ...teamB];

console.log(team);

Output

["Alice", "Bob", "Charlie", "David"]

---

4. Spread with Objects

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

const updatedUser = {
  ...user,
  city: "Delhi"
};

console.log(updatedUser);

Output

{
  name: "Alice",
  age: 25,
  city: "Delhi"
}

---

5. Update Object Properties

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

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

console.log(updatedUser);

Output

{
  name: "Alice",
  age: 26
}

Notice:

The later value wins.

---

6. Rest Parameters

Now ... means something different.

const showNumbers = (...numbers) => {
  console.log(numbers);
};

showNumbers(10, 20, 30);

Output

[10, 20, 30]

It collects all arguments into an array.

---

MCQs

---

Q1

What does spread do?

A. Deletes values

B. Expands values

C. Sorts arrays

D. Filters arrays

✅ Answer

B

---

Q2

Output?

const nums = [2, 3];

console.log([1, ...nums]);

A.

[1, [2,3]]

B.

[1,2,3]

C.

[2,3]

D. Error

✅ Answer

B

---

Q3

Which copies an array?

A.

const copy = numbers;

B.

const copy = [...numbers];

C.

const copy = { numbers };

D.

const copy = numbers.copy();

✅ Answer

B

---

Q4

Output?

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

console.log([...a, ...b]);

A.

[1,2,3]

B.

[[1,2],[3]]

C.

[3,1,2]

D. Error

✅ Answer

A

---

Q5

Output?

const user = {
  name: "Tom"
};

console.log({
  ...user,
  age: 30
});

A.

{
  name: "Tom",
  age: 30
}

B.

{
  age: 30
}

C. Error

D. undefined

✅ Answer

A

---

Q6

Output?

const user = {
  age: 20
};

console.log({
  ...user,
  age: 25
});

A. age = 20

B. age = 25

C. undefined

D. Error

✅ Answer

B

---

Q7

Rest parameters collect values into...

A. Object

B. Array

C. String

D. Number

✅ Answer

B

---

Q8

Output?

const print = (...items) => {
  console.log(items.length);
};

print("A", "B", "C");

A. 2

B. 3

C. 4

D. Error

✅ Answer

B

---

Q9

Which is React's preferred way to update an object?

A.

user.age = 30;

B.

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

✅ Answer

B

React encourages creating a new object instead of changing the old one.

---

Q10

Output?

const nums = [1,2];

const copy = [...nums];

copy.push(3);

console.log(nums);

A.

[1,2]

B.

[1,2,3]

C. Error

D. undefined

✅ Answer

A

The original array doesn't change.

---

Q11

Output?

const nums = [1,2];

console.log([...nums, 3]);

A.

[1,2,3]

B.

[[1,2],3]

C.

[3,1,2]

D. Error

✅ Answer

A

---

Q12

Find the bug.

const user = {
  name: "Alice"
};

const copy = user;

A. No bug

B. This isn't a copy—it references the same object

C. Missing let

D. Missing return

✅ Answer

B

Correct:

const copy = {
  ...user
};

---

Q13

Output?

const add = (...numbers) => {
  console.log(numbers);
};

add(1,2);

A.

1
2

B.

[1,2]

C. Error

D. undefined

✅ Answer

B

---

Q14

Output?

const person = {
  name: "John"
};

const employee = {
  ...person,
  role: "Developer"
};

console.log(employee.role);

A. John

B. Developer

C. undefined

D. Error

✅ Answer

B

---

Q15 (Hardest)

Predict the output.

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

const updated = {
  ...user,
  age: 30,
  city: "Delhi"
};

console.log(updated);

✅ Answer

{
  name: "Alice",
  age: 30,
  city: "Delhi"
}

---

Mini Coding Challenge

const frontend = ["HTML", "CSS"];
const backend = ["Node.js"];

const skills = [...frontend, ...backend];

console.log(skills);

✅ Solution

Output

["HTML", "CSS", "Node.js"]

---

Mini Project — Shopping Cart

const cart = [
  "Laptop",
  "Mouse"
];

const updatedCart = [
  ...cart,
  "Keyboard"
];

console.log(updatedCart);

✅ Output

["Laptop", "Mouse", "Keyboard"]

Notice that the original cart remains unchanged.

---

🚨 Common Beginner Mistakes

❌ Thinking spread creates a deep copy

const user = {
  name: "Alice",
  address: {
    city: "Delhi"
  }
};

const copy = {
  ...user
};

This copies only the top level. Nested objects are still shared.

For now, just remember:

Spread makes a shallow copy.

That's enough for beginner and intermediate JavaScript.

---

❌ Forgetting the order matters

const user = {
  age: 20
};

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

console.log(updated.age);

Output:

20

Why?

Because the last value wins.

Correct:

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

---

🧠 The 80/20 Cheat Sheet

// Copy array
const copy = [...array];

// Merge arrays
const merged = [...a, ...b];

// Copy object
const copyUser = {
  ...user
};

// Update object
const updated = {
  ...user,
  age: 30
};

// Rest parameters
const fn = (...args) => {
  console.log(args);
};

---

💼 Real-World React Example

Imagine a user updates their profile:

const user = {
  name: "Pramod",
  city: "Bengaluru"
};

const updatedUser = {
  ...user,
  city: "Hyderabad"
};

console.log(updatedUser);

Instead of changing the original object, React prefers creating a new one. You'll see this pattern constantly when updating state.

---

🎯 Interview Tip

A common interview question is:

const copy = original;

vs.

const copy = [...original];

Answer:

• const copy = original; → Both variables point to the same array/object.

• const copy = [...original]; → Creates a new array (shallow copy).

---

📌 Next Chapter

Chapter 12 — Template Literals & Default Parameters (Quick Wins)

This chapter is shorter but very practical. You'll learn:

• Template literals (`Hello ${name}`)

• Default function parameters

• Optional chaining (?.)

• Nullish coalescing (??)

These features make your code cleaner and are common in modern JavaScript and React.