REFERENCEjavascript

javascript Documentation

📖 INDEX

# what-is-javascript

# function-declaration

# function-expressions

# anonymous-functions

# arrow-functions

# return

# recursive-functions

# arguments-parameters

# array-destructuring

# what-is-dom

# element-selection

# selection-methods

# elements-manipulation

# events

# event-listeners

# modification-methods

LOADING ENGINE...

Spread Operator (...)

AI & DATA SCIENCE // spread-operator

The spread operator (...) expands an iterable (array, string, object) into individual elements.

Syntax

// Array spread
const merged = [...arr1, ...arr2];
// Object spread
const updated = { ...obj, newProp: 'value' };
// Function call
Math.max(...nums);

Deep Dive Course

The **spread operator** `...` expands iterables. In **arrays**, it copies/merges. In **function calls**, it spreads array elements as arguments. In **objects** (ES2018), it shallow-copies and merges objects. It's non-mutating — always creates a new array/object. Perfect for immutable update patterns.

1Understanding Spread Operator (...)

The spread operator ... expands iterables. In arrays, it copies/merges. In function calls, it spreads array elements as arguments. In objects (ES2018), it shallow-copies and merges objects. It's non-mutating — always creates a new array/object. Perfect for immutable update patterns.

💡

Object spread always creates a shallow copy. Nested objects are still references. Use structuredClone() for deep copies.

editor.html

// Array operations
const a = [1, 2, 3];
const b = [4, 5, 6];

const merged  = [...a, ...b];        // [1,2,3,4,5,6]
const copy    = [...a];              // shallow copy
const prepend = [0, ...a];          // [0,1,2,3]
console.log(Math.max(...a));         // 3

localhost:3000

2Practical Example

Here is a real-world application of Spread Operator (...) showing how it is used in production JavaScript code.

editor.html

// Object spread (immutable updates)
const user = { name: 'Alice', age: 30, role: 'user' };

// Shallow copy
const copy = { ...user };

// Override specific field
const promoted = { ...user, role: 'admin' };
console.log(promoted); // { name:'Alice', age:30, role:'admin' }

localhost:3000

3Best Practices

Follow these guidelines when working with Spread Operator (...):

1. Use spread for array/object copies and merges

2. Put overriding properties AFTER the spread

3. Know it's a shallow copy for objects and arrays

⚠️

Tip: Object spread always creates a shallow copy. Nested objects are still references. Use structuredClone() for deep copies.

editor.html

// Array operations
const a = [1, 2, 3];
const b = [4, 5, 6];

const merged  = [...a, ...b];        // [1,2,3,4,5,6]
const copy    = [...a];              // shallow copy
const prepend = [0, ...a];          // [0,1,2,3]
console.log(Math.max(...a));         // 3

localhost:3000

Examples

Example 01Basic Usage

// Array operations
const a = [1, 2, 3];
const b = [4, 5, 6];

const merged  = [...a, ...b];        // [1,2,3,4,5,6]
const copy    = [...a];              // shallow copy
const prepend = [0, ...a];          // [0,1,2,3]
console.log(Math.max(...a));         // 3

Example 02Advanced Example

// Object spread (immutable updates)
const user = { name: 'Alice', age: 30, role: 'user' };

// Shallow copy
const copy = { ...user };

// Override specific field
const promoted = { ...user, role: 'admin' };
console.log(promoted); // { name:'Alice', age:30, role:'admin' }

Best Practices

Use spread for array/object copies and merges
Put overriding properties AFTER the spread
Know it's a shallow copy for objects and arrays

Interview Question

What is the difference between spread and Object.assign()?▼

Hint: They're similar but have subtle differences.

Both copy enumerable own properties. Differences: spread only copies own enumerable properties; Object.assign triggers setters on the target; spread doesn't. For simple merges, spread is more readable. Object.assign is useful when you want to merge INTO an existing object (first argument is mutated).

Exercises

MediumPractice using Spread Operator (...) in a real scenario.

View Solution

// Array operations
const a = [1, 2, 3];
const b = [4, 5, 6];

const merged  = [...a, ...b];        // [1,2,3,4,5,6]
const copy    = [...a];              // shallow copy
const prepend = [0, ...a];          // [0,1,2,3]
console.log(Math.max(...a));         // 3

Frequently Asked Questions

What is the difference between spread and Object.assign()?▼

Related Functions

RestParametersArray-DestructuringDestructuring