What is the difference between spread and rest syntax?

The syntax is identical, so the position tells you which one you are using. Spread appears where values are expected; rest appears where names are declared.

const parts = [2, 3];
const numbers = [1, ...parts, 4];
console.log(numbers); // [1, 2, 3, 4]

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

console.log(sum(1, 2, 3)); // 6

Objects

const defaults = { theme: "dark", size: "md" };
const overrides = { size: "lg" };

const config = { ...defaults, ...overrides };
console.log(config); // { theme: "dark", size: "lg" }

const { theme, ...rest } = config;
console.log(theme, rest); // "dark" { size: "lg" }

• Spread in an array literal or function call expands values
• Spread in an object literal copies own enumerable properties
• Rest in a function parameter collects arguments into an array
• Rest in destructuring collects the remaining elements or properties

Both operations are shallow. Spreading an object copies references to nested objects, not the nested values themselves.