El spread operator y los rest parameters son dos características de ECMAScript 6 que te permiten propagar información entre objetos, arreglos y funciones sin reescribir cada propiedad. Si trabajas con JavaScript moderno, dominar estos tres puntos (...) te ahorra líneas de código y vuelve tu lógica más legible.

¿Qué es el spread operator y cómo funciona en JavaScript?

El spread operator usa la sintaxis de tres puntos (...) para expandir el contenido de un objeto o arreglo dentro de otro. En lugar de copiar propiedad por propiedad, propagas todo el bloque de información de una sola vez.

Imagina que tienes un objeto person con name y age, y una variable country por separado. Si quieres unirlos en un nuevo objeto data, así se ve la propagación [01:30]:

javascript let person = { name: "Óscar", age: 28 }; let country = "MX";

let data = { ...person, country }; console.log(data); // { name: "Óscar", age: 28, country: "MX" }

Los tres puntos antes de person desestructuran sus propiedades y las inyectan dentro del nuevo objeto. Y aquí viene lo interesante: puedes agregar valores nuevos antes o después de la propagación.

¿Cómo agregar propiedades nuevas con spread operator?

Si quieres añadir un id al inicio y mantener la información previa, solo lo declaras en el orden que necesites [02:45]:

javascript let data = { id: 1, ...person, country }; // { id: 1, name: "Óscar", age: 28, country: "MX" }

¿Para qué sirve el spread operator? Sirve para copiar y combinar propiedades de objetos o elementos de arreglos en una nueva estructura usando .... Es útil cuando un objeto tiene muchas propiedades y no quieres escribir person.name, person.age una por una.

¿Qué son los rest parameters y cuándo usarlos?

Los rest parameters usan la misma sintaxis (...), pero con una intención distinta: agrupar un número indefinido de argumentos dentro de una función en un solo arreglo. Mientras el spread expande, el rest recoge.

Mira este ejemplo con una función sum que recibe un primer parámetro fijo y luego cualquier cantidad de valores adicionales [04:10]:

javascript function sum(num, ...values) { console.log(values); console.log(num + values[0]); return num + values[0]; }

sum(1, 1, 2, 3);

Al ejecutar la función, values se convierte en un arreglo con [1, 2, 3]. El primer 1 no aparece ahí porque ya está asignado al parámetro num. Por eso el rest parameter solo captura lo que sobra después de los parámetros nombrados.

¿Cuál es la diferencia entre spread operator y rest parameters?

Aunque comparten la sintaxis de los tres puntos, su rol depende del contexto:

• Spread operator: expande elementos de un objeto o arreglo dentro de otra estructura. Lo usas al construir o copiar.
• Rest parameters: empaqueta múltiples argumentos en un solo arreglo dentro de la firma de una función. Lo usas al recibir.
• Posición: spread aparece donde se construye el dato, rest aparece en la lista de parámetros.

Esa diferencia es la clave para no confundirlos cuando los leas en código ajeno.

¿Cuándo conviene usar rest parameters en una función?

Los rest parameters son útiles cuando no sabes cuántos argumentos vas a recibir, pero también traen un riesgo: una función con demasiados parámetros se vuelve confusa de mantener.

La recomendación práctica es no abusar. Si tu función ya pide más de tres parámetros explícitos, piensa dos veces antes de sumarle un rest. Una función que recibe 20 o 30 elementos suele ser señal de que la lógica necesita refactor, no más sintaxis.

¿Cuándo NO usar rest parameters? Evítalos cuando puedas nombrar los parámetros con claridad o cuando el número de argumentos esperados sea predecible. Reservalos para casos donde la cantidad realmente varía, como funciones de suma, logs o utilidades genéricas.

También puedes combinar rest con desestructuración para extraer valores específicos del arreglo capturado, lo que te da aún más flexibilidad al diseñar funciones reutilizables.

Por qué el spread operator mejora la lectura de tu código

En aplicaciones reales, los objetos crecen rápido. Tener que escribir person.name, person.age, person.email y así sucesivamente cada vez que necesitas reconstruir un objeto vuelve el código pesado y propenso a errores.

Con ...person traes todo el contenido en una sola línea, mantienes la intención clara y reduces el ruido visual. Esa es la verdadera ventaja: tu lógica se concentra en lo que cambia, no en repetir lo que ya existe.

¿Ya probaste estos operadores en tu propio código? Comparte en los comentarios cómo los estás usando o qué dudas te surgieron al combinarlos con desestructuración.