El operador de propagación de ECMAScript 6

Esta es otra de las novedades de ECMAScript 6 que, cuando la ves, piensas que se trata de un error del escritor al redactar el artículo, pero en verdad se llama spread operator y te puede simplificar la vida cuando trabajas con arrays. Este operador lo que te permite es expander el contenido en situaciones donde tienes más de un elemento… mejor veámoslo con un ejemplo 🙂

Imagina que tenemos un array con la lista de la compra, donde Anna y John tienen que añadir los elementos que necesitan cada uno.

let Anna = ["milk", "cookies", "wine", "water"],
    John = ["beer", "popcorn", "apples"],
    shoppingList = ["bananas", "ice cream", Anna, "bagels", John];

console.log(shoppingList);

A día de hoy, si intentamos añadir la lista de Anna y la lista de John directamente en el array shoppingList lo que ocurre es lo siguiente:

Mezcla de arrays sin usar el operador de propagación

Lo que ha ocurrido es que, en lugar de añadirse los elementos directamente en el array shoppingList, se han añadidos los dos arrays dentro del array principal. Sin embargo, si utilizamos el operador de propagación conseguiremos nuestro objetivo:

let Anna = ["milk", "cookies", "wine", "water"],
    John = ["beer", "popcorn", "apples"],
    shoppingList = ["bananas", "ice cream", ...Anna, "bagels", ...John];

console.log(shoppingList);

El operador de propagación son los tres puntos suspensivos delante de los arrays de Anna y John, que lo que significan es “expande su contenido”. Si comprobamos el resultado ya tendríamos lo que esperamos:

Spread operator en EMACScript 6
Spread operator en ECMAScript 6

Otro ejemplo sería cuando quieres añadir los elementos de un array en otro. Anteriormente hubiera sido necesario utilizar la función push del prototipo Array de la siguiente manera:

Array.prototype.push.apply(Anna, John);
console.log(Anna); //[ 'milk', 'cookies', 'wine', 'water', 'beer', 'popcorn', 'apples' ]

Ahora podemos simplificarlo mucho más:

Anna.push(...John);

Este operador también puede sernos útil en la llamadas a funciones. Por ejemplo, imagina que tienes una función que acepta las coordenadas de un lugar. Normalmente, este tipo de información suele venir en un array con la latitud y la longitud. Si usamos el spread operator podríamos desestructurar el array en los dos parámetros necesarios para dicha función:

function coordinates(lat, long) {
    console.log(`lat: ${lat} long: ${long}`);
};

const NewYork = [40.741895, -73.989308];

coordinates(...NewYork);

¡Saludos!