Paramètres par défaut des fonctions en JavaScript : du chaos à l'élégance

Un paramètre sans cadeau ? Comprendre les valeurs par défaut en JavaScript

Imaginez que vous commandez une pizza. Vous appelez la livraison et dites : « Une pizza, s'il vous plaît ». L'opérateur demande : « Laquelle ? » — « Eh bien, la standard, avec du fromage et du saucisson ». Vous ne pensez même pas que la pizza a des paramètres par défaut.

De la même manière en JavaScript : les fonctions sont souvent appelées sans tous leurs arguments. Et si le programmeur n'a pas prévu de set a default parameter value for a JavaScript function, le code peut planter ou se comporter de manière imprévisible. Dans cet article, nous allons passer en revue toutes les façons de définir une valeur par défaut pour un paramètre de fonction en JS — des vieilles astuces rustiques à la syntaxe moderne ES6. C'est parti !

Pourquoi est-ce si important ?

Supposons que nous ayons une fonction qui salue un utilisateur :

function greet(name) {\n    console.log('Bonjour, ' + name + ' !');\n}\n\ngreet(); // Affiche : "Bonjour, undefined !" — gênant, non ?

Sans default parameters javascript, un argument non passé devient undefined. Et si nous essayons d'appeler une méthode sur undefined — nous obtenons une erreur. Donc, les paramètres par défaut js ne sont pas seulement une commodité, mais une protection contre les bugs.

Méthode 1 : La classique — l'opérateur ternaire (ou if)

Avant l'arrivée d'ES6, les développeurs utilisaient l'opérateur ternaire javascript ou une simple vérification. Cela fonctionne, mais semble lourd :

function multiply(a, b) {\n    a = a !== undefined ? a : 1;\n    b = b !== undefined ? b : 2;\n    return a * b;\n}\n\nconsole.log(multiply(5)); // 10 (5 * 2)\nconsole.log(multiply());  // 2 (1 * 2)

Avantages : Compréhensible même pour un débutant, compatible avec les anciens navigateurs.
\nInconvénients : Le code gonfle. Si vous avez 5 à 6 paramètres, la lisibilité chute fortement.

Piège : vérification sur undefined vs truthy

Beaucoup de débutants écrivent ceci :

function greet(name) {\n    name = name || 'Invité';\n    console.log('Bonjour, ' + name);\n}

Cela fonctionne tant que vous ne passez pas 0, une chaîne vide '' ou false. Toutes ces valeurs sont falsy, et la fonction les remplacera par 'Invité'. Si vous devez passer 0 comme valeur valide — cette approche échouera. Utilisez une vérification stricte sur undefined.

Méthode 2 : L'objet magique arguments

À l'intérieur de chaque fonction (sauf les fonctions fléchées), il y a un objet implicite semblable à un tableau appelé arguments javascript. On peut l'utiliser pour vérifier les arguments passés :

function showInfo(name, age) {\n    name = arguments.length > 0 ? name : 'Anonyme';\n    age = arguments.length > 1 ? age : 'non spécifié';\n    return `${name}, âge : ${age}`;\n}\n\nconsole.log(showInfo()); // Anonyme, âge : non spécifié

Avantages : Donne un contrôle total sur les arguments passés.
\nInconvénients : Syntaxe obsolète, ne fonctionne pas dans les fonctions fléchées. Généralement utilisé uniquement pour des tâches très spécifiques (par exemple, lorsque le nombre de paramètres est inconnu à l'avance).

Méthode 3 : Le standard moderne — les paramètres par défaut ES6

Depuis ECMAScript 2015, définir des paramètres par défaut js peut se faire directement dans la déclaration de la fonction. C'est la méthode la plus propre et recommandée :

function multiply(a = 1, b = 2) {\n    return a * b;\n}\n\nconsole.log(multiply(5)); // 10\nconsole.log(multiply());  // 2

Magnifique, non ? Mais il y a des nuances importantes à connaître pour ne pas tomber dans un piège.

Nuance 1 : Les valeurs par défaut sont évaluées au moment de l'appel

Cela signifie que si vous passez undefined — la valeur par défaut s'applique. Si vous passez null — non :

function test(x = 10) {