The spread punctuator is used in combination with an assignment expression to allow the expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) or multiple variables (for destructuring assignment) are expected.
Syntax
For function calls:
myFunction(...iterableObj);
For array literals:
[...iterableObj, 4, 5, 6]
For destructuring:
[a, b, ...iterableObj] = [1, 2, 3, 4, 5];
Examples
A better apply
Example: it is common to use {{jsxref( "Function.prototype.apply")}} in cases where you want to use an array to supply the arguments to a function.
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);
With ES6 spread you can now write the above as:
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);
Any argument in the argument list can use the spread syntax and it can be used multiple times.
function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);
A more powerful array literal
Example: Today if you have an array and want to create a new array with the existing one being part of it, the array literal syntax is no longer sufficient and you have to fall back to imperative code, using a combination of push, splice, concat, etc. With spread syntax this becomes much more succinct:
var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"]
Just like with spread for argument lists ... can be used anywhere in the array literal and it can be used multiple times.
Apply for new
Example: In ES5 it is not possible to compose new with apply. (In ES5 terms, apply does a [[Call]] and not a [[Construct]].) In ES6 the spread syntax naturally supports this:
var dateFields = readDateFields(database); var d = new Date(...dateFields);
A better push
Example: {{jsxref("Global_Objects/Array/push", "push")}} is often used to push an array to the end of an existing array. In ES5 this is often done as:
var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; // Append all items from arr2 onto arr1 Array.prototype.push.apply(arr1, arr2);
In ES6 with spread this becomes:
var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; arr1.push(...arr2);
Only apply for iterables
var obj = {"key1":"value1"};
function myFunction(x) {
console.log(x); // undefined
}
myFunction(...obj);
var args = [...obj];
console.log(args, args.length) //[] 0
Specifications
| Specification | Status | Comment |
|---|---|---|
| {{SpecName('ES6', '#sec-array-initializer')}} | {{Spec2('ES6')}} | Defined as a component of SpreadElement in several sections of the specification: Array Initializer, Argument Lists |
| {{SpecName('ESDraft', '#sec-array-initializer')}} | {{Spec2('ESDraft')}} |
Browser compatibility
{{CompatibilityTable}}
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Spread operation in array literals | {{CompatChrome("46")}} | {{ CompatGeckoDesktop("16") }} | {{CompatIE("Edge")}} | {{CompatNo}} | 7.1 |
| Spread operation in function calls | {{CompatChrome("46")}} | {{ CompatGeckoDesktop("27") }} | {{CompatIE("Edge")}} | {{CompatNo}} | 7.1 |
| Spread operation in destructuring | {{CompatChrome("49")}} | {{ CompatGeckoDesktop("34") }} | {{CompatNo}} | {{CompatUnknown}} | {{CompatUnknown}} |
| Feature | Android | Android Webview | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|
| Spread operation in array literals | {{CompatNo}} | {{CompatChrome("46")}} | {{ CompatGeckoMobile("16") }} | {{CompatNo}} | {{CompatNo}} | 8 | {{CompatChrome("46")}} |
| Spread operation in function calls | {{CompatNo}} | {{CompatChrome("46")}} | {{ CompatGeckoMobile("27") }} | {{CompatNo}} | {{CompatNo}} | 8 | {{CompatChrome("46")}} |
| Spread operation in destructuring | {{CompatNo}} | {{CompatNo}} | {{ CompatGeckoDesktop("34") }} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatNo}} |