Déstructurer une commande — exercice corrigé de JavaScript : rendre le Web interactif (école d'ingénieur) (chapitre 5)

Déstructurer une commande

Tableaux et objets · niveau 2

Énoncé

Réécrire cette fonction avec une déstructuration dans les paramètres et un gabarit de chaîne :


function resume(commande) {
  const nom = commande.client.nom;
  const lignes = commande.lignes;
  const retrait = commande.retrait || "boutique";
  return nom + " : " + lignes.length + " ligne(s), retrait " + retrait;
}

Les deux versions donnent-elles le même résultat quand retrait vaut la chaîne vide ?

Corrigé


// Avant :
//   function resume(commande) {
//     const nom = commande.client.nom;
//     const lignes = commande.lignes;
//     const retrait = commande.retrait || "boutique";
//     return nom + " : " + lignes.length + " ligne(s), retrait " + retrait;
//   }
function resume({ client: { nom }, lignes, retrait = "boutique" }) {
  return `${nom} : ${lignes.length} ligne(s), retrait ${retrait}`;
}

console.log(resume({ client: { nom: "Lina" }, lignes: [{}, {}] }));
console.log(resume({ client: { nom: "Hugo" }, lignes: [{}], retrait: "campus" }));
console.log(resume({ client: { nom: "Inès" }, lignes: [], retrait: "" }));


Lina : 2 ligne(s), retrait boutique
Hugo : 1 ligne(s), retrait campus
Inès : 0 ligne(s), retrait

Non : une valeur par défaut ne s'applique qu'à undefined. Avec retrait: "", la nouvelle version affiche une chaîne vide, alors que l'ancienne, avec ||, remplaçait toute valeur « fausse » ("", 0…) par "boutique". Le plus souvent, c'est le comportement de la valeur par défaut (ou de ??) qui est le bon : 0 ou la chaîne vide sont des valeurs légitimes.