Comprendre les paramètres par défaut dans JavaScript

L’auteur a choisi le COVID-19 Relief Fund pour recevoir un don dans le cadre du programme Write for DOnations.

Introduction

Dans ECMAScript 2015, les paramètres de fonction par défaut ont été introduits au langage JavaScript. Celles-ci permettent aux développeurs d’initialiser une fonction avec des valeurs par défaut si les arguments ne sont pas fournis à l’appel de fonction. Initialiser les paramètres de fonction de cette manière rendra vos fonctions plus faciles à lire et moins sujettes aux erreurs, et fournira un comportement par défaut pour vos fonctions. Cela vous aidera à éviter les erreurs dues au passage d’arguments undefined et à la déstructuration d’objets qui n’existent pas.

Dans cet article, vous examinerez la différence entre paramètres et arguments, vous apprendrez comment utiliser les paramètres par défaut dans les fonctions, vous verrez d’autres façons de prendre en charge les paramètres par défaut et vous apprendrez quels types de valeurs et d’expressions peuvent être utilisés comme paramètres par défaut. Vous passerez également en revue des exemples qui montrent comment les paramètres par défaut fonctionnent en JavaScript.

Arguments et paramètres

Avant d’expliquer les paramètres de fonction par défaut, il est important de savoir ce que sont les paramètres par défaut. Pour cette raison, nous allons d’abord examiner la différence entre les arguments et les paramètres d’une fonction.  Si vous souhaitez en savoir plus sur cette distinction, consultez notre article précédent de la série JavaScript, Comment définir les fonctions en JavaScript.

Dans le bloc de code suivant, vous allez créer une fonction qui renvoie le cube d’un numéro donné, défini comme x :

// Define a function to cube a number
function cube(x) {
  return x * x * x
}

La variable x dans cet exemple est un paramètre — une variable nommée passée dans une fonction. Un paramètre doit toujours être contenu dans une variable et ne doit jamais avoir de valeur directe.

Regardez maintenant ce prochain bloc de code, qui appelle la fonction cube que vous venez de créer :

// Invoke cube function
cube(10)

Cela donnera le résultat suivant :

Output
1000

Dans ce cas, 10 est un argument - une valeur transmise à une fonction lorsqu’elle est invoquée. Souvent, la valeur sera également contenue dans une variable comme dans cet exemple :

// Assign a number to a variable
const number = 10

// Invoke cube function
cube(number)

Cela donnera le même résultat :

Output
1000

Si vous ne passez pas un argument à une fonction qui en attend un, la fonction utilisera implicitement undefined en tant que valeur :

// Invoke the cube function without passing an argument
cube()

Cela retournera :

Output
NaN

Dans ce cas, cube() essaie de calculer la valeur de undefined * undefined * undefined, ce qui donne NaN, ou “not a number”. Pour en savoir plus, consultez la section sur les nombres de la rubrique “Comprendre les types de données en JavaScript”.

Ce comportement automatique peut parfois poser problème. Dans certains cas, vous pouvez souhaiter que le paramètre ait une valeur même si aucun argument n’a été transmis à la fonction. C’est là que la fonction de paramètres par défaut est pratique, un sujet que vous aborderez dans la section suivante.

Syntaxe des paramètres par défaut

Avec l’ajout de paramètres par défaut dans ES2015, vous pouvez maintenant attribuer une valeur par défaut à n’importe quel paramètre, que la fonction utilisera au lieu d’undefined lorsqu’elle est appelée sans argument. Cette section vous montrera d’abord comment le faire manuellement, puis vous guidera dans la définition des paramètres par défaut.

Sans paramètres par défaut, vous devriez explicitement rechercher des valeurs undefined afin de définir des valeurs par défaut, comme le montre cet exemple :

// Check for undefined manually
function cube(x) {
  if (typeof x === 'undefined') {
    x = 5
  }

  return x * x * x
}

cube()

Cela utilise une instruction conditionnelle pour vérifier si la valeur a été automatiquement fournie comme undefined puis fixe la valeur de x à 5. Cela donnera la sortie suivante :

Output
125

En revanche, l’utilisation de paramètres par défaut atteint le même but avec beaucoup moins de code. Vous pouvez définir une valeur par défaut pour le paramètre en cube en l’assignant avec l’opérateur d’assignation d’égalité (=), comme souligné ici :

// Define a cube function with a default value
function cube(x = 5) {
  return x * x * x
}

Maintenant, lorsque la fonction cube est invoquée sans argument, elle affectera 5 à x et retournera le calcul au lieu de NaN :

// Invoke cube function without an argument
cube()

