Spread Operator

El spread operator que incorpora ECMAScript 6 en JavaScript es un operador que simplifica la recogida de valores en una estructura de datos. Convierte un array o un objeto en el conjunto de valores que contiene.

Su símbolo son tres puntos: …

Spread operator de arrays

Este operador permite que los elementos de un array se expandan y, de esta manera, podemos añadir un array dentro de otro sin que el resultado sean arrays anidados, si no un único array al que se han añadido nuevos valores.

var midArray = [3, 4];
var arr = [1, 2, …midArray, 5, 6];
//arr → [1, 2, 3, 4, 5, 6]

Utilizando el spread operator, cogemos los valores del array midArray y los insertamos directamente en el array arr. Así evitamos anidar un array dentro de otro:

var midArray = [3, 4];
var arr = [1, 2, midArray, 5, 6];
//arr → [1, 2, [3, 4], 5, 6]

Con el spread operator, podemos sumar arrays, hacer copias, añadir nuevos elementos…

//Añadir nuevos elementos
const numbers = [ 1 , 2 , 3]
const newNumbers = [ …numbers, 4]
// newNumbers → [1, 2, 3, 4]
//Sumar arrays
const sumOfArrays = [ …numbers, …newNumbers]
// sumofArrays → [1, 2, 3, 1, 2, 3, 4]
//Clonar arrays
var originalArr = [22, 3, 68, 0];
var newArray = […originalArr];
// newArray → [22, 3, 68, 0]

También podemos usar el spread operator para pasar elementos de un array como parámetros de una función. Veamos un ejemplo con el método Math.max(), que devuelve el número más alto de todos aquellos parámetros que se le pasa.

var arr = [22, 3, 68, 0];
var max = Math.max(…arr);
//max → 68

Como se ve con estos ejemplos, otra de las ventajas de este operador es que no necesitamos saber qué hay en el array.

Spreading de objeto

Este operador también se puede aplicar a objetos. Por ejemplo, podemos usarlo para clonaciones y para añadir y modificar propiedades.

const dog = {
   name: “Lucas”,
   age: 7,
   breed: “cocker”
}
const dogOwner = { …dog, owner: “Juan”, breed: “cocker spaniel”}
// dogOwner → {name: “Lucas”, age: 7, breed: “cocker spaniel”, owner: “Juan”}