mozilla
Your Search Results

    Spread operator

    This is a new technology, part of the ECMAScript 2015 (ES6) standard .
    This technology's specification has been finalized, but check the compatibility table for usage and implementation status in various browsers.

    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.

    Syntax

    For function calls:

    f(...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 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 = ['shoulders', '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 (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: 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);

    Specifications

    Specification Status Comment

    ECMAScript 2015 (6th Edition, ECMA-262)
    The definition of 'Array Initializer' in that specification.

    ECMAScript 2015 (6th Edition, ECMA-262)
    The definition of 'Argument Lists' in that specification.

    Standard
    • 12.2.4 Array Initializer
    • 12.3.6 Argument Lists

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Spread operation in array literals Not supported
    v8 issue 3018
    16 (16)
    36 (36) (Symbol.iterator)
    Not supported Not supported 7.1
    Spread operation in function calls Not supported 27 (27)
    36 (36) (Symbol.iterator)
    Not supported Not supported 7.1
    Spread operation in destructuring ? 34 (34)
    36 (36) (Symbol.iterator)
    ? ? ?
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Spread operation in array literals Not supported 16.0 (16)
    36.0 (36) (Symbol.iterator)
    Not supported Not supported iOS 8
    Spread operation in function calls Not supported 27.0 (27)
    36.0 (36) (Symbol.iterator)
    Not supported Not supported iOS 8
    Spread operation in destructuring ? 34 (34)
    36.0 (36) (Symbol.iterator)
    ? ? ?

    See also

    Document Tags and Contributors

    Contributors to this page:
    Last updated by: faheem,
    Hide Sidebar