Spread Syntax (...) - JavaScript - MDN - Mozilla

• Skip to main content
• Skip to search

Spread syntax (...) Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨October 2015⁩.

• Learn more
• See full compatibility
• Report feedback

The spread (...) syntax allows an iterable, such as an array or string, to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected. In an object literal, the spread syntax enumerates the properties of an object and adds the key-value pairs to the object being created.

Spread syntax looks exactly like rest syntax. In a way, spread syntax is the opposite of rest syntax. Spread syntax "expands" an array into its elements, while rest syntax collects multiple elements and "condenses" them into a single element. See rest parameters and rest property.

In this article

• Try it
• Syntax
• Description
• Examples
• Specifications
• Browser compatibility
• See also

Try it

function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; console.log(sum(...numbers)); // Expected output: 6 console.log(sum.apply(null, numbers)); // Expected output: 6

Syntax

jsmyFunction(a, ...iterableObj, b) [1, ...iterableObj, '4', 'five', 6] { ...obj, key: 'value' }

Description

Spread syntax can be used when all elements from an object or array need to be included in a new array or object, or should be applied one-by-one in a function call's arguments list. There are three distinct places that accept the spread syntax:

• Function arguments list (myFunction(a, ...iterableObj, b))
• Array literals ([1, ...iterableObj, '4', 'five', 6])
• Object literals ({ ...obj, key: 'value' })

Although the syntax looks the same, they come with slightly different semantics.

Only iterable values, like Array and String, can be spread in array literals and argument lists. Many objects are not iterable, including all plain objects that lack a Symbol.iterator method:

jsconst obj = { key1: "value1" }; const array = [...obj]; // TypeError: obj is not iterable

On the other hand, spreading in object literals enumerates the own properties of the value. For typical arrays, all indices are enumerable own properties, so arrays can be spread into objects.

jsconst array = [1, 2, 3]; const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }

All primitives can be spread in objects. Only strings have enumerable own properties, and spreading anything else doesn't create properties on the new object.

jsconst obj = { ...true, ..."test", ...10 }; // { '0': 't', '1': 'e', '2': 's', '3': 't' }

When using spread syntax for function calls, be aware of the possibility of exceeding the JavaScript engine's argument length limit. See Function.prototype.apply() for more details.

Examples

Spread in function calls

Replace apply()

It is common to use Function.prototype.apply() in cases where you want to use the elements of an array as arguments to a function.

jsfunction myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction.apply(null, args);

With spread syntax the above can be written as:

jsfunction myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction(...args);

Any argument in the argument list can use spread syntax, and the spread syntax can be used multiple times.

jsfunction myFunction(v, w, x, y, z) {} const args = [0, 1]; myFunction(-1, ...args, 2, ...[3]);

Apply for new operator

When calling a constructor with new, it's not possible to directly use an array and apply(), because apply() calls the target function instead of constructing it, which means, among other things, that new.target will be undefined. However, an array can be easily used with new thanks to spread syntax:

jsconst dateFields = [1970, 0, 1]; // 1 Jan 1970 const d = new Date(...dateFields);

Spread in array literals

A more powerful array literal

Without spread syntax, the array literal syntax is no longer sufficient to create a new array using an existing array as one part of it. Instead, imperative code must be used using a combination of methods, including push(), splice(), concat(), etc. With spread syntax, this becomes much more succinct:

jsconst parts = ["shoulders", "knees"]; const lyrics = ["head", ...parts, "and", "toes"]; // ["head", "shoulders", "knees", "and", "toes"]

Just like spread for argument lists, ... can be used anywhere in the array literal, and may be used more than once.

Copying an array

You can use spread syntax to make a shallow copy of an array. Each array element retains its identity without getting copied.

jsconst arr = [1, 2, 3]; const arr2 = [...arr]; // like arr.slice() arr2.push(4); // arr2 becomes [1, 2, 3, 4] // arr remains unaffected

Spread syntax effectively goes one level deep while copying an array. Therefore, it may be unsuitable for copying multidimensional arrays. The same is true with Object.assign() — no native operation in JavaScript does a deep clone. The web API method structuredClone() allows deep copying values of certain supported types. See shallow copy for more details.

