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.
Top comments (0)