Output
125

Elle fonctionnera toujours comme prévu lorsqu’un argument est passé, en ignorant la valeur par défaut :

// Invoke cube function with an argument
cube(2)

Output
8

Cependant, une mise en garde importante à noter est que la valeur par défaut du paramètre remplacera également une valeur explicite undefined passée comme argument à une fonction, comme démontré ici :

// Invoke cube function with undefined
cube(undefined)

Cela donnera le calcul avec x égal à 5 :

Output
125

Dans ce cas, les valeurs des paramètres par défaut ont été calculées, et une valeur undefined explicite ne les a pas remplacées.

Maintenant que vous avez une idée de la syntaxe de base des paramètres par défaut, la section suivante indiquera comment les paramètres par défaut fonctionnent avec différents types de données.

Types de données des paramètres par défaut

Toute valeur ou objet primitif peut être utilisé comme valeur de paramètre par défaut.  Dans cette section, vous verrez comment cette flexibilité augmente les possibilités d’utilisation des paramètres par défaut.

Tout d’abord, définissez des paramètres en utilisant un numéro, une chaîne, un booléen, un objet, un tableau et une valeur nulle comme valeur par défaut. Cet exemple utilisera la syntaxe des fonctions fléchées :

// Create functions with a default value for each data type
const defaultNumber = (number = 42) => console.log(number)
const defaultString = (string = 'Shark') => console.log(string)
const defaultBoolean = (boolean = true) => console.log(boolean)
const defaultObject = (object = { id: 7 }) => console.log(object)
const defaultArray = (array = [1, 2, 3]) => console.log(array)
const defaultNull = (nullValue = null) => console.log(nullValue)

Lorsque ces fonctions sont invoquées sans paramètres, elles utiliseront toutes les valeurs par défaut :

// Invoke each function
defaultNumber()
defaultString()
defaultBoolean()
defaultObject()
defaultArray()
defaultNull()

Output
42
"Shark"
true
{id: 7}
(3) [1, 2, 3]
null

Notez que tout objet créé dans un paramètre par défaut sera créé chaque fois que la fonction sera appelée. Un des cas d’utilisation courantes des paramètres par défaut est d’utiliser ce comportement pour obtenir des valeurs d’un objet. Si vous essayez de déstructurer ou d’accéder à une valeur à partir d’un objet qui n’existe pas, cela lancera une erreur. Cependant, si le paramètre par défaut est un objet vide, cela donnera simplement des valeurs undefined au lieu de lancer une erreur :

// Define a settings function with a default object
function settings(options = {}) {
  const { theme, debug } = options

  // Do something with settings
}

Cela permet d’éviter l’erreur causée par la déstructuration d’objets qui n’existent pas.

Maintenant que vous avez vu comment les paramètres par défaut fonctionnent avec différents types de données, la section suivante indiquera comment plusieurs paramètres par défaut peuvent fonctionner ensemble.

Utilisation de plusieurs paramètres par défaut

Vous pouvez utiliser autant de paramètres par défaut que vous voulez dans une fonction. Cette section vous montrera comment procéder et comment l’utiliser pour manipuler le DOM dans un exemple concret.

Tout d’abord, déclarez une fonction sum() avec plusieurs paramètres par défaut :

// Define a function to add two values
function sum(a = 1, b = 2) {
  return a + b
}

sum()

Il en résultera le calcul par défaut suivant :

Output
3

De plus, la valeur utilisée dans un paramètre peut être utilisée dans n’importe quel paramètre par défaut ultérieur, de gauche à droite. Par exemple, cette fonction createUser crée un objet userObj comme troisième paramètre, et tout ce que la fonction elle-même fait est de retourner userObj avec les deux premiers paramètres :

// Define a function to create a user object using parameters
function createUser(name, rank, userObj = { name, rank }) {
  return userObj
}

// Create user
const user = createUser('Jean-Luc Picard', 'Captain')

Si vous appelez user ici, vous obtiendrez ce qui suit :

Output
{name: "Jean-Luc Picard", rank: "Captain"}

Il est généralement recommandé de placer tous les paramètres par défaut à la fin d’une liste de paramètres, afin de pouvoir facilement laisser de côté les valeurs facultatives. Si vous utilisez d’abord un paramètre par défaut, vous devrez explicitement passer undefined pour utiliser la valeur par défaut.

Voici un exemple avec le paramètre par défaut au début de la liste :

// Define a function with a default parameter at the start of the list
function defaultFirst(a = 1, b) {
  return a + b
}

Lorsque vous appelez cette fonction, vous devriez appeler defaultFirst() avec deux arguments :

