"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Argumentos de una función en ES6

Existen muchas novedades respecto a los argumentos de una función en ES6 respecto a las de ES5.

Dentro de los bloques que modifica esta nueva versión del lenguaje, el tema de los argumentos de las funciones es posiblemente donde más cambios se han realizado.

Como son varias cosas, vamos a dividir esta entrada acerca de los argumentos de una función en ES6 en:

  • Parámetros por defecto
  • Parámetros de tipo Rest
  • Parámetros de tipo Spread

Entender y saber aplicar todas estas funcionalidades es indispensable si queremos aprovechar la potencia de ES6.

Parámetros por defecto

Actualmente en ES5 cuando definimos los argumentos tenemos que tener el cuidado de controlar que estos efectivamente vengan cubiertos al invocar la función.

Sencillamente pensemos en el caso de la típica función de suma donde pasamos los dos parámetros a sumar, si llegamos a invocar esta función sin alguno de estos parámetros pasa esto…

Como vemos el primer caso funciona sin problemas, pues le estamos pasando los dos parámetros que la función espera obtener.

Los otros dos arrojan un error, en este caso la consola de mi Firefox responde que no es un número, pues al tratar de encontrar un parametro que no hemos pasado se evalua como undefined.

Para solucionar esta clase de errores en las funciones en ES5 se usaba esta técnica…

function suma(a,b){
  a = a || 8; 
  b = b || 7; 
  return a + b;
}

Lo que hacemos de esta manera es declarar valores por defecto a los parámetros con el operador or, si hacemos esto ahora no fallaría…

Aunque esta técnica es perfectamente válida, resulta un poco engorroso tener que declarar asi los valores por defecto de los parámetros, para solucionar esto en ES6 se usa esta sintaxis mucho más comoda y legible.

function suma(a = 8, b = 7){
  return a + b;
}

No voy a poner la captura de pantalla porque es exactamente igual que la de arriba.

Parámetros de tipo Rest

Los parámetros de tipo Rest se usan cuando nuestra función va a recibir un número indeterminado de parámetros.

La flexibilidad que ofrece esto es enorme, y es algo que ya en ES5 se implementaba, aunque de una forma menos limpia.

Voy a volver a la función de suma, supongamos ahora que lo que queremos es sumar todos los parámetros, pero dejando que nos pasen cuantos quieran.

Esta es la manera de hacerlo en ES5…

function suma(a = 8, b = 7){
  var numeros = Array.prototype.slice.call(arguments),
  var resultado = 0;
  numeros.forEach(function (numero) {
    resultado += numero;
  });
  return resultado;
}

El método es bastante sencillo, estamos creando un Array con todos los argumentos que se han mandado a la función. Despues recorremos de forma secuencial el array y los vamos sumando.

Mientras que un parámetro clásico es un primitivo, es decir, un string, un booleano o un número. Un parámetro de tipo Rest es un array, y dentro de ese array están los parámetros clásicos (Los podemos combinar por supuesto, no tiene porque ser solo un array de strings u otro tipo de dato).

El ejemplo anterior se resuelve en ES6 usando parámetros Rest así..

function suma(...numeros){
  var resultado = 0;
  numeros.forEach(function (numero) {
    resultado += numero;
  });
  return resultado;
}

Se declaran como podemos ver usando tres puntos antes del nombre del parámetro, ese parámetro pasa a ser un array de todos los parámetros declarados (al igual que sucedía cuando usabamos ES5, solo que allí eramos nosotros los que haciamos ese proceso picando código).

Para terminar es necesario mencionar que si usamos un parámetro de tipo Rest no podemos poner ningún otro después, sí que podríamos ponerlos antes.

Para demostraroslo, pensemos (aunque sea una tontería), que queremos a mayores sumar un número que siempre será multiplicado por 10.

Esto funciona…

function suma(numero,...numeros){
  var resultado = 0;
  resultado += numero * 10;
  numeros.forEach(function (numero) {
    resultado += numero;
  });
  return resultado;
}
Esto no…

function suma(...numeros, numero){
  var resultado = 0;
  resultado += numero * 10;
  numeros.forEach(function (numero) {
    resultado += numero;
  });
  return resultado;
}

La primera funciona bien (devuelve 60, es correcto), la segunda ya al declararla falla y arroja un error de sintaxis que indica como decíamos que despues de un Rest no puede haber otro parámetro.

Parámetros de tipo Spread

Mientras que un Rest sirve para pasar una serie de parámetros que automáticamente sean convertidos a un array.

El spread hace todo lo contrario, es un array que es convertido a un serie de parámetros. Se ve claro con un ejemplo…

var parametros = [1, 8, 3, 7];

function suma(a,b,c,d){
  return a+b+c+d;
}

suma(...parametros); // DEVUELVE 19

La sintaxis es igual, también se usan los 3 puntos pero en este caso por el tipo de dato que le estamos pasando (un array) ya sabe que se trata de un parametro de tipo Spread.

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)