Spread syntax

The spread syntax allows an 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:

JavaScript
myFunction(...iterableObj);

For array literals:

JavaScript
[...iterableObj, 4, 5, 6]

Examples

A better apply

Example: it is common to use Function.prototype.apply in cases where you want to use an array as arguments to a function.

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

With ES6 spread you can now write the above as:

JavaScript
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.

JavaScript
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:

JavaScript
var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes']; // <a class="objectLink ">[</a>"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:

JavaScript
var dateFields = readDateFields(database);
var d = new Date(...dateFields);

Copy an array

JavaScript
var arr = [1,2,3];
var arr2 = [...arr]; // like arr.slice()
arr2.push(4); // arr2 becomes [1,2,3,4], arr stays unaffected

A better push

Example: push is often used to push an array to the end of an existing array. In ES5 this is often done as:

JavaScript
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:

JavaScript
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

Only apply for iterables

JavaScript
var obj = {"key1":"value1"};
function myFunction(x) {
    console.log(x); // undefined
}
myFunction(...obj);
var args = [...obj];
console.log(args, args.length) //[] 0

Rest operator

Rest operator looks exactly like the spread syntax, and is used for destructuring arrays and objects. In a way, Rest elements are the opposite of spread elements - spread elements 'expands' an array into its elements, and rest elements collects multiple elements and 'condenses' into a single element.

Specifications

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262) Standard Defined in several sections of the specification: Array Initializer, Argument Lists
ECMAScript 2017 Draft (ECMA-262) Draft  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Spread operation in array literals 46 16 (16) Edge No support 7.1
Spread operation in function calls 46 27 (27) Edge No support 7.1
Spread operation in destructuring 49 34 (34) No support ? ?
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Spread operation in array literals No support 46 16.0 (16) No support No support 8 46
Spread operation in function calls No support 46 27.0 (27) No support No support 8 46
Spread operation in destructuring No support No support 34 (34) ? ? ? No support

See also

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/javascript/reference/operators/spread_operator

ECMAScript6 Iterator JavaScript operator Operator