Les pâtes au pesto sont la preuve que D.ieu existe

Il y a peu de choses dans la vie qui me procurent plus de plaisir qu'une bonne dose de pesto frais sur des Capellini (Cheveux d'Ange) faits maison. Je suis un véritable fin gourmet - surtout lorsqu'il s'agit de cuisine italienne - et j'essaie toujours des recettes plus complexes, mais la simplicité et le plaisir d'un plat aussi minimaliste ne cessent de me satisfaire. Si j'avais la (mal)chance de choisir un dernier repas, ce serait une décision difficile entre les sushis et le pesto plutôt que les pâtes, mais je pense toujours que les pâtes au pesto finissent par l'emporter.

Toutes ces discussions sur le pesto me donnent faim

Que dois-je faire ? Eh bien, préparez des pâtes au pesto bien sûr. Parfois, il suffit de dire : "Quando a Roma !"

Commençons par dresser une liste d'ingrédients à acheter sur notre sympathique marché italien, "Il Mercato di Giovanni". Nous allons créer notre liste de courses à partir de deux recettes utilisant à la fois des tableaux d'objets immuables et mutables. Même s’il serait plus efficace d’écrire simplement ce dont nous avons besoin, vous savez que c’est bien plus amusant. Je peux dire que vous mourrez de faim pour en savoir plus sur la façon dont nous pouvons programmer notre façon de préparer des pâtes au pesto, alors allons creuser directement. "Mangia Mangia!"

Création de tableaux de recettes de pâtes et de pesto séparés

Nous commencerons par déclarer des variables pour pastaRecipeArray et pestoRecipeArray, chaque variable étant affectée à un tableau d'objets, où chaque objet représente un ingrédient individuel.

Lorsque nous attribuons des valeurs de tableau à chaque variable, nous utilisons la méthode Object.freeze() pour garantir qu'elles sont immuables. (plus à ce sujet plus tard)

Chaque objet de recette possède trois propriétés, avec des paires clé-valeur comme suit :

• 'name' = Le nom de l'ingrédient sous la forme d'une 'string'
• 'recipe' = Une ou plusieurs valeurs, sous la forme d'un 'tableau', indiquant pour quelle(s) recette(s) l'ingrédient est nécessaire (pâtes, pesto ou les deux)
• 'price' = Le prix de l'ingrédient en USD, sous la forme d'un 'chiffre', utilisant un contenu factice assez irréaliste

(remarque : j'ai omis les quantités et d'autres détails pour que les choses restent brèves et relativement simples dans cet article. Nous pourrions également implémenter ces objets en utilisant JSON, mais nous gardons les choses faciles à digérer ici.)

Le code pour établir ces tableaux ressemblera à ceci :

const pastaRecipeArray = Object.freeze([
  { "name": "Eggs", "recipe": ["pasta"], "price": 6.99 },
  { "name": "Extra Virgin Olive Oil", "recipe": ["pasta", "pesto"], "price": 12.59 },
  { "name": "Kosher Salt", "recipe": ["pasta", "pesto"], "price": 7.89 },
  { "name": "Semolina Flour", "recipe": ["pasta"], "price": 12.95 }
])

const pestoRecipeArray = Object.freeze([
  { "name": "Basil", "recipe": ["pesto"], "price": 6.99 },
  { "name": "Black Pepper", "recipe": ["pesto"], "price": 9.99 },
  { "name": "Extra Virgin Olive Oil", "recipe": ["pasta", "pesto"], "price": 12.59 },
  { "name": "Kosher Salt", "recipe": ["pasta", "pesto"], "price": 7.89 },
  { "name": "Parmesan", "recipe": ["pesto"], "price": 15.99 },
  { "name": "Pine Nuts", "recipe": ["pesto"], "price": 13.98 }
])

Vous remarquerez à nouveau que la clé de recette pointe vers une valeur qui se présente sous la forme d'un tableau. Nous l'avons configuré de cette façon car certains ingrédients sont utilisés dans les deux recettes.

Pour tester que pastaRecipeArray est correctement configuré, nous pouvons utiliser la méthode .forEach(), une fonction de rappel utilisée pour parcourir chaque objet du tableau. En utilisant l'ingrédient comme paramètre, nous pouvons le connecter à la console comme suit :

pastaRecipeArray.forEach((ingredient) => {
  console.log(ingredient)
})

Lorsque vous inspectez la console, vous devriez voir quelque chose comme le résultat suivant :

