Spread en javascript

Introducción

Hablaré sobre el spread operator (operador de propagación) y cómo nos puede favorecer a la hora de escribir código. Este es el segundo story que escribo, en el primero hablé sobre sets en javascript, y de igual manera trataré de hacer el contenido lo más breve posible.

¿Qué es un spread?

Un spread nos permite expandir un iterable, como un array, un string e incluso un objeto. En pocas palabras divide cada elemento del iterable (por ejemplo un array) y los coloca en alguna expresión que pueda recibir argumentos o elementos, como una función, un array u objeto. Mostraré algunos ejemplos de uso para que se entienda mejor.

Spread en arrays

Ejemplos de uso con arrays

Clonar un array

Si deseas tener una copia de un array previamente creado, puedes crear una de esta forma:

Concatenar arrays

Anteriormente cuando queríamos concatenar 2 arrays usabamos el metodo concat(), algo como esto: arr.concat( arr2 ), eso nos devolvía un nuevo array con los elementos combinados de los 2 arrays. Ahora podemos hacer lo mismo de esta forma:

Crear un array usando un spread

Podemos de igual manera crear un nuevo array y fusionarlo con otro:

Spread en objetos

De igual manera que los arrays, también es posible usar spread en los objetos:

Clonar un objeto

Crear una copia de un objeto previamente creado

Unir objetos (Merge)

Para hacer merge de 2 o más objetos es muy similar como se hace con los arrays

Crear un objeto usando un spread

Crear un objeto usando otro objeto previamente creado, como en los arrays, también es posible

Spread en funciones

Uno de los usos más interesantes del spread es en las funciones, por ejemplo, puedes tener una función que recibe 2 parámetros y un array con 2 elementos, usando el operador de propagación puedes pasar cada elemento del array a cada parámetro de la función, mira el ejemplo:

Si el array excede la cantidad de elementos a la cantidad de parámetros que recibe la función, los elementos restantes serán ignorados por la función.

Parámetros Rest

Los parámetros rest hacen lo contrario al spread, el spread expande un iterable (array, object, etc…), un rest comprime múltiples elemetos a un sólo conjunto de elementos. Aunque es la misma sintaxis, podríamos decir que dependiendo su uso, es como se comporta. Con unos ejemplos será más claro de entender.

Como se puede apreciar en los ejemplos, es posible pasar una cantidad indefinida de parámetros a una función y dentro de ella recibirlo como un array.

Conclusión

El operador de propagación nos facilita el desarrollo, evitando escribir más líneas de código para algunas tareas. El operador de propagación es también muy utilizado con el Destructuring, en mi próximo story hablaré sobre ellos.