jsconst a = [[1], [2], [3]]; const b = [...a]; b.shift().shift(); // 1 // Oh no! Now array 'a' is affected as well: console.log(a); // [[], [2], [3]]

A better way to concatenate arrays

Array.prototype.concat() is often used to concatenate an array to the end of an existing array. Without spread syntax, this is done as:

jslet arr1 = [0, 1, 2]; const arr2 = [3, 4, 5]; // Append all items from arr2 onto arr1 arr1 = arr1.concat(arr2);

With spread syntax this becomes:

jslet arr1 = [0, 1, 2]; const arr2 = [3, 4, 5]; arr1 = [...arr1, ...arr2]; // arr1 is now [0, 1, 2, 3, 4, 5]

Array.prototype.unshift() is often used to insert an array of values at the start of an existing array. Without spread syntax, this is done as:

jsconst arr1 = [0, 1, 2]; const arr2 = [3, 4, 5]; // Prepend all items from arr2 onto arr1 Array.prototype.unshift.apply(arr1, arr2); console.log(arr1); // [3, 4, 5, 0, 1, 2]

With spread syntax, this becomes:

jslet arr1 = [0, 1, 2]; const arr2 = [3, 4, 5]; arr1 = [...arr2, ...arr1]; console.log(arr1); // [3, 4, 5, 0, 1, 2]

Note: Unlike unshift(), this creates a new arr1, instead of modifying the original arr1 array in-place.

Conditionally adding values to an array

You can make an element present or absent in an array literal, depending on a condition, using a conditional operator.

jsconst isSummer = false; const fruits = ["apple", "banana", ...(isSummer ? ["watermelon"] : [])]; // ['apple', 'banana']

When the condition is false, we spread an empty array, so that nothing gets added to the final array. Note that this is different from the following:

jsconst fruits = ["apple", "banana", isSummer ? "watermelon" : undefined]; // ['apple', 'banana', undefined]

In this case, an extra undefined element is added when isSummer is false, and this element will be visited by methods such as Array.prototype.map().

Spread in object literals

Copying and merging objects

You can use spread syntax to merge multiple objects into one new object.

jsconst obj1 = { foo: "bar", x: 42 }; const obj2 = { bar: "baz", y: 13 }; const mergedObj = { ...obj1, ...obj2 }; // { foo: "bar", x: 42, bar: "baz", y: 13 }

A single spread creates a shallow copy of the original object (but without non-enumerable properties and without copying the prototype), similar to copying an array.

jsconst clonedObj = { ...obj1 }; // { foo: "bar", x: 42 }

Overriding properties

When one object is spread into another object, or when multiple objects are spread into one object, and properties with identical names are encountered, the property takes the last value assigned while remaining in the position it was originally set.

jsconst obj1 = { foo: "bar", x: 42 }; const obj2 = { foo: "baz", y: 13 }; const mergedObj = { x: 41, ...obj1, ...obj2, y: 9 }; // { x: 42, foo: "baz", y: 9 }

Conditionally adding properties to an object

You can make an element present or absent in an object literal, depending on a condition, using a conditional operator.

jsconst isSummer = false; const fruits = { apple: 10, banana: 5, ...(isSummer ? { watermelon: 30 } : {}), }; // { apple: 10, banana: 5 }

The case where the condition is false is an empty object, so that nothing gets spread into the final object. Note that this is different from the following:

jsconst fruits = { apple: 10, banana: 5, watermelon: isSummer ? 30 : undefined, }; // { apple: 10, banana: 5, watermelon: undefined }

In this case, the watermelon property is always present and will be visited by methods such as Object.keys().

Because primitives can be spread into objects as well, and from the observation that all falsy values do not have enumerable properties, you can simply use a logical AND operator:

jsconst isSummer = false; const fruits = { apple: 10, banana: 5, ...(isSummer && { watermelon: 30 }), };

In this case, if isSummer is any falsy value, no property will be created on the fruits object.

