La pasta al pesto es prueba de que Dios existe

Hay pocas cosas en la vida que me den más placer que una ración abundante de pesto fresco sobre Capellini (Cabello de Ángel) casero. Soy un auténtico entusiasta de la comida, especialmente cuando se trata de cocina italiana, y siempre pruebo recetas más complejas, pero la simplicidad y el disfrute de un plato tan minimalista nunca deja de satisfacerme. Si tuviera la (mala) suerte de elegir una última comida, sería una decisión difícil entre sushi y pesto en lugar de pasta, pero sigo pensando que la pasta al pesto gana al final.

Toda esta charla sobre pesto me está dando hambre.

¿Qué debo hacer? Bueno, haz pasta al pesto, por supuesto. A veces sólo hay que decir: "¡Quando a Roma!"

Comencemos haciendo una lista de ingredientes para comprar en nuestro amigable mercado italiano, "Il Mercato di Giovanni". Crearemos nuestra lista de compras a partir de dos recetas utilizando matrices de objetos mutables y inmutables. Si bien sería más eficiente simplemente escribir lo que necesitamos, sabes que esto es mucho más divertido. Puedo decir que estás muerto de hambre por saber más sobre cómo podemos programar nuestro camino hacia la pasta al pesto, así que profundicemos de inmediato. "¡Mangia Mangia!"

Crear conjuntos de recetas de pasta y pesto separados

Comenzaremos declarando variables para pastaRecipeArray y pestoRecipeArray, con cada variable asignada a una matriz de objetos, donde cada objeto representa un ingrediente individual.

Cuando asignamos valores de matriz a cada variable, utilizamos el método Object.freeze() para asegurarnos de que sean inmutables. (más sobre esto más adelante)

Cada objeto de receta tiene tres propiedades, con pares clave-valor de la siguiente manera:

• 'name' = El nombre del ingrediente en forma de 'cadena'
• 'receta' = Un valor o valores, en forma de 'matriz', que indican para qué recetas se necesita el ingrediente (pasta, pesto o ambos)
• 'price' = El precio del ingrediente en USD, en forma de 'número', utilizando contenido ficticio bastante poco realista

(nota: he omitido cantidades y otros detalles para mantener las cosas breves y relativamente simples en esta publicación. También podríamos implementar estos objetos usando JSON, pero mantenemos las cosas fáciles de digerir aquí.)

El código para establecer estas matrices se verá así:

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 }
])

Notarás nuevamente que la clave de la receta apunta a un valor que tiene la forma de una matriz. Lo configuramos de esta manera porque algunos ingredientes se usan en ambas recetas.

Para probar que pastaRecipeArray está configurado correctamente, podemos utilizar el método .forEach(), una función de devolución de llamada utilizada para iterar sobre cada objeto en la matriz. Usando ingrediente como parámetro, podemos iniciar sesión en la consola de la siguiente manera:

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

Cuando inspeccionas la consola deberías ver algo como el siguiente resultado:

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 manera similar, podemos registrar nuestro pestoRecipeArray de esta manera:

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

Lo que resulta en lo siguiente:

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}

(nota: cuando vea resultados como Array(1) y Array(2), querrá reescribir la función para seleccionar esas teclas o simplemente hacer clic en la matriz en la consola para ver los detalles de lo que contiene.)

Crear una matriz de lista de compras

Ahora que hemos establecido nuestras matrices de recetas, queremos pasar al siguiente paso: crear una matriz de lista de compras. Para hacer esto, querremos combinar nuestras matrices de objetos pastaRecipeArray y pestoRecipeArray en una nueva variable mutable llamada shoppingListArray. Haremos esto usando el operador de extensión... así:

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

Ahora usemos el siguiente console.log() para ver cómo se ve nuestra nueva lista. En el futuro, registraremos los valores de propiedad dentro del objeto en lugar del objeto completo, para eliminar parte del desorden. Querrá utilizar este código para ver cómo cambia nuestra lista después de cada paso del proceso.

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

Podemos ver que nuestras listas se han unido en una sola en la consola, esta vez solo registrando el nombre de cada ingrediente.

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

Matrices inmutables versus mutables

¿Por qué deberíamos hacer que pastaRecipeArray y pestoRecipeArray sean inmutables? Hacerlos inmutables hace que no podamos cambiar sus valores después de asignarlos. No queremos simplemente romper estas recetas. Queremos guardarlos para otro día glorioso. Esas recetas familiares inmutables deben perdurar, independientemente de lo que estemos a punto de escribir en nuestra lista de compras temporal y mutable.

