Parámetros con valores predeterminados en funciones Javascript ES6

  • Por
Conoce la nueva característica de Javascript ES6 que te permite definir valores predeterminados para los parámetros de las funciones.

En la mayoría de los lenguajes de programación se permite definir valores predeterminados a los parámetros recibidos en las funciones, por lo que esta nueva característica de ES6 no sorprenderá seguramente a la mayoría de los lectores. No obstante es algo nuevo en las últimas versiones de Javascript, por lo que vamos a analizar con detalle esta característica del lenguaje.

Básicamente, los valores por defecto en los parámetros permiten asignar de manera predeterminada datos, que se asignan a los argumentos de la función, en caso que no se indique ningún valor en su invocación. Esos datos predeterminados se indican en la declaración de la función y resultan muy cómodos, a la vez que añaden versatilidad a las funciones de Javascript. Veremos a continuación ejemplos con los que aclarar posibles dudas y estudiar el detalle de este comportamiento.

Nota: Por si aún te surgen dudas sobre por qué es importante esta novedad de ES6, puedes ver cómo se tenía que hacer a anteriormente este mismo comportamiento "a mano", ya que es algo que realmente resulta de mucha utilidad en el día a día de la programación y Javascript no lo soportaba. Sobrecarga de funciones y parámetros por defecto con ES5.

Definir parámetros con valores por defecto en Javascript

Igual que en otros lenguajes, para definir los valores predeterminados de los parámetros, realizamos una asignación de esos valores a los parámetros en la cabecera de la función

function saludar(nombre = 'Miguel Angel') {
  console.log('Hola ' + nombre);
}

Esta función recibe un parámetro llamado "nombre", con un valor predeterminado. Este valor se asignará en caso que al invocar a la función no le pasemos nada.

saludar();

Eso produciría la salida por consola "Hola Miguel Angel".

Pero, aunque indiquemos un valor predeterminado, podemos seguir invocando a la función enviando un valor diferente como parámetro.

saludar('DesarrolloWeb.com');

Justamente ésta es la versatilidad. La función sigue trabajando tal como lo conocíamos, agregando la posibilidad de tener un parámetro definido aunque no le pasemos nada.

El orden de los valores predeterminados a los parámetros importa

Los parámetros predeterminados en las funciones son muy fáciles de implementar, sin embargo tenemos que seguir unas pocas reglas. Básicamente, la más importante es la del orden de los parámetros en las llamadas a las funciones, que debe realizarse tal como está definido en la cabecera de la función. Esto es obvio, pero afecta directamente a los parámetros con valores por defecto en las funciones.

En resumen queremos hacer notar que, en una función donde unos argumentos tienen valores por defecto y otros no, debemos asegurarnos de colocar valores predeterminados en los últimos argumentos y no en los primeros. Creo que se ve mejor con un ejemplo.

Tenemos una función llamada "potencia" que calcula la potencia entre la base y el exponente. La base siempre la tenemos que indicar, pero sin embargo el exponente queremos que tenga un valor predeterminado. Si no indicamos nada, se entiende que el exponente será 2.

La función en cuestión es esta:

function potencia(base, exponente = 2) {
  let resultado = 1;
  for (let i = 0; i < exponente; i++) {
    resultado *= base;
  }
  return resultado;
}

console.log(potencia(3)); // indica 9 como resultado
console.log(potencia(3, 3)); // indica 27 como resultado

Fíjate que el parámetro que tiene valor por defecto es el último parámetro. Así te funcionará bien, puesto que si lo hiciéramos al revés no obtendríamos un resultado correcto.

Observa ahora este código:

function potenciaMal(exponente = 2, base) {
  let resultado = 1;
  for (let i = 0; i < exponente; i++) {
    resultado *= base;
  }
  return resultado;
}

En este caso tenemos un problema por haber colocado valor predeterminado en el primer parámetro y en el segundo no. Se apreciará si enviamos un único parámetro a la función, donde obtendremos resultados quizás inesperados:

console.log(potenciaMal(3)); // esto muestra NaN

El resultado ahora es "Not a Number" (NaN) porque el único valor indicado al invocar la función se asocia al primer parámetro (manda el orden de los parámetros en la declaración de la función, sin importar si existen o no valores predeterminados). El problema por tanto se nos da con el segundo argumento, que no tenía un valor predeterminado, y al no enviarlo en la invocación simplemente se queda indefinido. Al realizar los cálculos la función nos dice que el resultado no es un número (NaN).

Si aún no lo ves, puedes leer el código de esta función, que tiene el mismo problema.

function log(valor1 = 'Predeterminado', valor2) {
  console.log(valor1);
  console.log(valor2);
}

Si invocas la función enviando un solo parámetro, observarás el error:

log('algo'); // escribe 'algo' y luego 'undefined'

Usar variables para indicar los valores predeterminados

Algo interesante que podemos hacer para definir los valores predeterminados es usar variables. Por ejemplo:

let escuela = 'EscuelaIT';
function saludar(nombre = escuela) {
  console.log('Hola ' + nombre);
}

Ahora, si llamamos a saludar() sin enviar parámetros, dirá "Hola EscuelaIT".

Esto podría ser todavía más útil en un caso como el siguiente:

function potencia(base, exponente = base) {
  let resultado = 1;
  for (let i = 0; i < exponente; i++) {
    resultado *= base;
  }
  return resultado;
}

Como puedes observar, el valor por defecto indicado para el argumento "exponente" será el mismo valor que el indicado para "base". Así, indicada una base, se calculará la potencia cuyo exponente es la misma base.

console.log(potencia(1)); // muestra 1
console.log(potencia(2)); // muestra 4
console.log(potencia(3)); // muestra 27
console.log(potencia(4)); // muestra 256
console.log(potencia(4, 2)); // muestra 16
console.log(potencia(2, 1)); // muestra 2

Conclusión

Los valores predeterminados dan mucho juego. De hecho, en Javascript se venían usando, aunque había que programar de manera manual la función para que, en caso de no recibir parámetros se tomasen valores predeterminados, agregando líneas de código a la función, que a partir de ahora y gracias a ES6 se hacen innecesarias.

Puedes consultar otra cantidad de interesantes novedades del lenguaje en el Manual de Javascript con ECMAScript 2015.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Olga

04/12/2017
Llevábamos tiempo esperando
Esto de los parámetros predeterminados era una deuda histórica de Javascript con los desarrolladores. Me alegro que ya esté disponible.