defaultFirst(undefined, 2)

Cela donnerait ce qui suit :

Output
3

Voici un exemple avec le paramètre par défaut à la fin de la liste :

// Define a function with a default parameter at the end of the list
function defaultLast(a, b = 1) {
  return a + b
}

defaultLast(2)

Cela donnerait la même valeur :

Output
3

Les deux fonctions ont le même résultat, mais celle dont la valeur par défaut est la dernière permet un appel de fonction beaucoup plus propre.

Pour un exemple concret, voici une fonction qui va créer un élément DOM, et ajouter un label texte et des classes, si elles existent.

// Define function to create an element
function createNewElement(tag, text, classNames = []) {
  const el = document.createElement(tag)
  el.textContent = text

  classNames.forEach(className => {
    el.classList.add(className)
  })

  return el
}

Vous pouvez appeler la fonction avec certaines classes dans un tableau :

const greeting = createNewElement('p', 'Hello!', ['greeting', 'active'])

L’appel de greeting donnera la valeur suivante :

Output
<p class="greeting active">Hello!</p>

Cependant, si vous quittez le tableau de classNames hors de l’appel de fonction, cela fonctionne toujours.

const greeting2 = createNewElement('p', 'Hello!')

greatt2 a maintenant la valeur suivante :

Output
<p>Hello!</p>

Dans cet exemple, forEach() peut être utilisé sur un tableau vide sans problème. Si ce tableau vide n’était pas défini dans le paramètre par défaut, vous obtiendriez l’erreur suivante :

Output
VM2673:5 Uncaught TypeError: Cannot read property 'forEach' of undefined
    at createNewElement (<anonymous>:5:14)
    at <anonymous>:12:18

Maintenant que vous avez vu comment plusieurs paramètres par défaut peuvent interagir, vous pouvez passer à la section suivante pour voir comment les appels de fonction opèrent en tant que paramètres par défaut.

Appels de fonction comme paramètres par défaut

En plus des primitives et des objets, le résultat de l’appel d’une fonction peut être utilisé comme paramètre par défaut.

Dans ce bloc de code, vous créerez une fonction pour renvoyer un nombre aléatoire, puis vous utiliserez le résultat comme valeur de paramètre par défaut dans une fonction cube :

// Define a function to return a random number from 1 to 10
function getRandomNumber() {
  return Math.floor(Math.random() * 10)
}

// Use the random number function as a default parameter for the cube function
function cube(x = getRandomNumber()) {
  return x * x * x
}

Maintenant, l’invocation de la fonction cube sans paramètre aura des résultats potentiellement différents chaque fois que vous l’appelez :

// Invoke cube function twice for two potentially different results
cube()
cube()

Le résultat de ces appels de fonction variera :

Output
512
64

Vous pouvez même utiliser des méthodes intégrées, comme celles de l’objet Math, et utiliser la valeur renvoyée dans un appel de fonction comme paramètre dans une autre fonction.

Dans l’exemple suivant, un nombre aléatoire est attribué à x, qui est utilisé comme paramètre dans la fonction cube que vous avez créée.  Le paramètre y calculera alors la racine cubique du nombre et vérifiera si x et y sont égaux :

// Assign a random number to x
// Assign the cube root of the result of the cube function and x to y
function doesXEqualY(x = getRandomNumber(), y = Math.cbrt(cube(x))) {
  return x === y
}

doesXEqualY()

Cela donnera le résultat :

Output
true

Un paramètre par défaut peut même être une définition de fonction, comme on le voit dans cet exemple, qui définit un paramètre comme la fonction inner et renvoie l’appel de fonction du paramètre :

// Define a function with a default parameter that is an anonymous function
function outer(
  parameter = function inner() {
    return 100
  }
) {
  return parameter()
}

// Invoke outer function
outer()

Output
100

Cette fonction inner sera créée à partir de zéro chaque fois que la fonction outer est invoquée.

Conclusion

Dans cet article, vous avez appris ce que sont les paramètres de fonction par défaut et comment les utiliser. Vous pouvez maintenant utiliser les paramètres par défaut pour vous aider à garder vos fonctions propres et faciles à lire. Vous pouvez également assigner des objets et des tableaux vides aux paramètres par défaut afin de réduire à la fois la complexité et les lignes de code lorsque vous traitez des situations telles que la récupération de valeurs d’un objet ou le bouclage dans un tableau.

Si vous souhaitez en savoir plus sur JavaScript, consultez la page d’accueil de notre série Comment coder en JavaScript, ou parcourez notre série Comment coder en Node.js pour lire des articles sur le développement back-end.