operador rest javascript

El útil operador rest de JavaScript ES6

A la hora de crear una web o tienda digital, el operador rest es una característica de JavaScript ES6 que nos permite evitar el trabajo repetitivo en las funciones con el tratamiento de parámetros. Gracias a ES6, podemos definir valores predeterminados a las funciones, aunque no solo se limita a esto, sino que el operador rest nos va a permitir obtener un número indefinido de parámetros de forma estructurada a través de un array de valores. En este artículo, explicamos cómo utilizarlo, ya que nos permite acortar y simplificar los códigos que se utilizaban antes para obtener cualquier número de argumentos en una función.

Antes de avanzar en la explicación, aclaremos que para introducir el operador rest utilizaremos tres puntos seguidos, como los puntos suspensivos.

Uso básico del operador rest

El uso de rest es bastante sencillo, ya que podemos emplearlo dentro del juego de parámetros definido en la cabecera de una función. Veámoslo con un ejemplo de código en el que indicaremos como parámetro de la función “…numeros”:

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

En este ejemplo, lo que indicamos es que cualquier cantidad de parámetros que se envíen al invocar la función se estructurará como un array y dentro de la función se conocerá con el nombre de “numeros”. De este modo, podremos invocar a la función con el número de parámetros que queramos, teniendo siempre en el parámetro numero un array, con el número de casillas deseado.
Para comprobar esto, basta con invocar a la función anterior utilizando el juego de parámetros que deseemos:

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

Podemos hacerlo así, o también mezclando varios tipos de parámetros:

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

Siempre  llegará un array

Es importante tener en cuenta que siempre que utilicemos el operador rest nos llegará un array como valor del parámetro. De este modo, tenemos la certeza de que podremos utilizar los métodos de recorrido y manipulación de los array. Antes de que tuviésemos el operador rest en JavaScript existía la posibilidad de obtener cualquier número de parámetros a través del objeto arguments disponible en la función. Pero, en ese caso, como arguments no era un array, no permitía algunos tipos de operaciones a menos de que lo transformásemos previamente en un array.

Cómo utilizar la función max()

La función function max() nos permite recibir cualquier número de parámetros, devolviendo siempre el valor máximo de entre todos los recibidos en una función. Cuando escribamos la función debemos tener en cuenta dos puntos importantes. El primero es que partimos de la base de que todos los parámetros van a ser valores numéricos. El segundo es que en caso de no recibir parámetros, siempre devolveremos el valor cero (0).

Por tanto, nuestro algoritmo deberá primeramente comprobar si estamos recibiendo o no parámetros, y en caso negativo, devolverá cero. A continuación, tomaremos como máximo el primer valor y lo compararemos con el resto de 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;
}

En este ejemplo estamos ayudándonos del for para realizar un recorrido desde la segunda casilla del array (índice 1) hasta el final, porque hemos tomado la primera casilla (índice 0) como supuesto máximo para empezar.

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

Recogiendo únicamente los últimos parámetros con el operador rest

Los parámetros a los que no hemos asignado un nombre son los que el operador rest nos va a ofrecer en el array. Por tal motivo, en una función podremos recibir un número de parámetros en variables normales, pero también recibir cualquier número de parámetros en un array gracias al operador rest.

Gracias a este comportamiento el código de function max() se puede simplificar mucho:

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

De este modo el código ha quedado muy reducido, ya que el parámetro que hemos tomado como supuesto máximo (al que hemos asignado el valor predeterminado cero) lo recibiremos de modo individual. Todos los demás parámetros conformarán el array que deberemos recorrer para comparar con ese máximo.

En el siguiente ejemplo vamos a recibir cualquier número de parámetros y comprobaremos si el primero de los parámetros se repite en los parámetros que se indican posteriormente:

function enLista(buscar, ...nombres) {
  for(let i = 0; i < nombres.length; i++) {
    if(buscar === nombres[i]) {
      return true;
    }
  }
  return false;
}
console.log(enLista('José', 'Álvaro', 'María', ' José ')); // muestra true
console.log(enLista(' José ', ' Álvaro ', ' María ', 'Manolo')); // muestra false

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

La copia de seguridad que necesitas para tus dispositivos, tus proyectos y tus datos
Accede a tus archivos desde cualquier dispositivo y lugar de forma segura
pack
10 GB
Gratis
Consigue tu backup ahora