También queremos poder agregar o quitar ingredientes de nuestro shoppingListArray recién creado para preparar este plato a nuestro gusto específico, sin afectar nuestras recetas originales, por supuesto.

Agregar, reemplazar y eliminar ingredientes

Como habrás notado, cuando combinamos nuestras recetas de pasta y pesto en nuestra lista de compras, terminamos con duplicados para "Aceite de oliva virgen extra" y "Sal kosher". No necesitamos comprarlos dos veces, así que deshagámonos de ellos. Hay formas más sofisticadas de eliminar duplicados, pero por ahora usaremos .splice() para eliminar el primer objeto de Aceite de Oliva Virgen Extra.

El método .splice() elimina o reemplaza destructivamente elementos en una matriz. El primer parámetro representa el primer elemento que estamos eliminando y el segundo parámetro representa cuántos elementos queremos eliminar desde ese punto de inicio. Si bien "Aceite de oliva virgen extra" es el segundo objeto de la matriz, las matrices comienzan en '0', por lo que técnicamente el segundo objeto está representado por un '1'. Ejecutemos lo siguiente:

shoppingListArray.splice(1, 1)

En la consola verás que ahora solo existe un objeto "Aceite de Oliva Virgen Extra". (nota: si intenta utilizar .splice() o métodos similares en una de nuestras matrices de recetas originales, obtendrá un TypeError porque usamos Object.freeze(), lo que los hace inmutables).

Todavía tenemos una "sal kosher" adicional, y ahora vamos a usar .splice() en su máxima potencia. Además de nuestros dos primeros parámetros, tenemos un tercer parámetro que puede reemplazar elementos en una matriz con elementos nuevos. Me encanta agregar un poco de limón a mi pesto y no me gusta la comida demasiado salada, así que sigamos adelante y reemplacemos nuestra "sal kosher" adicional con nuestro nuevo objeto "Limón". Declararemos nuestro objeto limón como una variable para una mejor legibilidad y lo incluiremos como el tercer parámetro .splice().

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

shoppingListArray.splice(6, 1, lemon)

Hoy me siento un poco descarado así que cambiemos un poco las cosas y agreguemos algunos tomates asados ​​usando .push(). Con .push() podemos agregar elementos al final de la matriz, y cada parámetro representa un nuevo elemento. Así que agreguemos algunos "tomates cherry" a nuestra lista. Ahora que lo pienso, ¡también olvidé el "Ajo"!

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

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

shoppingListArray.push(tomatoes, garlic)

Organizando nuestra lista de compras

Ahora que tenemos todos nuestros ingredientes bien establecidos, organicémoslos de manera que nuestra experiencia de compra sea perfecta.

Organicemos nuestra lista alfabéticamente usando .sort().

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

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

Nuestra lista de compras ahora se ve así en la consola.

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

Planificar con anticipación nuestros costos esperados

Ahora estamos listos para ir al mercado, pero primero asegurémonos de saber cuánto dinero necesitamos, usando .reduce(). Hay mucho que repasar con .reduce() y me está entrando hambre, así que me saltaré los detalles.

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.

Crear nuevas matrices de listas de recetas

Así que fuimos a la tienda y conseguimos nuestros ingredientes, pero ahora queremos separarlos nuevamente en sus respectivas recetas, solo para colocar todo sobre la mesa y mantener las cosas en orden. Creemos dos matrices nuevas, pastaIngredients y pestoIngredients usando .filter(), .includes() y, por supuesto, .forEach() para registrarlos en la consola.

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)
})

"Terminándolo"

Como puede ver al registrarlos en la consola, creamos con éxito un shoppingListArray que no modificó nuestras matrices de recetas inmutables originales, pastaRecipeArray y pestoRecipeArray. Luego pudimos modificar shoppingListArray de manera destructiva para agregar, eliminar y reemplazar ingredientes a nuestro gusto. También calculamos cuánto necesitábamos gastar antes de ir a la tienda. Por último, pudimos separar estos ingredientes en sus respectivas recetas, ingredientes de pasta e ingredientes de pesto en preparación para una comida brillante.

Bueno, qué delicioso plato ese fue. Espero que lo hayas disfrutado tanto como yo. ¡De nuevo, Mangia Mangia!