No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

ES6: par谩metros por defecto

6/35
Recursos

Los par谩metros por defecto (default params) consisten en establecer un valor por defecto a los par谩metros de una funci贸n, para asegurar que el c贸digo se ejecute correctamente en el caso de que no se establezcan los argumentos correspondientes en la invocaci贸n de la funci贸n.

C贸mo era utilizar valores por defecto antes de ES6

Tal como puedes ver en el siguiente c贸digo, la funci贸n sumar recibe dos par谩metros y retorna el valor total. Sin embargo, si alguien no decide poner alguno o todos los par谩metros necesarios, pues que el programa no funcionar谩 correctamente.

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

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

Antes de ES6, se deb铆a establecer una variable y utilizar el operador OR ( ||) con el valor por defecto necesario. El caracter guion bajo ( _) lo utilizo para diferenciar el par谩metro de la funci贸n de la variable declarada.

function sumar(number1, number2){
  var _number1 = number1 || 0
  var _number2 = number2 || 0
  
  return _number1 + _number2
}

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

C贸mo utilizar los par谩metros por defecto

Con los par谩metros por defectos a帽adidos en ES6, eliminamos las declaraciones para mejorar la legibilidad y el mantenimiento del c贸digo de la siguiente manera:

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

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

Puedes utilizar cualquier valor, siempre que sea necesario.

Posici贸n de los par谩metros por defecto

Si obligatoriamente necesitas el valor como argumento, ten presente que los par谩metros por defecto siempre deben estar 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 number2 = 0

Contribuci贸n creada por Andr茅s Guano (Platzi Contributor).

Aportes 41

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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");

Por si desean saber m谩s sobre los p谩rametros por defecto:
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Functions/Default_parameters

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.

Por aqu铆 puedes ampliar informaci贸n sobre este tema: Default parameters

Dejo por aqu铆 m谩s documentaci贸n que me ha venido bien.
https://www.w3schools.com/js/js_es6.asp#mark_param

Un saludo!!

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')

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 馃槃

![](https://static.platzi.com/media/user_upload/12-51c48f89-3646-49dc-9dd4-0cca107dc458.jpg)
隆Qu茅 tal compa帽eros! Los par谩metros por defecto deben siempre ir al final de la lista de par谩metros al declarar la funci贸n.

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鈥

鉁 驴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 鈥極scar鈥, 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 鈥淟o 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.

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 || 鈥淒aniel鈥;
var edad = age || 31;
var pais = country || 鈥淐olombia鈥;
}
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:

// 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 || 鈥榠ngresa Nombre鈥;
var age = age || 100;
var country = country || 鈥榥on鈥;
console.log(name,age,country);
}
newUser();
newUser(鈥榝elipe鈥,29, 鈥楤og鈥);

//simplificado//

function newUser( name = 鈥榡ulian鈥, age = 28, country = 鈥楥O鈥){
console.log(name, age, country)
};
newUser();
newUser(鈥榝elipe鈥, 29, 鈥榖ar鈥);