ES6: parámetros por defecto

Otro gran feature sin duda alguna, flexible y eficaz.

Hola Chic@s
ES6

• Parametros por defecto

function newUser(name, age, country) {
    var name = name || "Àlexa";
    var age = age || 24;
    var country = country || "COL";
    console.log(name, age, country);
}

newUser();
newUser("Oscar", 34, "MX");

function newAdmin(name = "Alexa", age = 24, country = "COL") {
    console.log(name, age, country);
}

newAdmin()
newAdmin("Oscar", 34, "MX");

Apunte | Notion

Si, solo usaran 1 parámetro por defecto este debe ir al final.

LINK: https://pogolo.notion.site/6-ES6-par-metros-por-defecto-3401cd88153048dca04f88efd7597158

En caso de no saber algún valor del usuario (en una función en este caso) se puede poner uno por defecto, con " || " seguido del valor, quedando así:

|| "Raúl";
|| "32"

Se puede leer como “Ó Raúl”, " Ó 32", respectivamente.

• Ejemplo de Parámetros por Defecto (forma antigua)

Function newUser(name, age) {
var name = name || 'Raúl';
var age = age || 32;
}

Pudiéndose leer como: "El valor (name ó age) es igual a lo que introduzca el usuario, si no, entonces es: valor por defecto

• Nueva forma por ES6

function Admin(name = 'Raúl', age = 32) {
}

Esta forma es más rápida y corta, pero ambas son legibles

OTRA FORMA :
//nullish coalescing operator "??"
function Users(name,age,country) {
    console.log(name??"user",age??0,country??"default");
}

Users();
Users("marco",25,"nicaragua");

Comando ASCII para | es alt + 124

Cuando dijiste crear un usuario me imaginé que sería un objeto y creé esto:

// Before ES6
function newUser(name, age, country) {
    this.name = name || 'Oscar';
    this.age = age || 19;
    this.country = country || 'Colombia';
    this.showProperties = function() {
        console.log(this.name, this.age, this.country);
    }
}

let user1 = new newUser();
user1.showProperties();

let user2 = new newUser('Kevin', 20, 'México');
user2.showProperties();

// After ES6
function newUser(name = 'Oscar', age = 19, country = 'Colombia') {
    this.name = name;
    this.age = age;
    this.country = country;
    this.showProperties = function() {
        console.log(this.name, this.age, this.country);
    }
}

let user1 = new newUser();
user1.showProperties();

let user2 = new newUser('Kevin', 20, 'México');
user2.showProperties();

Hay un problema con el ejemplo, en realidad dos teniendo en cuenta que usa var en vez de const o let
var age = age || 24; si el valor que recibe age es 0, lo que se almacena es 34, esto porque 0 es falsy, para evitar eso la forma correcta seria
const age = age ?? 34 de esta forma solo toma 34 si es null o undefined

Podemos ver como la cantidad de lineas utiulizadas es mucho menor.

Aca lo use con las arrows function en una variable:

const newAdmin = (name = 'oscar', age = '34', country = 'CL') => console.log(name, age, country)

newAdmin()
newAdmin('Ivan', 21, 'VE')

✅ ¿Qué pasa si queremos enviar solo algunos argumentos y mantener lo demás por defecto?
.
Me hice esta pregunta y ví que otros también se preguntaron lo mismo en la sección de preguntas, tomando el ejemplo del vídeo, ¿Qué pasa si queremos enviar solo la edad y que lo demás mantenga su valor por defecto? Por ejemplo:

function nuevoUsuario(name = 'Oscar', age = 32, country = 'CL'){
    console.log(name, age, country);
}

nuevoUsuario(64);

Queremos que en este caso, la función retorne ‘Oscar’, 64, CL. Pero hacerlo de esta manera generará una salida inesperada, porque la función está esperando un nombre como primer argumento
.
Para resolver esto, bastaría con escribir los valores por defecto como argumentos en la función y cambiar solo la edad, pero eso haría que los parámetros por defecto perdieran su sentido. También podríamos modificar el orden de los parámetros, pero ¿Y si estamos trabajando en un gran proyecto y modificar la función ya no es viable? Después de probar varias cosas llegué a esta solución:
.

function nuevoUsuario(name = 'Oscar', age = 32, country = 'CL'){
    console.log(name, age, country);
}

nuevoUsuario(undefined, 64, undefined);

//SALIDA: Oscar 64 CL

.
Si enviamos un argumento como undefined, Javascript tomará como prioridad el valor del parámetro por defecto, digamos que de alguna manera “Lo ignora”, eso nos da completa libertad al momento de usar parámetros por defecto para algunos argumentos y otros no.
.
👀 OJO: Esto fue parte de mis experimentos bizarros (En el sentido anglosajón de la palabra xd), no estoy seguro de si esto es una mala práctica o algo que genere problemas en el código a futuro, si alguien con más experiencia puede aportar sobre eso sería genial.

