Funciones en JavaScript (3/3)

Esta entrada forma parte de una serie.

1. Funciones en JavaScript (1/3)
2. Funciones en JavaScript (2/3)
3. Funciones en JavaScript (3/3)  ← Estamos en esta entrada

Parámetros REST

Podemos pasar una serie de parámetros a una función. Si pasamos dos parámetros a una función que tiene dos argumentos todo está correcto, pero ¿qué sucece si pasamos más parámetros de los que recoge la función?

Veamos un ejemplo de una función que recoge dos ciudades pero donde pasamos a la función más de dos ciudades.

En este caso, la función únicamente recibirá las dos primeras ciudades y el resto de parámetros que hemos pasado no se tendrán en consideración.

Imagen 1

 function listaCiudades(c1,c2){  
  console.log("Ciudad 1: ",c1);  
  console.log("Ciudad 2: ",c2);  
 }  
 listaCiudades("Madrid","Paris","Londres","Berlín","Roma"); //invocamos la función 

Supongamos que los parámetros que vamos a pasar a la función proceden de un procedimiento que no sabemos cuantos valores nos proporcionará. En este caso, si queremos que a la función lleguen el resto de parámetros pero no sabemos cuantos podrán llegar a ser, podemos utilizar un argumento adicional en la función precedido de tres puntitos, por ejemplo ...resto_ciudades, de forma que este argumento adicional recogerá todos los parámetros adicionales que le pasemos a la función y los recogerá en forma de array. La ventaja del array reside en que es un objeto del que posteriormente podremos extrar todos los elementos que tenga en caso de que así lo deseemos.

Imagen 2

https://repl.it/@valoro/JS-parametros-rest

 //Usando un parámetro de tipo REST  
 function listaCiudades(c1, c2, ...resto_ciudades){  
  console.log("Ciudad 1: ",c1);  
  console.log("Ciudad 2: ",c2);  
  console.log("Resto: ",resto_ciudades);  
 }  
 listaCiudades("Madrid","Paris","Londres","Berlín","Roma"); //invocamos la función  

Parámetros spread

La sintaxis extendida (spread) permite que un elemento iterable (array o string) sea expandido en un  lugar donde es esperado.

Veamos un método alternativo de conseguir el mismo resultado que se muestra en la Imagen 2.

Imagen 3 = Imagen 2

Definimos la variable primeras que es un array que contiene las dos primeras ciudades. Luego invocamos la función pasándola como parámetros la variable primeras precedida de tres puntitos y luego el resto de ciudades. Esos tres puntitos son importantes ya que con ello conseguimos que los parámetros se extiendan (spread) o se expandan.

https://repl.it/@valoro/JS-parametros-spread1

 var primeras=["Madrid","Paris"];  
 listaCiudades(...primeras,"Londres","Berlín","Roma"); //invocamos la función  
 function listaCiudades(c1, c2, ...resto_ciudades){  
  console.log("Ciudad 1: ",c1);  
  console.log("Ciudad 2: ",c2);  
  console.log("Resto: ",resto_ciudades);  
 }  

Si eliminamos los tres puntitos que preceden al argumento primeras obtendríamos el siguiente resultado donde podemos comprobar que ahora la Ciudad 1 pasa a ser un array con las dos primeras ciudades, eso quiere decir que no se ha extendido o expandido el contenido del array denominado primeras.

Imagen 4

Parámetros spread, otro ejemplo

En este caso vamos a sumar tres números contenidos en un array. Creamos una función suma con tres argumentos. La forma de invocar la función es incluir como parámetros estos números, pero existe un problema ya que si invocamos escribiendo suma(numeritos) obtendremos un error ya que la función suma esparaba tres valores x, y, z siendo que numeritos es un array, por lo que son diferentes. El array es un objeto y x, y, z son variables numéricas. Esto se soluciona poniendo tres puntitos que preceden al argumento numeritos, y lo que hace es expandir o extender (spred) los valores que contiene el array pasándoselos a la función uno a uno, de forma separada, ya que esto es lo que necesita la función.

Imagen 5

https://repl.it/@valoro/JS-parametros-spread2

 function suma(x, y, z) {  
  return x + y + z;  
 }  
 const numeritos = [1, 2, 3];  
 console.log("El acumulado de los tres valores es: ",suma(...numeritos));    

Parámetros rest y spread

En este ejemplo vamos a sumar una serie de números que se encuentran contenidos en un array, donde no se sabe a priori la cantidad de valores que contendrá el array. Y por lo tanto, no sabemos la cantidad de cifras que tendremos que sumar.

Imagen 6

https://repl.it/@valoro/JS-parametros-spread3

Disponemos de un array denominado numeritos que contiene cinco valores numéricos. Para invocar la función lo hacemos con suma(...numeritos). Los tres puntos que preceden al nombre del array son importantes ya que permiten extender (sprear) o expandir los valores del array para que llegen a la función en forma de valores numéricos individuales.

Por otro lado, la función recibe el argumento numeritos llamándolo n y hemos tenido que poner tres puntitos delante de n para que reciba un número indeterminado de valores, esto es, se trata de parámtros rest. En este caso el resto de parámtros son todos ya que n recoge todos los parámetros que se le pasan, desde el primero.

Hemos puesto la función al final del código ya que al ser una función que lleva nombre (no es una función anónima) podemos poner la función donde queramos, y hemos decidido ponerla al final. Esto no se puede hacer en otros lenguajes, por ejemplo en Python, que requieren que la función se encuentre declarada antes de invocarla.

 const numeritos = [1, 2, 3, 4, 5];  
 console.log("El acumulado es: ",suma(...numeritos));  
 function suma(...n) {  
  var total=0;  
  n.forEach(function(item){  
   total+=item;  
  });  
  return total;  
 }