La sintaxis de los parámetros rest nos permiten representar un número indefinido de argumentos como un array.
Sintaxis
function(a, b, ...theArgs) { // ... }
Descripción
El último parámetro de una función se puede prefijar con ...
, lo que hará que todos los argumentos restantes (suministrados por el usuario) se coloquen dentro de un array de javascript "estándar". Sólo el último parámetro puede ser un "parámetro rest".
function myFun(a, b, ...manyMoreArgs) { console.log("a", a); console.log("b", b); console.log("manyMoreArgs", manyMoreArgs); } myFun("one", "two", "three", "four", "five", "six"); // Console Output: // a, one // b, two // manyMoreArgs, [three, four, five, six]
Diferencia entre los parámetros rest y el objeto arguments
Hay tres principales diferencias entre los parámetros rest y el objeto arguments
:
- los parámetros rest son sólo aquellos a los que no se les ha asignado un nombre, mientras que el objeto
arguments
contiene todos los argumentos que se le han pasado a la función; - el objeto
arguments
no es un array real, mientras que los parámetros rest son instancias deArray
, lo que significa que lo los métodos comosort
,map
,forEach
opop
pueden aplicarse directamente; - el objeto
arguments
tiene una funcionalidad adicional específica para sí mismo (como la propiedadcallee
).
De argumentos a array
Los parámetros rest han sido agregados para reducir el código repetitivo que se usaba en los parámetros.
// Antes de los parámetros rest se realizaba: function f(a, b){ var args = Array.prototype.slice.call(arguments, f.length); // … } // Ahora es equivalente a function f(a, b, ...args) { }
Desestructuración de los parametros rest
Los parámetros rest pueden ser desestructurados, eso significa que sus datos pueden ser desempaquetados dentro de distintas variables. Ver Destructuring assignment.
function f(...[a, b, c]) {
return a + b + c;
}
f(1) // NaN (b y c son indefinidos)
f(1, 2, 3) // 6
f(1, 2, 3, 4) // 6 (el cuarto parámetro no está desestructurado)
Ejemplos
Dado que theArgs
es un arreglo, se puede obtener el tamaño del mismo usando la propiedad length
:
function fun1(...theArgs) { console.log(theArgs.length); } fun1(); // 0 fun1(5); // 1 fun1(5, 6, 7); // 3
En el siguiente ejemplo, se usa un parámetro rest para agrupar todos los argumentos despues del primero. Luego cada uno es multiplicado por el primero y el arreglo es regresado:
function multiply(multiplier, ...theArgs) { return theArgs.map(function (element) { return multiplier * element; }); } var arr = multiply(2, 1, 2, 3); console.log(arr); // [2, 4, 6]
El siguiente ejemplo muestra que se puede usar los métodos de Array
en los parámetros rest , pero no en el objeto arguments
:
function sortRestArgs(...theArgs) { var sortedArgs = theArgs.sort(); return sortedArgs; } console.log(sortRestArgs(5,3,7,1)); // muestra 1,3,5,7 function sortArguments() { var sortedArgs = arguments.sort(); return sortedArgs; // esto nunca va a ocurrir } // throws a TypeError: arguments.sort is not a function console.log(sortArguments(5,3,7,1));
Para poder usar los métodos de Array
en el objeto arguments
, se debe convertir a un arreglo real primero.
Especificaciones
Especificación | Estado | Comentario |
---|---|---|
ECMAScript 2015 (6th Edition, ECMA-262) La definición de 'Function Definitions' en esta especificación. |
Standard | definción inicial. |
ECMAScript Latest Draft (ECMA-262) La definición de 'Function Definitions' en esta especificación. |
Draft |
Compatibilidad en Navegadores
Característica | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Soporte Básico | 47 | (Yes) | 15.0 (15.0) | Sin soporte | 34 | Sin soporte |
Característica | Android | Android Webview | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Soporte Básico | Sin soporte | 47 | 15.0 (15.0) | Sin soporte | Sin soporte | Sin soporte | 47 |