Spread Operator - toviddfrei/javascript GitHub Wiki

Operador de extensión o de propagación, lo primero concepto a tener frescos, yo diría en este caso que son operadores, una definición rápida que operan, en este caso con datos, ya que estamos en un contexto de programación informática, por lo tanto, datos, datos, datos, y que puede hacer un operador de datos que extiende o propaga, la misma expresión lo dice, que los extiende, por lo tanto, que lo captura, carga, mapea, guarda, que puede interactuar con los datos que le proponemos. Vale, no he sido muy claro en la exposición, pero un ejemplo reflejará el asunto.

// Añadimos nuevos numeros con push

const listanumerica = ['uno', 'dos', 'tres', 4, 'cinco'];
const nuevosnumeros = [6,7];

listanumerica.push(nuevosnumeros);
console.log(listanumerica);

Hasta el momento no hemos visto el operador spread que así se denomina el operador de propagación, bueno, tal como veis, si utilizamos push en algo tan básico como añadir nuevos elementos a nuestra matriz, no añade una matriz nueva dentro de esa matriz, recordemos que las matrices en JavaScript puede contener cualquier tipo de dato, incluso matrices.

Pues bien, en algunos casos, querrás añadir nuevos elementos a la matriz origen, aunque por convención común las matrices o mejor las estructuras orígenes no se deben modificar, esta recomendación nos evitara encontrarnos con problemas de uso indebido de dichas estructuras, lo mismo en cualquier otra parte de la aplicación esperan un tipo de dato dentro de una estructura que estamos modificando y añadiendo datos de tipos distintos, en un futuro próximo muy posiblemente alguna otra declaración interactúe con esa estructura y obtenga datos inesperados. Por lo tanto, la convención común es dejar las estructuras originales sin tocar y copiarlas, realizando las modificaciones necesarias en esas copias.

Veamos como copiar y veamos como realizar el ejemplo anterior ya con nuestro operador de propagación, su sintaxis es muy peculiar, por lo tanto, debe profundizar en nuestras mentes rápidamente, son corchetes y tras el de apertura tres puntos y la palabra o nombre al que nos refiramos, tal cual esto [...nombreexpecifico], lo vemos.

// Añadimos nuevos numeros con spread

const listanumerica = ['uno', 'dos', 'tres', 4, 'cinco'];
const numerospropios = [101,202];
const nuevosnumeros = [...numerospropios,...listanumerica];

nuevosnumeros.push(10);
console.log(listanumerica);
console.log(nuevosnumeros);
console.log(numerospropios);

Observamos una solución fácil para combinar matrices, añadir nuevos elementos a esas matrices, y mantener las recomendaciones, dejamos las matrices originales sin modificar, otra herramienta muy útil a la caja, un caso que no se nos puede escapar es tendremos la inercia de asignar la matriz listanumerica directamente a nuevosnumeros, este desarrollo producirá un error, ya que si no utilizamos el operador de propagación la nueva matriz nuevosnumeros no pasará los elementos de la matriz origen listanumerica, ya que lo que hace la asignación es pasar el identificador de la matriz, no los valores, por lo tanto, todo lo que hiciéramos en la nueva matriz, estaría también reflejado en la matriz origen, veamos todo este rollo traducido a imagen.

const listanumerica = ['uno', 'dos', 'tres', 4, 'cinco'];
const nuevosnumeros = listanumerica;

nuevosnumeros.push(10);
console.log(listanumerica);
console.log(nuevosnumeros);

En ambas matrices se ha creado el nuevo elemento, por lo tanto, no estamos manteniendo las recomendaciones, no es un buen camino. El camino marcado es la mejor opción.