Spread Operator

Syntax

[...array], { ...object }, func(...args)

Examples

const nums = [1, 2, 3];
const copy = [...nums]; // a new, independent array

const moreNums = [...nums, 4, 5];
console.log(moreNums); // [1, 2, 3, 4, 5]

const a = [1, 2];
const b = [3, 4];
const combined = [...a, ...b];
console.log(combined); // [1, 2, 3, 4]

const user = { name: "Alice", age: 25 };
const updatedUser = { ...user, age: 26 }; // overrides age, keeps the rest
console.log(updatedUser); // { name: "Alice", age: 26 }

const defaults = { theme: "light", fontSize: 14 };
const userPrefs = { fontSize: 18 };
const settings = { ...defaults, ...userPrefs }; // later spreads override earlier ones
console.log(settings); // { theme: "light", fontSize: 18 }

function sum(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6, equivalent to sum(1, 2, 3)

console.log(Math.max(...[4, 8, 2, 9])); // 9

Best practices

• Use spread for immutable updates in state management (like React) instead of mutating objects/arrays directly
• Remember spread only creates a shallow copy - nested objects/arrays are still shared by reference
• When merging objects, later spreads override earlier ones for matching keys - order matters
• Prefer spread over Object.assign() or Array.prototype.concat() for most modern merging needs, as it is more concise

At a glance

Purpose

Application logic and interaction

File extension

.js · .mjs

Runs in

Browsers and JavaScript runtimes

Usually used with

HTML, CSS and Web APIs

Specifications & further reading

• ECMAScript specification

Related JavaScript documentation