ES6: parámetros por defecto

En ECMAScript 6 (ES6) y versiones posteriores del estándar JavaScript, se introdujeron mejoras en la sintaxis y funcionalidades del lenguaje. Una de estas mejoras fue la capacidad de definir valores por defecto para los parámetros de las funciones.

Esto permite que una función pueda ser llamada con menos argumentos de los esperados y los parámetros faltantes tomarán automáticamente los valores predeterminados especificados.

La sintaxis para definir parámetros por defecto en ES6 es la siguiente:

function nombreFuncion(parametro1 = valorPorDefecto1, parametro2 = valorPorDefecto2) {
  // Cuerpo de la función
}

Aquí hay un ejemplo simple:

function saludar(nombre = "Usuario") {
  console.log(`Hola, ${nombre}!`);
}

saludar();         // Salida: Hola, Usuario!
saludar("Juan");   // Salida: Hola, Juan!

En este ejemplo, el parámetro nombre tiene un valor por defecto de "Usuario". Si no se proporciona ningún argumento al llamar a la función, el valor por defecto se utilizará.
Si se proporciona un argumento, ese argumento reemplazará al valor por defecto.

Ten en cuenta que los valores por defecto se evalúan en el momento en que se llama la función, por lo que si usas valores mutables (como objetos o arrays) como valores por defecto, debes tener cuidado para evitar comportamientos inesperados.

También es importante mencionar que los parámetros por defecto pueden combinarse con parámetros regulares y también pueden ser utilizados en funciones de flecha (arrow functions) de la misma manera.

// Combinando parámetros regulares y por defecto
function mezclarIngredientes(ingrediente1, ingrediente2 = "sal", ingrediente3 = "azúcar") {
  console.log(`Mezclando ${ingrediente1}, ${ingrediente2} y ${ingrediente3}`);
}

mezclarIngredientes("harina");   // Salida: Mezclando harina, sal y azúcar

// Utilizando parámetros por defecto en una arrow function
const calcularPrecioTotal = (precioUnitario, cantidad = 1) => precioUnitario * cantidad;
console.log(calcularPrecioTotal(10));    // Salida: 10
console.log(calcularPrecioTotal(5, 3));  // Salida: 15

En resumen, los parámetros por defecto en ES6 son una característica útil que simplifica la escritura de funciones al permitir valores predefinidos para los parámetros que no se proporcionen al llamar a la función.

Espero les sirva. 👨‍💻

Recursos complementarios 😄

• Default parameters

Antes de ES6: Se asignaban los valores por defecto de los parámetros en el cuerpo de la función, con el operador OR : ||

Despues: ES6 : Asignamos a los parámetros su valor por defecto en los paréntesis con el operador igual =. Sintáxis mas corta y legible…

Super!

Cosa curiosa si le pones let en lugar var, suelta error el código xd

function newuser(name,age,country){
    var name = name || "Oscar"; 
    var age = age || 32
    var country = country || "MX"
    console.log(name,age,country)
}

📔 Archivos del Proyecto 📔

Pasos 📌

• • Dentro de la carpeta es6, crear el archivo llamado: 04-default-params.js
  • • ◦ El código de los ejercicios queda:

//Compilar: seleccionar el código + click derecho + Run Code

//Ejercicio #1
function newUser(name, age, country) {
	var name = name || 'Oscar';
	var age = age || 34;
	var country = country || 'MX';
	console.log(name, age, country);
}

newUser();
newUser('David', 15, 'CO');

/*output
Oscar 34 MX
David 15 CO
*/

//Ejercicio #2
//Default params
function newAdmin(name = 'Oscar', age = 32, country = 'CL'){
	console.log(name, age, country);
}

newAdmin();
newAdmin('Ana', 28, 'PE');

/*output
Oscar 32 CL
Ana 28 PE
*/

6/35 ES6: parámetros por defecto

Antes de ES& se utilizaba una variable y el operador OR para establecer valores por defecto en los parámetros de una función. Con los parametros por defecto añadidos en ES6, se puede establecer valores por defecto directamente en los parámetros, lo que mejora la legibilidad y el mantenimiento del código.

Además, se debe tener en cuenta que los parámetros por defecto siempre deben estar en las posiciones finales.

// Antes de ES6
function sumar (number1, number2) {
	var _number1 = number || 0
	var _number2 = number || 0

return _number1 + _number2
}

sumar (3,4) // 7
sumar (3) // 3
sumar () // 0

Con los parámetros por defecto ES6

