El ...resto de los parámetros

facebook-svg gplus-svg twitter-svg

La sintaxis del resto de los parámetros nos permite crear un nuevo array con el resto de los argumentos de una función, el resto de las propiedades de un objeto o el resto de los elementos de un array.

El objeto arguments y el resto de los parámetros (...)

El objeto arguments es una variable local disponible dentro de todas las funciones JavaScript que contiene todos los argumentos pasados a la función.

Podemos nombrar algunos argumentos y utilizar el objeto arguments en el mismo tiempo. Por ejemplo podemos escribir una función que toma dos argumentos obligatorios, y los demás opcionales. Pruebe lo siguiente y no olvide abrir su consola:


function argumentsNombres(a,b){
    console.log(arguments)
}
argumentsNombres("a", "b", 1, 3, 4, 56, 7);// devuelve el objeto arguments 

En ES6 podemos agrupar los demás argumentos en un array utilizando la sintaxis del resto de los parámetros (the ...rest of parameters):


function ES6_argumentsNombres(a,b,...losDemasArgumentos){
  console.log(a,b, losDemasArgumentos)
}
ES6_argumentsNombres("a","b",1,3,4,56,7); // devuelve "a" "b" [1, 3, 4, 56, 7]

A diferencia del objeto arguments, ( un objeto iterable pero no un array ), el resto de los argumentos puede ser manipulado utilizando métodos específicos de los arrays como por ejemplo sort, map, forEach o pop.

Arrays y el resto de los parámetros (...)

Supongamos que tenemos una paleta de colores:

const paleta = ['#000000', '#AC1848', '#BFB9A4', '#888B90', '#AAB2B7', '#131315'];

Y queremos utilizar el primer color como color de fondo, mientras que los demás formarán la gama de colores utilizada para dibujar varias pelotas. En este caso podemos utilizar el resto de los parámetros ( ... ) de esta manera:

const [fondo, ...gama] = paleta;

Esto devuelve una primera variable const fondo = '#000000' y un array const gama que contiene las demás colores.


const paleta = ['#000000', '#AC1848', '#BFB9A4', '#888B90', '#AAB2B7', '#131315'];
const [fondo, ...gama] = paleta;
console.log(fondo);// devuelve "#000000"
console.log(gama);// devuelve ["#AC1848", "#BFB9A4", "#888B90", "#AAB2B7", "#131315"]

Objetos y el resto de los parámetros (...)

Supongamos que tenemos un objeto particula:

const particula = {
    _r:25, 
    _color:"tomato", 
    _x:100, 
    _y:100
  };

Queremos desestructurar este objeto para extraer 3 variables: _r (radio), _color (color) y _pos (posición).

const {_r, _color, ..._pos} = particula;

Esto devuelve tres variables:_r, _color y _pos, donde _pos es un nuevo objeto que contiene las demás variables del objeto particula ( _x e _y )


const particula = {
  _r:25, 
  _color:"tomato", 
  _x:100, 
  _y:100
};

const {_r, _color, ..._pos} = particula;

console.log(_r);     // devuelve 25
console.log(_color); // devuelve "tomato"
console.log(_pos);   // devuelve Object { _x: 100, _y: 100 }