Clean Code avec paramètres par défaut ES6 et raccourcis de propriété –

Créer une méthode signifie aussi écrire une API – que ce soit pour vous, un autre développeur de votre équipe ou d'autres développeurs utilisant votre projet. Selon la taille, la complexité et le but de votre fonction, vous devez penser aux paramètres par défaut et à l'API de votre entrée / sortie.

Les paramètres de fonction par défaut et raccourcis de propriété sont deux pratiques caractéristiques de ES6 qui peuvent vous aider à écrire votre API.

Paramètres par défaut de l'ES6

Rafraîchissons nos connaissances rapidement et réexaminons la syntaxe. Les paramètres par défaut nous permettent d'initialiser les fonctions avec des valeurs par défaut. Une valeur par défaut est utilisée lorsqu'un argument est omis ou indéfini – ce qui signifie null est une valeur valide. Un paramètre par défaut peut être quelque chose d'un nombre à une autre fonction.

 // Syntaxe de base
fonction multiplier (a, b = 2) {
  renvoyer un * b;
}
multiplier (5); // dix

// Les paramètres par défaut sont également disponibles pour les paramètres par défaut ultérieurs
function foo (num = 1, multi = multiplier (num)) {
  retour [num, multi];
}
foo (); // [1, 2]
foo (6); // [6, 12]

Un exemple concret

Prenons une fonction de base et démontrons comment les paramètres par défaut peuvent accélérer votre développement et améliorer l'organisation du code.

Notre exemple de méthode s'appelle createElement () . Il prend quelques arguments de configuration et retourne un élément HTML. L'API ressemble à ceci:

 // Nous voulons un & lt; p & gt; élément, avec du contenu de texte et deux classes attachées.
// Retourne & lt; p class = "très-spécial-texte super-gros" & gt; Un tel texte unique & lt; / p & gt;
createElement ('p', {
  contenu: 'Un tel texte unique',
  classNames: ['very-special-text', 'super-big']
});

// Pour rendre cette méthode encore plus utile, elle doit toujours retourner une valeur par défaut
// élément quand un argument est omis ou aucun n'est passé du tout.
createElement (); // & lt; div class = "module-texte par défaut" & gt; Très par défaut & lt; / div & gt;

La mise en œuvre de ceci n'aura pas beaucoup de logique, mais peut devenir assez grande en raison de sa couverture par défaut.

 // Sans les paramètres par défaut, il semble assez gonflé et inutile.
function createElement (tag, config) {
  tag = tag || 'div';
  config = config || {};

  const element = document.createElement (balise);
  const content = config.content || 'Très par défaut';
  const text = document.createTextNode (contenu);
  let classNames = config.classNames;

  if (classNames === non défini) {
    classNames = ['module-text', 'default'];
  }

  element.classList.add (... classNames);
  element.appendChild (texte);

  élément de retour;
}

Jusqu'ici, tout va bien. Qu'est-ce qu'il se passe ici? Nous faisons ce qui suit:

1. définir des valeurs par défaut pour nos paramètres tag et config au cas où ils ne sont pas passés (notez que certains linters ] n'aime pas le réassignement de paramètre )
2. créant des constantes avec le contenu réel (et les valeurs par défaut)
3. vérifiant si classNames est défini et assignant un tableau par défaut sinon
4. créer et modifier l'élément avant de le retourner.

Maintenant, prenons cette fonction et optimisons-la pour qu'elle soit plus propre, plus rapide à écrire, et que sa fonction soit plus évidente:

 // Par défaut toutes les choses
function createElement (tag = 'div', {
  content = 'Très par défaut',
  classNames = ['module-text', 'special']
} = {}) {
  const element = document.createElement (balise);
  const text = document.createTextNode (contenu);

  element.classList.add (... classNames);
  element.appendChild (texte);

  élément de retour;
}

Nous n'avons pas touché à la logique de la fonction, mais nous avons supprimé toutes les manipulations par défaut du corps de la fonction. La signature de la fonction contient maintenant toutes les valeurs par défaut.

Permettez-moi d'expliquer une partie, qui pourrait être légèrement déroutante:

 // Que se passe-t-il exactement ici?
