The JavaScript Spread Syntax: Expanding Arrays, Objects, and Values

const numbers =[1, 2, 3];
console.log(numbers);
// [1, 2, 3] — the array itselfconsole.log(...numbers);   // 1 2 3 — the individual items, spilled out!

const original =["HTML", "CSS"];
const fakeCopy = original;
// same address! (Lesson 5)
fakeCopy.push("JS");
console.log(original);
// ["HTML", "CSS", "JS"] 😱 — contaminated!

const original =["HTML", "CSS"];
const realCopy =[...original];
// pour items into a BRAND NEW array
realCopy.push("JS");
console.log(original);
// ["HTML", "CSS"] ✅ — safe!console.log(realCopy);          // ["HTML", "CSS", "JS"]

const frontend =["HTML", "CSS", "JavaScript"];
const backend =["Node.js", "MongoDB"];
// Old way 😴const allSkills = frontend.concat(backend);
// Modern spread way ✨const allSkills = [...frontend, ...backend];
console.log(allSkills);
// ["HTML", "CSS", "JavaScript", "Node.js", "MongoDB"]

const skills =["CSS", "JavaScript"];
const fullPath =["HTML", ...skills, "React", "Node.js"];
console.log(fullPath);
// ["HTML", "CSS", "JavaScript", "React", "Node.js"]

function addThree(a, b, c) {
  return a + b + c;
}const numbers =[10, 20, 30];
console.log(addThree(...numbers));
// 60 — array poured into 3 arguments!

const scores =[45, 92, 67, 88, 71];
console.log(Math.max(scores));
// NaN ❌ — an array isn't numbers!console.log(Math.max(...scores)); // 92 ✅ — spread into arguments
console.log(Math.min(...scores));
// 45 ✅

const user = {
  name: "Priya", plan: "free"
};
const backup = {
  ...user
};
// true copy
backup.plan = "premium";
console.log(user.plan);
// "free" ✅ — original safe
console.log(backup.plan);
// "premium"

const user = {
  name: "Priya", plan: "free", joined: 2023
};
const upgradedUser = {
  ...user, plan: "premium"
};
console.log(upgradedUser);
// { name: "Priya", plan: "premium", joined: 2023 }

{
  plan: "premium", ...user
} // ❌ spread comes last → plan resets to "free"!
{
  ...user, plan: "premium"
} // ✅ override comes last → wins!

const basics = {
  name: "Amit", age: 24
};
const contact = {
  email: "amit@example.com", city: "Delhi"
};
const profile = {
  ...basics, ...contact
};
console.log(profile);
// { name: "Amit", age: 24, email: "amit@example.com", city: "Delhi" }

const defaults = {
  theme: "light", fontSize: 14
};
const userPrefs = {
  fontSize: 18
};
const settings = {
  ...defaults, ...userPrefs
};
console.log(settings);
// { theme: "light", fontSize: 18 } — userPrefs won!

const user = {
  name: "Riya", address: {
    city: "Mumbai"
  } // nested object!
};
const copy = {
  ...user
};
copy.name = "Rahul";
// ✅ top level — independent
copy.address.city = "Pune";
// 😱 NESTED — affects BOTH!
console.log(user.address.city);
// "Pune" — original changed! 🔥

// Fix 1: Spread each level manually (fine for shallow nesting)
const copy = {
  ...user, address: {
    ...user.address
  }
};
// Fix 2: Modern deep clone (2022+, the recommended way) ✅
const deepCopy = structuredClone(user);
deepCopy.address.city = "Pune";
console.log(user.address.city);
// "Mumbai" ✅ — truly independent!

// SPREAD — expanding (right side, in a call):
const nums =[1, 2, 3];
Math.max(...nums);
// array → separate items
// REST — collecting (in a function definition):
function sum(...numbers) {
  // separate items → one array
  console.log(numbers);
  // [1, 2, 3, 4]
  return numbers.reduce((t, n) => t + n, 0);
}sum(1, 2, 3, 4);
// 10

const word = "JS!";
const letters =[...word];
console.log(letters);
// ["J", "S", "!"]
// Classic trick: remove duplicate charactersconst unique = [...new Set("hello")];console.log(unique);     // ["h", "e", "l", "o"] ✨

const nums =[1, 2, 2, 3, 3, 3];
const uniqueNums =[...new Set(nums)];
console.log(uniqueNums);
// [1, 2, 3] ✅

// 🛒 Cart Manager — immutable updates with spread
const cart =[ {
  id: 1, item: "Shoes", price: 1999
}, {
  id: 2, item: "Watch", price: 2999
}];
// ADD an item (never mutate — always create new!)
const withNewItem =[...cart, {
  id: 3, item: "Cap", price: 499
}];
// REMOVE an item (filter creates a new array)
const removed = withNewItem.filter(product => product.id !== 2);
// UPDATE an item's price (map + spread the changed object)
const updated = removed.map(product => product.id === 1 ? {
  ...product, price: 1499
} : product);
console.log("Original cart:", cart.length, "items");
// 2 — untouched ✅
console.log("After add:", withNewItem.length, "items");
// 3
console.log("After remove:", removed.length, "items");
// 2
console.log("Updated:", updated);

Original cart: 2 itemsAfter add: 3 itemsAfter remove: 2 itemsUpdated:[ {
  id: 1, item: 'Shoes', price: 1499
}, {
  id: 3, item: 'Cap', price: 499
}]