JavaScript Notes

JavaScript Spread Operator (...) - Complete Guide with Examples

Master the JavaScript spread operator (...): copy arrays/objects, merge data, pass arguments, shallow vs deep copy, and real-world patterns with clear examples.

What is the Spread Operator?

The spread operator (...) expands (spreads out) an iterable (array, string, object) into individual elements. It's like opening a box and tipping everything out.

Think of it like a magic blender lid: when you spread an array into a function, it's like individually dropping each fruit in — sum(...[1,2,3]) becomes sum(1, 2, 3).

Spread in Arrays

Copy an Array (Shallow)

Example

const original = [1, 2, 3, 4, 5]; const copy = [...original]; copy.push(6); console.log(original); // unchanged console.log(copy);

Output

[ 1, 2, 3, 4, 5 ]
[ 1, 2, 3, 4, 5, 6 ]

Merge / Concatenate Arrays

Example

const frontend = ["HTML", "CSS", "JavaScript"]; const backend = ["Node.js", "Express", "MongoDB"]; const fullStack = [...frontend, "React", ...backend]; console.log(fullStack);

Output

[ 'HTML', 'CSS', 'JavaScript', 'React', 'Node.js', 'Express', 'MongoDB' ]

Convert String to Array of Characters

Example

const word = "Hello"; const chars = [...word]; console.log(chars);

Output

[ 'H', 'e', 'l', 'l', 'o' ]

Find Max/Min from Array

Example

const scores = [88, 73, 95, 62, 80]; console.log(Math.max(...scores)); console.log(Math.min(...scores));

Output

95
62

Spread in Objects

Copy an Object (Shallow)

js example

const user = { name: "Riya", age: 22, city: "Delhi" };
const userCopy = { ...user };

userCopy.city = "Mumbai";

console.log(user.city);     // original unchanged
console.log(userCopy.city); // copy changed

Output

Delhi
Mumbai

Merge Two Objects

js example

const defaults = { theme: "light", lang: "en", fontSize: 14 };
const overrides = { theme: "dark", fontSize: 18 };

const merged = { ...defaults, ...overrides };
console.log(merged);

Output

{ theme: 'dark', lang: 'en', fontSize: 18 }

Example

Merge Order (left to right, LAST wins): defaults ──▶ overrides theme: "light" overrides theme: "dark" → "dark" wins lang: "en" (not in overrides) → "en" stays fontSize: 14 overrides fontSize: 18 → 18 wins

Add/Override Specific Properties (Immutable Pattern)

js example

const product = { id: 101, name: "Phone", price: 15000, stock: 50 };

// Update price without mutating original
const updatedProduct = { ...product, price: 12000, onSale: true };

console.log(product);        // original preserved
console.log(updatedProduct);

Output

{ id: 101, name: 'Phone', price: 15000, stock: 50 }
{ id: 101, name: 'Phone', price: 12000, stock: 50, onSale: true }

Spread in Function Calls

Example

function introduce(name, role, company) { return `${name} is a ${role} at ${company}`; } const args = ["Aman", "Developer", "Google"]; console.log(introduce(...args));

Output

Aman is a Developer at Google

Spread vs Rest Operator — The Key Difference

Both use ... but do opposite things:

Example

SPREAD → EXPANDS (breaks one into many) const arr = [1, 2, 3]; fn(...arr) → fn(1, 2, 3) REST → COLLECTS (gathers many into one) function fn(...args) {} fn(1, 2, 3) → args = [1, 2, 3]

Feature	Spread `...`	Rest `...`
What it does	Expands iterable into elements	Collects elements into array
Where used	Function calls, array/object literals	Function parameters, destructuring
Direction	One → Many	Many → One
Example	`fn(...arr)`	`function fn(...args)`
Result	Individual elements	Array

Example

// SPREAD in call const nums = [3, 1, 4, 1, 5]; console.log(Math.max(...nums)); // spread — passes as separate args // REST in definition function addAll(...numbers) { // rest — collects all args into array return numbers.reduce((sum, n) => sum + n, 0); } console.log(addAll(1, 2, 3, 4, 5));

Output

5
15

Shallow Copy — The Limitation

Spread creates a shallow copy — nested objects are still shared by reference:

js example

const original = {
  name: "Neha",
  address: { city: "Pune", pincode: 411001 }
};

const copy = { ...original };
copy.name = "Tara";            // ✅ doesn't affect original
copy.address.city = "Mumbai";  // ❌ AFFECTS original too!

console.log(original.name);         // Neha (unaffected)
console.log(original.address.city); // Mumbai (affected!)

Output

Neha
Mumbai

Example