function createElement ({
  content = 'Très par défaut',
  classNames = ['module-text', 'special']
} = {}) {
  // corps de la fonction
}

Nous déclarons non seulement un paramètre d'objet par défaut mais aussi des propriétés d'objet par défaut . Cela rend plus évident ce à quoi la configuration par défaut est censée ressembler, plutôt que de déclarer uniquement un objet par défaut (par exemple config = {} ) et de définir plus tard les propriétés par défaut. Cela peut prendre un peu plus de temps pour s'y habituer, mais à la fin, cela améliore votre flux de travail.

Bien sûr, nous pourrions toujours argumenter avec des configurations plus grandes que cela pourrait créer plus de surcharge et il serait plus simple de garder la gestion par défaut à l'intérieur du corps de la fonction

ES6 Property Shorthands

En tant qu'argument, les objets de configuration volumineux peuvent devenir très volumineux. Il est courant de préparer certaines variables et de les ajouter à cet objet. Les raccourcis de propriété sont le sucre syntaxique pour rendre cette étape plus courte et plus lisible:

 const a = 'foo', b = 42, c = function () {};

// Auparavant, nous utilisions ces constantes comme ça.
const alphabet = {
  a: a,
  b: b,
  c: c
}

// Mais avec la nouvelle sténographie, nous pouvons le faire maintenant,
// qui est équivalent à ce qui précède.
const alphabet = {a, b, c};

Raccourcissez votre API

Bon, retour à l'autre, exemple plus commun. La fonction suivante prend des données, les mute et appelle une autre méthode:

 function updateSomething (data = {}) {
  const target = data.target;
  const veryLongProperty = data.veryLongProperty;
  Laissez willChange = data.willChange;

  if (willChange === 'indésirableValeur') {
    willChange = 'wayBetter';
  }

  // Faire plus.

  useDataSomewhereElse ({
    cible: cible,
    propriété: veryLongProperty,
    willChange: va changer,
    // .. plus
  });
}

Il arrive souvent que l'on nomme les variables et les noms de propriétés des objets identiques. En utilisant le raccourci de la propriété, combiné avec destructuring nous pouvons effectivement raccourcir un peu notre code:

 function updateSomething (data = {}) {
  // Ici, nous utilisons la déstructuration pour stocker les constantes de l'objet de données.
  const {target, veryLongProperty: propriété} = données;
  laissez {willChange} = données;

  if (willChange === 'indésirableValeur') {
    willChange = 'wayBetter';
  }

  // Faire plus.

  useDataSomewhereElse ({target, propriété, willChange});
}

Encore une fois, cela pourrait prendre du temps pour s'y habituer. En fin de compte, c'est une de ces nouvelles fonctionnalités de JavaScript qui m'a aidé à écrire du code plus rapidement et à travailler avec des corps de fonctions plus propres.

Mais attendez, il y a plus! Les raccourcis de propriétés peuvent également être appliqués aux définitions de méthodes dans un objet:

 // Au lieu d'écrire le mot-clé de fonction everytime,
const module = {
  truc: 42,
  bar: function (valeur) {
    // faire quelque chose
  }
}

// nous pouvons simplement l'omettre et avoir des déclarations plus courtes
const module = {
  truc: 42,
  barre (valeur) {
    // faire quelque chose
  }
}

Conclusion

Les paramètres par défaut et les raccourcis de propriété sont un excellent moyen de rendre vos méthodes plus organisées et, dans certains cas, encore plus courtes. Dans l'ensemble, les paramètres de fonction par défaut m'ont aidé à me concentrer davantage sur le but réel de la méthode sans distraire les nombreuses préparations par défaut et les déclarations if.

Les raccourcis de propriété sont en effet plus esthétiques, mais je me suis trouvé plus productif. passer moins de temps à écrire toutes les variables, les objets de configuration et les mots-clés de fonction.

Utilisez-vous déjà les paramètres par défaut et les raccourcis de propriété?

Cet article a été révisé par Sebastian Seitz . Merci à tous les pairs évaluateurs de SitePoint pour avoir rendu le contenu de SitePoint le meilleur possible!

Moritz est un développeur frontal allemand vivant à Berlin. Bien que les Allemands aient typiquement quelque chose pour des mots composés très longs, il est un ami des fonctions courtes.