Parámetros de función predeterminados de JavaScript

Este artículo ilustra los parámetros de función predeterminados de JavaScript que permiten que los parámetros nombrados se inicialicen con valores predeterminados (si no se pasan los parámetros reales o se pasa undefined). Aprenderemos la diferencia entre los parámetros con nombre y los parámetros reales y su uso.

Los parámetros reales son los valores reales pasados ​​a la función por su llamador. Los parámetros con nombre utilizan nombres para los parámetros reales. Estos nombres están asociados con los parámetros formales en la definición de la función.

Los parámetros reales están etiquetados dentro del cuerpo de la función. El orden no importa para los parámetros con nombre siempre que estén etiquetados correctamente.

Parámetros de función predeterminados de JavaScript

En el siguiente código, el valor de num2 sería dos (2) si no se pasa ningún valor (o se pasa undefined) al llamar a la función sum().

function sum(num1, num2 = 2) {
  return num1 + num2;
}

console.log(sum(10, 3));         // expected output: 13
console.log(sum(3));             // expected output: 5
console.log(sum(3, undefined));  // expected output: 5

Ahora, ¿qué sucede si no usamos los parámetros de función predeterminados de JavaScript? Vea el ejemplo dado a continuación.

function sum(num1, num2) {
  return num1 + num2;
}

console.log(sum(10, 3));         // expected output: 13
console.log(sum(3));             // expected output: NaN
console.log(sum(3, undefined));  // expected output: NaN

Podemos utilizar la siguiente técnica para evitar NaN (Not a Number). El typeof comprueba si el valor o tipo de num2 es undefined, entonces el valor de num2 sería 1. typeof le permite pasar cualquier cosa, incluidos null y false.

function sum(num1, num2) {
  num2 = (typeof num2 !== 'undefined') ? num2 : 1
  return num1 + num2;
}

console.log(sum(5, 2));  // expected output: 7
console.log(sum(5));     // expected output: 6

Con ES2015, no es necesario indicar los parámetros predeterminados en el cuerpo de la función. Ahora, podemos asignar valores predeterminados dentro de la definición de la función. Compruebe el siguiente código de ejemplo.

function sum(num1, num2 = 1) {
  return num1 + num2;
}

console.log(sum(5, 2));          // expected output: 7
console.log(sum(5));             // expected output: 6
console.log(sum(5, undefined));  // expected output: 6

También podemos llamar a otra función como valor predeterminado. Echa un vistazo al siguiente ejemplo.

function multiply(num1 = 2, num2 = 3) {
  return num1 * num2;
}
function sum(num1, num2 = multiply()) {
  return num1 + num2;
}

console.log(sum(5, 2));          // expected output: 7
console.log(sum(5));             // expected output: 11
console.log(sum(5, undefined));  // expected output: 11

Practiquemos usando los datos de tipo cadena.

function greetings(
    name, greeting, message = greeting + ' ' + name + ', How are you?') {
  return message;
}
console.log(greetings('Mehvish', 'Hello'));
// expected output: "Hello Mehvish, How are you?"

console.log(greetings('Mehvish', 'Hello', 'What\'s up'));
// expected output: "What's up"

Hemos estudiado los parámetros de función predeterminados utilizando números, cadenas y funciones. Comprendamos cómo establecer valores predeterminados usando la asignación de desestructuración. Pero antes de eso, eche un vistazo a qué es exactamente la tarea de desestructuración.

const person = {
  firstname: 'Mehvish',
  lastname: 'Ashiq',
  age: 30,
  email: 'delfstack@example.com'
};
const {firstname, lastname, age, email} = person
console.log(firstname);
console.log(lastname);
console.log(email);

Producción :

"Mehvish"
"Ashiq"
"delfstack@example.com"

Es posible que haya notado que estamos usando directamente las propiedades del objeto en console.log en lugar de objectname.propertyname. Si comenta la línea const {firstname,lastname,age,email} = person, debe usar person.firstname, person.lastname, person.email para todas las declaraciones console.log.

Entonces, ¿qué está haciendo la siguiente línea de código? Es una tarea de desestructuración que significa desempaquetar el objeto. En este momento, tenemos propiedades mínimas en el objeto person.

Solo piense, tenemos cientos de propiedades en un objeto y usamos objectname.propertyname cada vez. Se verá desordenado. Aquí, es útil desempaquetar el objeto.

Con eso, nos deshacemos de la parte objectname. y utilice propertyname únicamente.

const {firstname, lastname, age, email} = person;

Usemos esta asignación de desestructuración para los parámetros de función predeterminados de JavaScript.

function displayPerson(lastname, firstname, email = 'mehvish.ashiq@gmail.com') {
  if (typeof email !== 'undefined') {
    console.log('not using default value of email');
    console.log(firstname, lastname, email);
  } else {
    console.log('using default value of email');
    console.log(firstname, lastname, email);
  }
}

const person = {
  firstname: 'Mehvish',
  lastname: 'Ashiq',
  age: 30,
  email: 'delfstack@example.com'
};
const {firstname, lastname, age, email} =
    person  // destructure assignment (unpack the object)
displayPerson(age, firstname, email);
displayPerson(
    age,
    firstname);  // default value of email will be used in this function call

Producción :

"not using default value of email"
"Mehvish", 30, "delfstack@example.com"
"not using default value of email"
"Mehvish", 30, "mehvish.ashiq@gmail.com"

En este ejemplo, se utilizará el valor predeterminado de email si la persona que llama no lo pasa.