Operador de propagación

El operador de propagación spread operator permite que una expresión sea expandida en situaciones donde se esperan múltiples argumentos (llamadas a funciones) o múltiples elementos (arrays literales).

Sintaxis

Llamadas a funciones:

f(...iterableObj);

Arrays literales:

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

Desestructuración destructuring:

[a, b, ...iterableObj] = [1, 2, 3, 4, 5];

Ejemplos

Un mejor método apply

Ejemplo: Es común usar Function.prototype.apply en casos donde se require un array como contenedor de los argumentos que se enviarán a una llamada de función:

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

Con el operador spread de ES6, el ejemplo anterior se puede rescribir como:

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

Cualquier argumento en la lista de argumentos puede usar la sintaxis de propagación spread, donde además puede ser usada varias veces.

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

Un array literal mas poderoso

Ejemplo: La sintaxis de un array literal que existe hoy en día no es suficiente si se requiere agregar los elementos de un array dentro de otro array existente. Actualmente se debe escribir código imperativo usando una combinación de métodos como push, splice, concat, etc. Con la sintaxis de propagación spread esta tarea resulta mucho mas concisa:

var parts = ['shoulder', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];

Al igual que con una lista de argumentos, en este caso también puede ser usado en cualquier ubicación dentro del array literal, además de poderse incluir una o varias veces.

Combinación del método apply y el operador new

Ejemplo: En ES5 no es posible combinar new y apply (en ES5  el método apply crea un [[Call]] y no un [[Construct]]). En ES6 la sintaxis de propagación spread soporta esto de forma natural:

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

Un método push mejorado

Ejemplo: push suele usarse para agregar los elementos de un array al final de otro array existente. En ES5 esta tarea puede ser realizada de la siguiente manera:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// Agregar todos los elementos de arr2 a arr1
Array.prototype.push.apply(arr1, arr2);

Usando el operador de propagación spread de ES6, este sería el resultado:

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

Solo funciona para iterables

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

Operador Rest

El operador Rest es exactamente igual a la sintaxis del operador de propagación, y se utiliza para desestructurar arrays y objetos. En cierto modo, Rest es lo contrario de spread. Spread 'expande' un array en sus elementos, y Rest recoge múltiples elementos y los 'condensa' en uno solo.

Especificaciones

Compatibilidad en navegadores

Temas relacionados

• Parámetros rest