Shallow Copy: copy ──▶ { name: "Tara", address: ─────┐ ▼ original ──▶ { name: "Neha", address: ──▶ { city: "Mumbai" } } ^── SAME reference!

For a true deep copy: structuredClone(obj) or JSON.parse(JSON.stringify(obj))

js example

const deepCopy = structuredClone(original);
deepCopy.address.city = "Chennai";

console.log(original.address.city); // still Mumbai — deep copy is independent

Output

Mumbai

Real World Use Cases 🌍

1. Redux-style Immutable State Update

js example

const state = { user: "Priya", count: 5, loading: false };
const newState = { ...state, count: state.count + 1, loading: true };
console.log(newState);

Output

{ user: 'Priya', count: 6, loading: true }

2. Safe Array Operations (No Mutation)

Example

const todos = ["Buy groceries", "Read book", "Exercise"]; const newTodos = [...todos, "Learn JavaScript"]; console.log(todos); // original untouched console.log(newTodos);

Output

[ 'Buy groceries', 'Read book', 'Exercise' ]
[ 'Buy groceries', 'Read book', 'Exercise', 'Learn JavaScript' ]

3. Flatten and Combine

Example

const week1 = [1, 2, 3]; const week2 = [4, 5, 6]; const week3 = [7, 8, 9]; const allDays = [...week1, ...week2, ...week3]; console.log(allDays);

Output

[1, 2, 3, 4, 5, 6, 7, 8, 9]

Common Mistakes ❌

1. Spreading an object into an array

Example

// ❌ Wrong — objects aren't iterable const obj = { a: 1, b: 2 }; const arr = [...obj]; // TypeError: obj is not iterable // ✅ Correct — use Object.values or Object.entries const arr = [...Object.values(obj)]; // [1, 2]

2. Thinking spread is a deep copy

js example

// ❌ Assumption
const config = { db: { host: "localhost" } };
const copy = { ...config };
copy.db.host = "production"; // mutates original!

// ✅ Deep copy
const safeCopy = structuredClone(config);

3. Property override order confusion

js example

// ❌ Wrong order — original overwrites update
const update = { price: 99 };
const product = { price: 150, name: "Book" };
const result = { ...update, ...product }; // product overwrites update
console.log(result.price); // 150, not 99!

// ✅ Correct — put override LAST
const correct = { ...product, ...update };
console.log(correct.price); // 99 ✅

Interview Questions 🎯

Q1. What does the spread operator do? > It expands an iterable (array, string, object) into individual elements. In arrays it spreads elements; in objects it spreads key-value pairs.

Q2. What is the difference between spread and rest operators? > Both use ... but opposite directions. Spread expands one into many (in calls/literals). Rest collects many into one array (in parameters/destructuring).

Q3. Does the spread operator perform a deep copy? > No. Spread performs a shallow copy. Top-level properties get new copies, but nested objects still share the same reference.

Q4. How do you merge two objects with spread? > const merged = { ...obj1, ...obj2 }. If both have the same key, the last one wins (rightmost object's value is kept).

Q5. Can you spread an object into an array? > No, plain objects are not iterable. You can spread arrays into arrays, or use Object.values(obj) to get an array first.

Q6. How is spread useful for immutable updates? > Instead of mutating: obj.key = newVal, you create a new object: { ...obj, key: newVal }. The original object is untouched.

Q7. What is the result of spreading a string with [...str]? > It splits the string into an array of individual characters: [..."Hello"] → ["H","e","l","l","o"].

Key Takeaways 🏁

... in a call/literal = Spread (expand)
... in parameters/destructuring = Rest (collect)
Spread creates shallow copies — nested objects are still shared references
Object spread: last property wins when keys conflict
Use spread for immutable updates — create new arrays/objects instead of mutating
Math.max(...array) is a clean pattern for max/min without apply
For deep copies, use structuredClone() (ES2022) instead of spread

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript Spread Operator (...) - Complete Guide with Examples.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, objects, spread, operator

Continue learning this concept

ObjectsJavaScript Rest Operator (...) - Parameters, Destructuring & Complete GuideMaster the JavaScript rest operator: rest parameters in functions, object/array rest in destructuring, rest vs spread, variadic functions, and real-world patterns.ObjectsJavaScript Object Destructuring - Complete Guide with ExamplesMaster JavaScript object destructuring: rename variables, default values, nested destructuring, function parameter destructuring, and array destructuring with real-world examples.ObjectsJavaScript Objects - Complete Guide to Object Basics with ExamplesMaster JavaScript objects from scratch. Learn object creation, key-value pairs, dot vs bracket notation, nested objects, and real-world use cases with clear examples.ObjectsJavaScript Object Methods - Built-in Methods & Custom Methods Complete GuideLearn JavaScript object methods: Object.keys, Object.assign, Object.create, custom methods, method shorthand ES6, and built-in static methods with real examples.ObjectsJavaScript Object Programs - Practice Problems with SolutionsSolve JavaScript object programs: CRUD operations, merge, filter, transform, group by, frequency counter, nested access, and common coding interview problems with solutions.ObjectsJavaScript Object Properties - Keys, Values, Descriptors & Dynamic PropertiesDeep dive into JavaScript object properties: enumerable, configurable, writable descriptors, computed keys, Object.keys/values/entries, and property iteration patterns.

PreviousJavaScript Rest Operator (...) - Parameters, Destructuring & Complete Guide NextJavaScript this Keyword - Complete Guide with Binding Rules & Examples