Operador Rest, Javascript ES6

  • Por
El operador Rest disponible en Javascript ES6 sirve para recibir cualquier número de parámetros en una función en forma de array.

Esta característica de ES6 nos ofrece otra vía de evitar trabajo repetitivo en las funciones con el tratamiento de parámetros. En este sentido ya vimos que ES6 ofrece la posibilidad de definir valores predeterminados a las funciones, pero ahora el objetivo es bien distinto. El operador rest en realidad sirve para obtener cualquier número de parámetros de una forma estructurada, mediante un array de valores.

En si "rest operator" se escribe mediante tres puntos seguidos, uno detrás de otro (...). Son como los puntos suspensivos de la escritura tradicional. Su funcionamiento es bastante sencillo, como veremos a continuación.

Uso elemental del operador rest

Podemos usar el operador rest en una función, dentro del juego de parámetros definido en su cabecera.

En el siguiente código puedes ver un primer ejemplo de uso, en el que indicamos "...numeros" como parámetros de la función.

function max(...numeros) {
  console.log(numeros);
}

Esto quiere decir que, cualquier cantidad de parámetros enviada a la hora de invocar a la función, se va a estructurar como un array y se va a conocer dentro de la función con el nombre de "numeros".

Puedes por tanto invocar a la función con 1 parámetro, 2, 3, 100 o incluso sin parámetros… Tanto da. Lo que tendrás siempre en el parámetro "numero" es un array, con 1, 2, 3, 100 o cero casillas.

Puedes comprobarlo al invocar a la anterior función con cualquier juego de parámetros.

max(1, 2, 6);
max();
max(1, 5, 6, 7, 10001);

Incluso podrías mezclar los tipos de los parámetros.

max("test", 4, true, 2000, "90");

Siempre te llega un array

Queremos insistir sobre este punto, pues la clave es que, al usar el operador rest, siempre te llega un array como valor del parámetro. Por ello al menos estas seguro que podrás usar los métodos conocidos para recorrido o manipulación del array.

Anteriormente podíamos también obtener cualquier número de parámetros en Javascript mediante el objeto arguments disponible en la función. La diferencia es que arguments no era un array y no permitía directamente ciertos tipos de operaciones, hasta que no lo convirtiéramos en un array mediante algún mecanismo.

Ejemplo de uso del operador rest

Ahora vamos a ver cómo definir bien la función max(), que se encargaría de devolver el valor máximo entre todos los parámetros recibidos en una función. Es decir, max() es una función que puede recibir cualquier número de parámetros y devuelve el valor máximo encontrado en ellos.

Nota: para escribir esta función voy a tener en consideración dos cosas: 1) si no recibo parámetros, voy a devolver el valor cero (0). 2) voy a suponer que todos los parámetros serán valores numéricos.

Mi algoritmo realizará primero una comprobación para ver si no estoy recibiendo ningún parámetro. En ese caso devuelvo cero. Luego tomo como máximo el primer valor y lo voy comparando con el resto de los valores del array.

function max(...numeros) {
  if(numeros.length == 0) {
    return 0;
  }
  let max = numeros[0];
  for(let i = 1; i < numeros.length; i++) {
    if(numeros[i] > max) {
      max = numeros[i];
    }
  }
  return max;
}
Nota: no quiero que pase desapercibido que estoy haciendo un recorrido con el for desde la segunda casilla del array (índice 1) hasta el final, ya que la primera casilla, (índice 0) ya la he tomado como supuesto máximo para comenzar.
console.log(max()); // muesta 0
console.log(max(0, 10)); // muestra 10
console.log(max(0, -10)); // muestra 0
console.log(max(9, -22, 6)); // muestra 9

Tomar sólo los últimos parámetros con el operador rest

El operador rest nos ofrece en el array solamente los parámetros a los que no les hemos asignado un nombre. Es decir, puedo perfectamente en una función recibir un número de parámetros en variables normales y luego cualquier número de parámetros en un array con el operador rest.

Este comportamiento, por ejemplo, nos serviría para simplificar bastante el código de nuestra función max().

function max(max = 0, ...numeros) {
  for(let i = 0; i < numeros.length; i++) {
    if(numeros[i] > max) {
      max = numeros[i];
    }
  }
  return max;
}

Ha quedado bastante más compacto, gracias a que el primer parámetro, que vamos a tomar como supuesto máximo en el algoritmo, lo vamos a recibir de manera individual. Además le hemos asignado el valor predeterminado cero. El resto de parámetros será el array que recorreremos para ir comparando con el supuesto máximo.

Por si el ejemplo anterior no te queda suficientemente claro, tenemos un segundo ejemplo en el que vamos a recibir cualquier número de parámetros. Queremos saber si el primer parámetro se encuentra repetido en cualquiera de los parámetros indicados después.

function enLista(buscar, ...nombres) {
  for(let i = 0; i < nombres.length; i++) {
    if(buscar === nombres[i]) {
      return true;
    }
  }
  return false;
}

console.log(enLista('Miguel', 'Diego', 'Noe', 'Miguel')); // muestra true
console.log(enLista('Miguel', 'Diego', 'Noe', 'Manolo')); // muestra false

Conclusión

El operador Rest no es complicado y nos puede ahorrar código mucho menos legible, y más largo, usado anteriormente para obtener cualquier número de argumentos en una función.

Puedes obtener muchas otras novedades de Javascript en el Manual de ES6.