Object {name: "Eggs", recipe: Array(1), price: 6.99}
Object {name: "Extra Virgin Olive Oil", recipe: Array(2), price: 12.59}
Object {name: "Kosher Salt", recipe: Array(2), price: 7.89}
Object {name: "Semolina Flour", recipe: Array(1), price: 12.95}

De même, nous pouvons enregistrer notre pestoRecipeArray comme ceci :

pestoRecipeArray.forEach((ingredient) => {
  console.log(ingredient)
})

Ce qui donne ce qui suit :

Object {name: "Basil", recipe: Array(1), price: 6.99}
Object {name: "Black Pepper", recipe: Array(1), price: 9.99}
Object {name: "Extra Virgin Olive Oil", recipe: Array(2), price: 12.59}
Object {name: "Kosher Salt", recipe: Array(2), price: 7.89}
Object {name: "Parmesan", recipe: Array(1), price: 15.99}
Object {name: "Pine Nuts", recipe: Array(1), price: 13.98}

(remarque : lorsque vous voyez une sortie telle que Array(1) et Array(2), vous souhaiterez soit réécrire la fonction pour sélectionner ces clés, soit simplement cliquer sur le tableau dans la console pour voir les détails de ce qu'il contient.)

Création d'un tableau de liste de courses

Maintenant que nous avons établi nos tableaux de recettes, nous souhaitons passer à l'étape suivante : créer un tableau de listes de courses. Pour ce faire, nous voudrons combiner nos tableaux d'objets pastaRecipeArray et pestoRecipeArray dans une nouvelle variable mutable nommée shoppingListArray. Nous ferons cela en utilisant l'opérateur spread... comme ceci :

const shoppingListArray = [...pastaRecipeArray, ...pestoRecipeArray]

Utilisons maintenant le console.log() suivant pour voir à quoi ressemble notre nouvelle liste. À l'avenir, nous enregistrerons les valeurs des propriétés dans l'objet plutôt que dans l'objet complet, afin de supprimer une partie de l'encombrement. Vous souhaiterez utiliser ce code pour voir comment notre liste change après chaque étape du processus.

shoppingListArray.forEach((ingredient) => {
      console.log(ingredient.name)
})

Nous pouvons voir que nos listes ont été regroupées en une seule dans la console, cette fois en enregistrant uniquement le nom de chaque ingrédient.

Eggs
Extra Virgin Olive Oil
Kosher Salt
Semolina Flour
Basil
Black Pepper
Extra Virgin Olive Oil
Kosher Salt
Parmesan
Pine Nuts

Tableaux immuables ou mutables

Pourquoi devrions-nous rendre pastaRecipeArray et pestoRecipeArray immuables ? Les rendre immuables fait en sorte que nous ne pouvons pas modifier leurs valeurs une fois qu'elles ont été attribuées. Nous ne voulons pas simplement déchirer ces recettes. Nous voulons les conserver pour un autre jour glorieux. Ces recettes familiales immuables doivent perdurer, peu importe ce que nous sommes sur le point d’écrire sur notre liste de courses temporaire et mutable.

Nous souhaitons également pouvoir ajouter ou soustraire des ingrédients de notre shoppingListArray nouvellement créé pour préparer ce plat selon nos goûts spécifiques, sans affecter nos recettes originales bien sûr.

Ajouter, remplacer et supprimer des ingrédients

Comme vous l'avez peut-être remarqué, lorsque nous avons combiné nos recettes de pâtes et de pesto dans notre liste de courses, nous nous sommes retrouvés avec des doublons pour « l'huile d'olive extra vierge » et le « sel casher ». Nous n’avons pas besoin de les acheter deux fois, alors débarrassons-nous-en. Il existe des moyens plus sophistiqués d'éliminer les doublons, mais pour l'instant, nous utiliserons .splice() pour supprimer le premier objet Huile d'olive extra vierge.

La méthode .splice() supprime ou remplace de manière destructive les éléments d'un tableau. Le premier paramètre représente le premier élément que nous supprimons et le deuxième paramètre représente le nombre d'éléments que nous souhaitons supprimer à partir de ce point de départ. Alors que « Huile d'olive extra vierge » est le deuxième objet du tableau, les tableaux commencent à « 0 », donc techniquement, le deuxième objet est représenté par un « 1 ». Exécutons ce qui suit :

shoppingListArray.splice(1, 1)

Dans la console, vous verrez qu'il n'y a désormais qu'un seul objet "Huile d'Olive Vierge Extra". (remarque : si vous essayez d'utiliser .splice() ou des méthodes similaires sur l'un de nos tableaux de recettes d'origine, vous obtiendrez une TypeError car nous avons utilisé Object.freeze(), les rendant immuables.)

Nous avons encore un "Sel casher" supplémentaire, et maintenant nous allons utiliser .splice() à sa pleine puissance. En plus de nos deux premiers paramètres, nous avons un troisième paramètre qui peut remplacer les éléments d'un tableau par de nouveaux éléments. J'adore ajouter un peu de citron à mon pesto et je n'aime pas les aliments trop salés, alors allons-y et remplaçons notre "Sel casher" supplémentaire par notre nouvel objet "Citron". Nous déclarerons notre objet citron comme variable pour une meilleure lisibilité et l'inclurons comme troisième paramètre .splice().

const lemon = { "name": "Lemon", "recipe": ["pesto"], "price": 2.04 }

shoppingListArray.splice(6, 1, lemon)

Aujourd'hui, je me sens un peu impertinent alors changeons un peu les choses et ajoutons des tomates rôties en utilisant .push(). Avec .push() nous pouvons ajouter des éléments à la fin du tableau, chaque paramètre représentant un nouvel élément. Ajoutons donc quelques « tomates cerises » à notre liste. À bien y penser, j'ai oublié le "Ail" aussi !

const tomatoes = { "name": "Cherry Tomatoes", "recipe": ["pesto"], "price": 5.99 }

const garlic = { "name": "Garlic", "recipe": ["pesto"], "price": 2.99 }

shoppingListArray.push(tomatoes, garlic)

Organiser notre liste de courses

Maintenant que tous nos ingrédients sont bien établis, organisons-les de manière à rendre notre expérience d'achat fluide.

Organisons notre liste par ordre alphabétique en utilisant .sort().

shoppingListArray.sort((a, b) => {
  const nameA = a.name
  const nameB = b.name

  if (nameA  nameB) {
    1
  }
  return 0
})

Notre liste de courses ressemble désormais à ceci dans la console.

Basil
Black Pepper
Cherry Tomatoes
Eggs
Extra Virgin Olive Oil
Garlic
Kosher Salt
Lemon
Parmesan
Pine Nuts
Semolina Flour

Planifier à l’avance nos coûts prévus

Nous sommes maintenant prêts à aller sur le marché, mais assurons-nous d'abord de savoir de combien d'argent nous avons besoin, en utilisant .reduce(). Il y a beaucoup de choses à aborder avec .reduce(), et j'ai faim, je vais donc sauter les détails.

const ingredientsPrice = shoppingListArray.reduce((accumulator, ingredient) => {
  return accumulator   ingredient.price
}, 0)

console.log("You will need $"   ingredientsPrice   " to make pesto pasta. Man is life is expensive.")
// You will need $98.39 to make pesto pasta. Wow, life is expensive.

Création de nouveaux tableaux de listes de recettes

Nous sommes donc allés au magasin et avons récupéré nos ingrédients, mais maintenant nous voulons séparer nos ingrédients dans leurs recettes respectives, juste pour tout disposer sur la table et garder les choses en ordre. Créons deux nouveaux tableaux, pastaIngredients et pestoIngredients en utilisant .filter(), .includes() et bien sûr .forEach() pour les enregistrer dans la console.

const pastaIngredients = shoppingListArray.filter((ingredient) => {
  return ingredient.recipe.includes('pasta')
})

pastaIngredients.forEach((ingredient) => {
  console.log(ingredient.name)
})

const pestoIngredients = shoppingListArray.filter((ingredient) => {
  return ingredient.recipe.includes('pesto')
})

pestoIngredients.forEach((ingredient) => {
  console.log(ingredient.name)
})

"Emballer" le tout

Comme vous pouvez le constater en les enregistrant dans la console, nous avons réussi à créer un shoppingListArray qui n'a pas modifié nos tableaux de recettes immuables d'origine, pastaRecipeArray et pestoRecipeArray. Nous avons ensuite pu modifier le shoppingListArray de manière destructrice pour ajouter, supprimer et remplacer des ingrédients à notre guise. Nous avons également calculé combien nous devions dépenser avant de nous rendre au magasin. Enfin, nous avons pu séparer ces ingrédients dans leurs recettes respectives, ingrédients pour pâtes et ingrédients pour pesto, afin de préparer un repas brillant.

Eh bien, quel délicieux plat c'était. J'espère que vous l'avez apprécié autant que moi. Encore une fois, Mangia Mangia !