Qé es el spread operator en JavaScript
El operador spread (o de propagación) te permite expandir un objeto iterable en una serie de objetos individuales. Ya sé, esta definición no es del todo clara -pero es lo mejor que se me ocurrió 😅-. Tranquilo. Veremos ejemplos que te ayudarán a dominar este operador.
⚠️ Antes de empezar: la sintaxis de este operador son 3 puntos …
Mira la siguiente imagen.
Ahora empieza a ser más claro, ¿no? Veamos ahora un ejemplo de código. Piensa en los siguientes arrays.
¿Cómo concatenarías estos arrays para obtener solo uno que vaya del 1 al 6? Probablemente estés pensando en varios métodos, y seguro alguno de ellos implica hacer algunos ciclos for para iterar por los arrays y extraer sus elementos.
Pues, justamente este es uno de los casos en los que el operador spread te puede ser superútil. Puedes extraer los elementos de ambos arrays y concatenarlos en una sola línea de código.
Esto es bastante útil, ¿no crees? Poder concatenar arrays así de fácil es increíble. Y este operador tiene otros usos iguales o incluso más interesantes. Vamos a verlos. 🚀
Concatenar objetos
Al igual que con los arrays, este operado te permite también concatenar objetos.
Además, puedes añadir elementos adicionales (igual con los arrays).
Recomendado por LinkedIn
Copiar objetos y arrays
En mi blogpost sobre asignaciones por valor vs. referencia hablé un poco sobre los problemas que podemos enfrentar al hacer copias de objetos o arrays, porque si no lo hacemos adecuadamente, el modificar la copia también afecta al original.
Para evitar esto y hacer una copia totalmente independiente también podemos usar el spread operator.
Pasar argumentos a una función
A través de este operador también es posible pasar argumentos a una función. Observa la siguiente función.
Es una función simple que recibe 3 números y regresa la suma de todos ellos.
Esos 3 argumentos pueden pasarse a través de desestructurar un array conteniendo esos 3 números.
🤯 Este operador es increíble, ¿no? Ahora puedes comenzar a utilizarlo en tus proyectos.
Si te gusto este post, asegúrate de suscribirte para enterarte de nuevas publicaciones. 😁
Fullstack Developer | Front End Developer | Back End Developer | HTML | CSS | Javascript | SCSS | React | Redux | NodeJS | SQLite3 | Sequelize | Java | Phyton | PostgreSQL | Scrum Master
1 añoExcelente aporte Fernando!