ES6: Parámetros por defecto en JavaScript

Los parámetros por defecto son una peculiaridad bastante interesante y sencilla de comprender añadida a la especificación ES6 del lenguaje.

Para contextualizar un poco sus usos y aplicaciones veamos un ejemplo de lo que los programadores de JS tenían que hacer antes de que apareciera esta característica:

function fullName(name, last_name){
 var name = name || "User";
 var last_name = last_name || "User";
  return (`El nombre es: ${name} y el apellido es: ${last_name}`);
}
console.log(fullName("Rodrigo","Perez"));
// "El nombre es: Rodrigo y el apellido es: Perez"
console.log(fullName("Alicia"));
//"El nombre es: Alicia y el apellido es: User"
console.log(fullName(undefined,"Suarez"))
//"El nombre es: User y el apellido es: Suarez"
console.log(fullName());
//"El nombre es: User y el apellido es: User"

En el ejemplo anterior la función fullName() recibe 2 parámetros: name y last_name. Para hacer que ambos sean parámetros por defecto tenemos que añadir unas líneas de código en el cuerpo de la función.

Es posible llegar a los mismos resultados usando el operador ternario de JS, de la siguiente manera:

function fullName(name, last_name){
  var name = name == undefined ? "User" : name;
  var last_name = last_name == undefined ? "User" : last_name;
  return (`El nombre es: ${name} y el apellido es: ${last_name}`);
}

console.log(fullName("Rodrigo","Perez"));
// "El nombre es: Rodrigo y el apellido es: Perez"
console.log(fullName("Alicia"));
//"El nombre es: Alicia y el apellido es: User"
console.log(fullName(undefined,"Suarez"))
//"El nombre es: User y el apellido es: Suarez"
console.log(fullName());
//"El nombre es: User y el apellido es: User"

Para los devs junior también se puede llegar a lo mismo usando if's:

function fullName(name, last_name){
  if(name === undefined)
    name = "User";
  if(last_name === undefined)
    last_name = "User";
  return (`El nombre es: ${name} y el apellido es: ${last_name}`);
}

console.log(fullName("Rodrigo","Perez"));
// "El nombre es: Rodrigo y el apellido es: Perez"
console.log(fullName("Alicia"));
//"El nombre es: Alicia y el apellido es: User"
console.log(fullName(undefined,"Suarez"))
//"El nombre es: User y el apellido es: Suarez"
console.log(fullName());
//"El nombre es: User y el apellido es: User"

Como pueden notar todos los anteriores métodos simulando parámetros por defecto ensucian bastante el cuerpo de la función y complican la legibilidad el código, la manera más sencilla y más recomendable de usar es usar los parámetros por defecto de ES6:

function fullName(name ="User", last_name="User"){
  return (`El nombre es: ${name} y el apellido es: ${last_name}`);
}

console.log(fullName("Rodrigo","Perez"));
// "El nombre es: Rodrigo y el apellido es: Perez"
console.log(fullName("Alicia"));
//"El nombre es: Alicia y el apellido es: User"
console.log(fullName(undefined,"Suarez"))
//"El nombre es: User y el apellido es: Suarez"
console.log(fullName());
//"El nombre es: User y el apellido es: User"

Como se puede observar, la función queda bastante más limpia usando esta sintaxis. Basta con igualar los parámetros a los valores que queremos que se impriman si esta es llamada sin parámetros.

Importante!

Si alteramos el orden de los parámetros se pueden obtener resultados no esperados.

function fullName(last_name="User apellido", name ="User" ){
  return (`El nombre es: ${name} y el apellido es: ${last_name}`);
}

console.log(fullName("Rodrigo","Perez"));
// "El nombre es: Perez y el apellido es: Rodrigo"
console.log(fullName("Alicia"));
// "El nombre es: User y el apellido es: Alicia"
console.log(fullName(undefined,"Suarez"))
// "El nombre es: Suarez y el apellido es: User apellido"
console.log(fullName());
// "El nombre es: User y el apellido es: User apellido"

Parámetos por defecto y Arrow Functions

Para usar parámetros por defecto en funciones de tipo flecha, la sintaxis es la misma, a continuación un ejemplo:

const potencia = (base, exponente=2) => base**exponente;

console.log(potencia(3,3)); //27 (3 al cubo = 27)
console.log(potencia(5)); //25 (5 al cuadrado =25)

Conclusiones ✔

• Usa parámetros por defecto con sintaxis ES6 cada vez que lo necesites.

---

Referencias ⚙

• https://www.youtube.com/watch?v=pKftLjPjmRA