ES6: Parámetros por defecto en JavaScript
Tags: javascript, webdev, es6, spanish
Published: 2020-08-19 18:45:02

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: 

```javascript
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: 

```javascript
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:

```javascript
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:

```javascript
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.

```javascript
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:

```javascript
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