Qé es el spread operator en JavaScript

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.

No hay texto alternativo para esta imagen

Ahora empieza a ser más claro, ¿no? Veamos ahora un ejemplo de código. Piensa en los siguientes arrays.

No hay texto alternativo para esta imagen

¿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.

No hay texto alternativo para esta imagen

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.

No hay texto alternativo para esta imagen

Además, puedes añadir elementos adicionales (igual con los arrays).

No hay texto alternativo para esta imagen

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.

No hay texto alternativo para esta imagen

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.

No hay texto alternativo para esta imagen

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.

No hay texto alternativo para esta imagen



🤯 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. 😁
Jonathan Rodríguez

Fullstack Developer | Front End Developer | Back End Developer | HTML | CSS | Javascript | SCSS | React | Redux | NodeJS | SQLite3 | Sequelize | Java | Phyton | PostgreSQL | Scrum Master

1 año

Excelente aporte Fernando!

Inicia sesión para ver o añadir un comentario.

Otros usuarios han visto

Ver temas