Regálate acceso ilimitado a todos los cursos por 1 año a precio especial de Navidad 🎄

Antes: $199

Currency
$149/año
regístrate

termina en:

16D
13H
23M
55S

ES6: parámetros por defecto

7/38
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 25

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Otro gran feature sin duda alguna, flexible y eficaz.

Hola [email protected]
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");

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

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

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

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

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

Por aquí puedes ampliar información sobre este tema: Default parameters

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:

// 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’);