Spread

Champions: Allen Wirfs-Brock, Brendan Eich, Erik Arvidsson
ES Wiki

The spread construct allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.

Details: full proposal

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.

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

With ES6 spread you can now write the above as

function f(x, y, z) { }
var args = [0, 1, 2];
f(...args);

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

function f(v, w, x, y, z) { }
var args = [0, 1];
f(-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 = ['shoulder', 'knees'];
var lyrics = ['head', ...parts, '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 (apply does a [[Construct]] and not a [[Call]]). In ES6 the spread syntax naturally supports this.

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

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

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);

Converting any array like

Since the spread construct for array literals copies every property between [0, length) of any object into a new array it is a convenient way to ensure that you get a real Array.

var nodeList = document.querySelectorAll('div');
var array = [...nodeList];

See Also