Paramètres de fonction par défaut JavaScript

Cet article éclaire les paramètres de fonction par défaut de JavaScript qui permettent aux paramètres nommés d’être initialisés avec des valeurs par défaut (si les paramètres réels ne sont pas passés ou si undefined est passé). Nous apprendrons la différence entre les paramètres nommés et les paramètres réels et leur utilisation.

Les paramètres réels sont les valeurs réelles transmises à la fonction par son appelant. Les paramètres nommés utilisent des noms pour les paramètres réels. Ces noms sont associés aux paramètres formels dans la définition de la fonction.

Les paramètres réels sont étiquetés dans le corps de la fonction. L’ordre n’a pas d’importance pour les paramètres nommés tant qu’ils sont correctement étiquetés.

Paramètres de fonction par défaut JavaScript

Dans le code suivant, la valeur de num2 serait deux (2) si aucune valeur n’est transmise (ou si undefined est transmis) lors de l’appel de la fonction 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

Maintenant, que se passe-t-il si nous n’utilisons pas les paramètres de fonction par défaut de JavaScript. Voir l’exemple ci-dessous.

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

On peut utiliser la technique suivante pour éviter NaN (Not a Number). Le typeof vérifie si la valeur ou le type de num2 est undefined, alors la valeur de num2 serait 1. typeof vous permet de passer n’importe quoi, y compris null et 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

En utilisant ES2015, il n’est pas nécessaire d’indiquer les paramètres par défaut dans le corps de la fonction. Maintenant, nous pouvons attribuer des valeurs par défaut dans la définition de la fonction. Vérifiez l’exemple de code suivant.

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

Nous pouvons également appeler une autre fonction comme valeur par défaut. Jetez un oeil à l’exemple suivant.

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

Entraînons-nous en utilisant les données de type chaîne.

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"

Nous avons étudié les paramètres de fonction par défaut en utilisant des nombres, des chaînes et des fonctions. Voyons comment définir les valeurs par défaut à l’aide de l’affectation de déstructuration. Mais avant cela, regardez ce qu’est exactement l’affectation de déstructuration ?

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

Production :

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

Vous avez peut-être remarqué que nous utilisons directement les propriétés de l’objet dans console.log plutôt que objectname.propertyname. Si vous commentez la ligne const {firstname,lastname,age,email} = person, vous devez utiliser person.firstname, person.lastname, person.email pour toutes les déclarations console.log.

Alors, que fait la ligne de code suivante ? C’est une affectation de déstructuration qui consiste à déballer l’objet. À l’heure actuelle, nous avons des propriétés minimales dans l’objet person.

Pensez-y, nous avons des centaines de propriétés dans un objet et utilisons objectname.propertyname à chaque fois. Cela aura l’air désordonné. Ici, le déballage de l’objet est utile.

Avec cela, nous nous débarrassons de la partie objectname. et utilisez propertyname uniquement.

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

Utilisons cette affectation de déstructuration pour les paramètres de fonction JavaScript par défaut.

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

Production :

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

Dans cet exemple, la valeur par défaut de email sera utilisée si l’appelant ne la passe pas.