Parámetros Rest y Sintaxis Spread en JavaScript
Aprende los parámetros rest y la sintaxis spread de JavaScript: cómo recopilar argumentos en un array y expandir iterables en llamadas, arrays y objetos.
En JavaScript, el token de tres puntos ... realiza dos tareas opuestas dependiendo de dónde se escriba. Como parámetro de función recopila múltiples argumentos en un solo array — eso es un parámetro rest. En cualquier otro lugar expande un iterable u object en sus elementos individuales — eso es la sintaxis spread. El mismo símbolo, con un significado espejo.
Ambos se introdujeron en ES6 (2015). Esta página cubre los parámetros rest (incluida la regla de que deben ir al final), spread en llamadas a funciones, literales de array y literales de object, cómo copiar y combinar con spread, en qué se diferencian rest y spread, y por qué ambos superan al antiguo objeto arguments.
Entendiendo los Parámetros Rest en JavaScript
Un parámetro rest permite que una función acepte un número indefinido de argumentos y los reciba como un array real. Se escribe ... seguido de un nombre; ese nombre se convierte en un array que contiene todos los argumentos que no fueron emparejados por un parámetro anterior.
Sintaxis y Uso
En el ejemplo a continuación, numbers es un array ordinario, por lo que puedes llamar métodos de array como reduce directamente sobre él — sin necesidad de conversión.
El Parámetro Rest Debe Ir al Final
Una función solo puede tener un parámetro rest, y debe ser el último en la lista de parámetros. Los parámetros con nombre anteriores se completan primero; el parámetro rest luego recoge todo lo que queda. Colocarlo en cualquier otro lugar es un SyntaxError.
Ventajas Sobre el Objeto arguments
Antes de ES6, la única forma de leer todos los argumentos era el objeto especial arguments disponible dentro de las funciones no flecha. Los parámetros rest son mejores en casi todos los aspectos:
- Un array real.
argumentses similar a un array (tienelengthe índices) pero carece demap,filter,reduce, etc. Un parámetro rest es un array genuino. - Explícito y legible. La firma
function sum(...numbers)le indica al lector que la función acepta una lista variable.argumentses invisible en la firma. - Puedes nombrar solo los extras. Combina parámetros fijos con un parámetro rest, como se muestra arriba —
argumentssiempre contiene todos los argumentos, incluidos los que ya nombraste. - Funciona con funciones flecha. Las funciones flecha no tienen su propio objeto
arguments, por lo que un parámetro rest es la única forma de recopilar argumentos variables en una función flecha.
Profundizando en la Sintaxis Spread
La sintaxis spread expande un iterable — un array, string, Set, Map o cualquier iterable — en sus elementos individuales donde se espere una lista de valores. Los tres contextos donde se usa son llamadas a funciones, literales de array y literales de object.
Spread en Literales de Array
Dentro de [ ], spread coloca cada elemento de un iterable en el nuevo array. Esta es la forma más limpia de insertar un array dentro de otro en cualquier posición:
Dado que los string son iterables, expandir uno produce un array de sus caracteres:
Spread en Llamadas a Funciones
En una llamada a función, spread convierte un array de vuelta en una lista de argumentos separados. Esto reemplaza el antiguo patrón func.apply(null, array):
Spread en Literales de Object
Dentro de { }, spread copia las propiedades enumerables propias de un object en un nuevo object. Cuando las claves colisionan, el valor posterior gana — lo que hace que spread sea perfecto para aplicar sobreescrituras o valores predeterminados:
Copiar y Combinar
Spread es la forma idiomática de hacer una copia superficial o combinar colecciones sin mutar los originales:
Spread es superficial. Solo copia los valores del nivel superior. Los objetos y arrays anidados siguen siendo compartidos por referencia, por lo que mutar un valor anidado afecta a ambas copias:
Rest vs Spread: Cómo Distinguirlos
El token ... luce idéntico en ambos roles, así que usa la posición para determinar cuál estás leyendo:
| Parámetro rest | Sintaxis spread | |
|---|---|---|
| Dónde aparece | En la lista de parámetros de una función | En una llamada, literal de array o literal de object |
| Qué hace | Reúne múltiples valores en un array | Expande un iterable/object en múltiples valores |
Lado del = | Lado izquierdo (un objetivo de desestructuración) | Lado derecho (un valor que se produce) |
| Ejemplo | function f(...args) {} | f(...args) |
Una prueba sencilla: si ...x está recibiendo valores, es rest; si está produciendo valores, es spread.
Combinando Parámetros Rest y Sintaxis Spread
Los dos son imágenes espejo, por lo que se combinan de forma natural — rest recopila argumentos en un array a la entrada, y spread expande un array en argumentos a la salida:
Un patrón común en el mundo real es un envoltorio que reenvía todos los argumentos a otra función:
Desestructuración con el Patrón Rest
En una asignación de desestructuración, el patrón rest captura las propiedades o elementos que no nombraste explícitamente. En objetos produce un object con las claves sobrantes; en arrays, un array con los elementos restantes.
Conclusión
El token ... es una de las adiciones más útiles que ES6 hizo a JavaScript. Como parámetro rest reúne un número variable de argumentos en un array limpio (y reemplaza al incómodo objeto arguments); como sintaxis spread expande iterables en llamadas a funciones, literales de array y literales de object, proporcionando copias superficiales y combinaciones concisas. Recuerda las dos reglas que más confunden: un parámetro rest debe ser el último parámetro, y las copias con spread son superficiales.
Temas Relacionados
- Asignación de desestructuración — extrae valores de arrays y objetos, frecuentemente combinado con el patrón rest.
- JavaScript Array — la estructura de datos que los parámetros rest te entregan y que spread expande.
- Funciones flecha revisitadas — por qué las funciones flecha dependen de los parámetros rest en lugar de
arguments. - Enlace de funciones — control del
this, frecuentemente combinado con spread al reenviar argumentos.