Comparing with Object.assign()

Note that Object.assign() can be used to mutate an object, whereas spread syntax can't.

jsconst obj1 = { foo: "bar", x: 42 }; Object.assign(obj1, { x: 1337 }); console.log(obj1); // { foo: "bar", x: 1337 }

In addition, Object.assign() triggers setters on the target object, whereas spread syntax does not.

jsconst objectAssign = Object.assign( { set foo(val) { console.log(val); }, }, { foo: 1 }, ); // Logs "1"; objectAssign.foo is still the original setter const spread = { set foo(val) { console.log(val); }, ...{ foo: 1 }, }; // Nothing is logged; spread.foo is 1

You cannot naively re-implement the Object.assign() function through a single spreading:

jsconst obj1 = { foo: "bar", x: 42 }; const obj2 = { foo: "baz", y: 13 }; const merge = (...objects) => ({ ...objects }); const mergedObj1 = merge(obj1, obj2); // { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } } const mergedObj2 = merge({}, obj1, obj2); // { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }

In the above example, the spread syntax does not work as one might expect: it spreads an array of arguments into the object literal, due to the rest parameter. Here is an implementation of merge using the spread syntax, whose behavior is similar to Object.assign(), except that it doesn't trigger setters, nor mutates any object:

jsconst obj1 = { foo: "bar", x: 42 }; const obj2 = { foo: "baz", y: 13 }; const merge = (...objects) => objects.reduce((acc, cur) => ({ ...acc, ...cur })); const mergedObj = merge(obj1, obj2); // { foo: 'baz', x: 42, y: 13 }

Specifications

Specification
ECMAScript® 2026 Language Specification# prod-SpreadElement
ECMAScript® 2026 Language Specification# prod-ArgumentList
ECMAScript® 2026 Language Specification# prod-PropertyDefinition

Browser compatibility

See also

• Rest parameters
• Rest property
• Function.prototype.apply()

Help improve MDN

Was this page helpful to you? Yes No Learn how to contribute

This page was last modified on ⁨Jul 20, 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content Filter sidebar

1. JavaScript
2. Tutorials and guides
3. JavaScript Guide
   1. Introduction
   2. Grammar and types
   3. Control flow and error handling
   4. Loops and iteration
   5. Functions
   6. Expressions and operators
   7. Numbers and strings
   8. Representing dates & times
   9. Regular expressions
   10. Indexed collections
   11. Keyed collections
   12. Working with objects
   13. Using classes
   14. Using promises
   15. JavaScript typed arrays
   16. Iterators and generators
   17. Resource management
   18. Internationalization
   19. JavaScript modules
4. Intermediate
   1. Language overview
   2. JavaScript data structures
   3. Equality comparisons and sameness
   4. Enumerability and ownership of properties
   5. Closures
5. Advanced
   1. Inheritance and the prototype chain
   2. Meta programming
   3. Memory Management
6. References
7. Built-in objects
   1. AggregateError
   2. Array
   3. ArrayBuffer
   4. AsyncDisposableStack
   5. AsyncFunction
   6. AsyncGenerator
   7. AsyncGeneratorFunction
   8. AsyncIterator
   9. Atomics
   10. BigInt
   11. BigInt64Array
   12. BigUint64Array
   13. Boolean
   14. DataView
   15. Date
   16. decodeURI()
   17. decodeURIComponent()
   18. DisposableStack
   19. encodeURI()
   20. encodeURIComponent()
   21. Error
   22. escape() Deprecated
   23. eval()
   24. EvalError
   25. FinalizationRegistry
   26. Float16Array
   27. Float32Array
   28. Float64Array
   29. Function
   30. Generator
   31. GeneratorFunction
   32. globalThis
   33. Infinity
   34. Int8Array
   35. Int16Array
   36. Int32Array
   37. InternalError Non-standard
   38. Intl
   39. isFinite()
   40. isNaN()
   41. Iterator
   42. JSON
   43. Map
   44. Math
   45. NaN
   46. Number
   47. Object
   48. parseFloat()
   49. parseInt()
   50. Promise
   51. Proxy
   52. RangeError
   53. ReferenceError
   54. Reflect
   55. RegExp
   56. Set
   57. SharedArrayBuffer
   58. String
   59. SuppressedError
   60. Symbol
   61. SyntaxError
   62. Temporal
   63. TypedArray
   64. TypeError
   65. Uint8Array
   66. Uint8ClampedArray
   67. Uint16Array
   68. Uint32Array
   69. undefined
   70. unescape() Deprecated
   71. URIError
   72. WeakMap
   73. WeakRef
   74. WeakSet