function sumar (number1 = 0, number2 = 0) {
	return number1 + number2
}

sumar(3,4) // 7
sumar(3)   // 3
sumar()    // 0

Los parámetros por defecto se deben coloar en las posiciones finales:

// Mal
function sumar (number1 = 0, number2) {...}
sumar(3) // number1 = 3 y number2 = undefined

// Bien 
function sumar (number1, number2 = 0) {...}

sumar(3) // number1 = 3 y number 2 = 0

me esta llamando mucho la atencion lo facil y flexible que es JS

DEFAULT PARAMETERS

//DEFAULT PARAMETERS
//If we want to assign a default value to the parameters of our function we can do it in two ways

//OLD ONE
function foo(name, age, country){
    var name = name || 'David';
    var age = age || 21;
    var country = country || 'CO';
    console.log(name, age, country);
}

//NEW ONE FROM ES6
function woo(name = 'David', age = 21, country = 'CO'){
    console.log(name, age, country);
}

//without arguments
foo();
woo();
//with arguments
foo('Pedro', 50, 'FR');
woo('Pedro', 50, 'FR');

Imagen del antes y despues:

Me parece que se podria poner un nombre diferente a las variables y a los parametros que pasan en la funcion, es decir:
function newUser(name, age, country){
var nombre = name || “Daniel”;
var edad = age || 31;
var pais = country || “Colombia”;
}
En mi opinion esto ayuda a las personas que estamos aprendiendo a diferenciar las variables de los parametros.✌️

Práctica

//Forma de pasar parametros por defecto antes de ecmascript6
function newUser(name, age, country) {
    var name = name || 'Benito';
    var age = age || 20;
    var country = country || 'AR';
    console.log(name, age, country);
    console.log(`Name: ${nombre}, Age: ${age}, Country: ${country}`);
}

newUser();
newUser('Rosa', 22, 'CO');

//Forma de pasar parametros por defecto con ecmascript6
function newAdmin(name = 'Admin', age = 20, country = 'MX') {
    console.log(name, age, country);
}

newAdmin();
newAdmin('Checo', 37, 'CH');

Esto está interesante, lo veo como el if(isset($variable)) en PHP

Repositorio github del profe → Archivos manejados en la clase:

• 04-default-params.js

// Desde ES6 podemos pasar los default params como argumento en las funciones.
function newAdmin(name = "Default user name", age = 0, country = "No country select") {
    console.log(`
    Nombre: ${name}
    Edad: ${age}
    País: ${country}`);
}

newAdmin();
newAdmin("Mauricio", 44, "Argentina");

function newUser(name, age, country) {
    var name = name || "User name default";
    var age = age || 0;
    var country = country || "No country select";

    console.log(`Nombre: ${name}
    Edad: ${age}
    País: ${country}`);
}

newUser();
newUser("Mauricio", 44, "Argentina");

Buenisimo, se ahorran muchas lineas de código y es más fácil de entender

Me están gustando mucho estas clases.

Me están gustando mucho estas clases

function newUser(name, age, country) {
    var name = name || 'Oscar';
    var age = age || 34;
    var country = country || 'CR';
    console.log(name, age, country);
}

newUser();
newUser('David', 15,'PE');

//New 

function newAdmin(name = 'Oscar', age = 32, country = 'CL'){
    console.log(name. age, country);
}

newAdmin();
newAdmin('Ana', 28, 'MX');

Default Params

con los nuevos parámetros por defecto, tenemos una manera más amigable de crear estos parámetros, antes se hacía así:

Forma clásica:

function newUser(name, age, country) {
	var name = name || "Oscar";
	var age = age || 30;
	var country = contry || "MX";
	console.log(name, age, country;
}

newUser(); // Esto al no pasarle ningun valor. retorna los parámetros por defecto.
newUser("Franco",27,"Arg"); // Esto retornaría con los argumentos que pasamos.

Nueva forma con ES6:

function newAdmin(name="Oscar", age=30, country="MX") {
	console.log(name, age, country)
}

newUser(); // Esto retorna los parámetros por defecto.
newUser("Franco", 27, "Arg"); // Esto retorna con los valores pasados como argumentos.

Parámetros por Defecto
Parámetros por defecto que ayudan a sacarle ventaja a las Funciones.
//tradicional//
function newUser(name,age,country){
var name = name || ‘ingresa Nombre’;
var age = age || 100;
var country = country || ‘non’;
console.log(name,age,country);
}
newUser();
newUser(‘felipe’,29, ‘Bog’);

//simplificado//

function newUser( name = ‘julian’, age = 28, country = ‘CO’){
console.log(name, age, country)
};
newUser();
newUser(‘felipe’, 29, ‘bar’);