The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.
For function calls:
myFunction(...iterableObj);
For array literals:
[...iterableObj, 4, 5, 6]
For destructuring:
[a, b, ...iterableObj] = [1, 2, 3, 4, 5];
Example: it is common to use Function.prototype.apply in cases where you want to use an array as 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]);
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.
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);
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);
Created by Mozilla Contributors, license: CC-BY-SA 2.5