8. Expressions & operators
   1. Addition (+)
   2. Addition assignment (+=)
   3. Assignment (=)
   4. async function expression
   5. async function* expression
   6. await
   7. Bitwise AND (&)
   8. Bitwise AND assignment (&=)
   9. Bitwise NOT (~)
   10. Bitwise OR (|)
   11. Bitwise OR assignment (|=)
   12. Bitwise XOR (^)
   13. Bitwise XOR assignment (^=)
   14. class expression
   15. Comma operator (,)
   16. Conditional (ternary) operator
   17. Decrement (--)
   18. delete
   19. Destructuring
   20. Division (/)
   21. Division assignment (/=)
   22. Equality (==)
   23. Exponentiation (**)
   24. Exponentiation assignment (**=)
   25. function expression
   26. function* expression
   27. Greater than (>)
   28. Greater than or equal (>=)
   29. Grouping operator ( )
   30. import.meta
       1. import.meta.resolve()
   31. import()
   32. in
   33. Increment (++)
   34. Inequality (!=)
   35. instanceof
   36. Left shift (<<)
   37. Left shift assignment (<<=)
   38. Less than (<)
   39. Less than or equal (<=)
   40. Logical AND (&&)
   41. Logical AND assignment (&&=)
   42. Logical NOT (!)
   43. Logical OR (||)
   44. Logical OR assignment (||=)
   45. Multiplication (*)
   46. Multiplication assignment (*=)
   47. new
   48. new.target
   49. null
   50. Nullish coalescing assignment (??=)
   51. Nullish coalescing operator (??)
   52. Object initializer
   53. Operator precedence
   54. Optional chaining (?.)
   55. Property accessors
   56. Remainder (%)
   57. Remainder assignment (%=)
   58. Right shift (>>)
   59. Right shift assignment (>>=)
   60. Spread syntax (...)
   61. Strict equality (===)
   62. Strict inequality (!==)
   63. Subtraction (-)
   64. Subtraction assignment (-=)
   65. super
   66. this
   67. typeof
   68. Unary negation (-)
   69. Unary plus (+)
   70. Unsigned right shift (>>>)
   71. Unsigned right shift assignment (>>>=)
   72. void operator
   73. yield
   74. yield*
9. Statements & declarations
   1. async function
   2. async function*
   3. await using
   4. Block statement
   5. break
   6. class
   7. const
   8. continue
   9. debugger
   10. do...while
   11. Empty statement
   12. export
   13. Expression statement
   14. for
   15. for await...of
   16. for...in
   17. for...of
   18. function
   19. function*
   20. if...else
   21. import
       1. Import attributes
   22. Labeled statement
   23. let
   24. return
   25. switch
   26. throw
   27. try...catch
   28. using
   29. var
   30. while
   31. with Deprecated
10. Functions
    1. Arrow function expressions
    2. Default parameters
    3. get
    4. Method definitions
    5. Rest parameters
    6. set
    7. The arguments object
       1. [Symbol.iterator]()
       2. callee Deprecated
       3. length
11. Classes
    1. constructor
    2. extends
    3. Private elements
    4. Public class fields
    5. static
    6. Static initialization blocks
12. Regular expressions
    1. Backreference: \1, \2
    2. Capturing group: (...)
    3. Character class escape: \d, \D, \w, \W, \s, \S
    4. Character class: [...], [^...]
    5. Character escape: \n, \u{...}
    6. Disjunction: |
    7. Input boundary assertion: ^, $
    8. Literal character: a, b
    9. Lookahead assertion: (?=...), (?!...)
    10. Lookbehind assertion: (?<=...), (?<!...)
    11. Modifier: (?ims-ims:...)
    12. Named backreference: \k<name>
    13. Named capturing group: (?<name>...)
    14. Non-capturing group: (?:...)
    15. Quantifier: *, +, ?, {n}, {n,}, {n,m}
    16. Unicode character class escape: \p{...}, \P{...}
    17. Wildcard: .
    18. Word boundary assertion: \b, \B
13. Errors
    1. AggregateError: No Promise in Promise.any was resolved
    2. Error: Permission denied to access property "x"
    3. InternalError: too much recursion
    4. RangeError: argument is not a valid code point
    5. RangeError: BigInt division by zero
    6. RangeError: BigInt negative exponent
    7. RangeError: form must be one of 'NFC', 'NFD', 'NFKC', or 'NFKD'
    8. RangeError: invalid array length
    9. RangeError: invalid date
    10. RangeError: precision is out of range
    11. RangeError: radix must be an integer
    12. RangeError: repeat count must be less than infinity
    13. RangeError: repeat count must be non-negative
    14. RangeError: x can't be converted to BigInt because it isn't an integer
    15. ReferenceError: "x" is not defined
    16. ReferenceError: assignment to undeclared variable "x"
    17. ReferenceError: can't access lexical declaration 'X' before initialization
    18. ReferenceError: must call super constructor before using 'this' in derived class constructor
    19. ReferenceError: super() called twice in derived class constructor
    20. SyntaxError: 'arguments'/'eval' can't be defined or assigned to in strict mode code
    21. SyntaxError: "0"-prefixed octal literals are deprecated
    22. SyntaxError: "use strict" not allowed in function with non-simple parameters
    23. SyntaxError: "x" is a reserved identifier
    24. SyntaxError: \ at end of pattern
    25. SyntaxError: a declaration in the head of a for-of loop can't have an initializer
    26. SyntaxError: applying the 'delete' operator to an unqualified name is deprecated
    27. SyntaxError: arguments is not valid in fields
    28. SyntaxError: await is only valid in async functions, async generators and modules
    29. SyntaxError: await/yield expression can't be used in parameter
    30. SyntaxError: cannot use `??` unparenthesized within `||` and `&&` expressions
    31. SyntaxError: character class escape cannot be used in class range in regular expression
    32. SyntaxError: continue must be inside loop
    33. SyntaxError: duplicate capture group name in regular expression
    34. SyntaxError: duplicate formal argument x
    35. SyntaxError: for-in loop head declarations may not have initializers
    36. SyntaxError: function statement requires a name
    37. SyntaxError: functions cannot be labelled
    38. SyntaxError: getter and setter for private name #x should either be both static or non-static
    39. SyntaxError: getter functions must have no arguments
    40. SyntaxError: identifier starts immediately after numeric literal
    41. SyntaxError: illegal character
    42. SyntaxError: import declarations may only appear at top level of a module
    43. SyntaxError: incomplete quantifier in regular expression
    44. SyntaxError: invalid assignment left-hand side
    45. SyntaxError: invalid BigInt syntax
    46. SyntaxError: invalid capture group name in regular expression
    47. SyntaxError: invalid character in class in regular expression
    48. SyntaxError: invalid class set operation in regular expression
    49. SyntaxError: invalid decimal escape in regular expression
    50. SyntaxError: invalid identity escape in regular expression
    51. SyntaxError: invalid named capture reference in regular expression
    52. SyntaxError: invalid property name in regular expression
    53. SyntaxError: invalid range in character class
    54. SyntaxError: invalid regexp group
    55. SyntaxError: invalid regular expression flag "x"
    56. SyntaxError: invalid unicode escape in regular expression
    57. SyntaxError: JSON.parse: bad parsing
    58. SyntaxError: label not found
    59. SyntaxError: missing : after property id
    60. SyntaxError: missing ) after argument list
    61. SyntaxError: missing ) after condition
    62. SyntaxError: missing ] after element list
    63. SyntaxError: missing } after function body
    64. SyntaxError: missing } after property list
    65. SyntaxError: missing = in const declaration
    66. SyntaxError: missing formal parameter
    67. SyntaxError: missing name after . operator
    68. SyntaxError: missing variable name
    69. SyntaxError: negated character class with strings in regular expression
    70. SyntaxError: new keyword cannot be used with an optional chain
    71. SyntaxError: nothing to repeat
    72. SyntaxError: numbers out of order in {} quantifier.
    73. SyntaxError: octal escape sequences can't be used in untagged template literals or in strict mode code
    74. SyntaxError: parameter after rest parameter
    75. SyntaxError: private fields can't be deleted
    76. SyntaxError: property name __proto__ appears more than once in object literal
    77. SyntaxError: raw bracket is not allowed in regular expression with unicode flag
    78. SyntaxError: redeclaration of formal parameter "x"
    79. SyntaxError: reference to undeclared private field or method #x
    80. SyntaxError: rest parameter may not have a default
    81. SyntaxError: return not in function
    82. SyntaxError: setter functions must have one argument
    83. SyntaxError: string literal contains an unescaped line break
    84. SyntaxError: super() is only valid in derived class constructors
    85. SyntaxError: tagged template cannot be used with optional chain
    86. SyntaxError: Unexpected '#' used outside of class body
    87. SyntaxError: Unexpected token
    88. SyntaxError: unlabeled break must be inside loop or switch
    89. SyntaxError: unparenthesized unary expression can't appear on the left-hand side of '**'
    90. SyntaxError: use of super property/member accesses only valid within methods or eval code within methods
    91. SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead
    92. TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed
    93. TypeError: 'x' is not iterable
    94. TypeError: "x" is (not) "y"
    95. TypeError: "x" is not a constructor
    96. TypeError: "x" is not a function
    97. TypeError: "x" is not a non-null object
    98. TypeError: "x" is read-only
    99. TypeError: already executing generator
    100. TypeError: BigInt value can't be serialized in JSON
    101. TypeError: calling a builtin X constructor without new is forbidden
    102. TypeError: can't access/set private field or method: object is not the right class
    103. TypeError: can't assign to property "x" on "y": not an object
    104. TypeError: can't convert BigInt to number
    105. TypeError: can't convert x to BigInt
    106. TypeError: can't define property "x": "obj" is not extensible
    107. TypeError: can't delete non-configurable array element
    108. TypeError: can't redefine non-configurable property "x"
    109. TypeError: can't set prototype of this object
    110. TypeError: can't set prototype: it would cause a prototype chain cycle
    111. TypeError: cannot use 'in' operator to search for 'x' in 'y'
    112. TypeError: class constructors must be invoked with 'new'
    113. TypeError: cyclic object value
    114. TypeError: derived class constructor returned invalid value x
    115. TypeError: getting private setter-only property
    116. TypeError: Initializing an object twice is an error with private fields/methods
    117. TypeError: invalid 'instanceof' operand 'x'
    118. TypeError: invalid Array.prototype.sort argument
    119. TypeError: invalid assignment to const "x"
    120. TypeError: Iterator/AsyncIterator constructor can't be used directly
    121. TypeError: matchAll/replaceAll must be called with a global RegExp
    122. TypeError: More arguments needed
    123. TypeError: null/undefined has no properties
    124. TypeError: property "x" is non-configurable and can't be deleted
    125. TypeError: Reduce of empty array with no initial value
    126. TypeError: setting getter-only property "x"
    127. TypeError: WeakSet key/WeakMap value 'x' must be an object or an unregistered symbol
    128. TypeError: X.prototype.y called on incompatible type
    129. URIError: malformed URI sequence
    130. Warning: -file- is being assigned a //# sourceMappingURL, but already has one
    131. Warning: unreachable code after return statement
14. Misc
    1. JavaScript technologies overview
    2. Execution model
    3. Lexical grammar
    4. Iteration protocols
    5. Strict mode
    6. Template literals
    7. Trailing commas
    8. Deprecated features