맛있는 페스토 파스타를 위한 (불)변경 가능한 쇼핑 목록

페스토 파스타는 신이 존재한다는 증거이다

수제 카펠리니(엔젤헤어) 위에 신선한 페스토를 듬뿍 얹은 것보다 인생에서 더 큰 즐거움을 주는 것은 거의 없습니다. 저는 진정한 미식가입니다. 특히 이탈리아 요리에 있어서는 항상 더 복잡한 요리법을 시도하고 있지만 이러한 미니멀리스트 요리의 단순함과 즐거움은 결코 만족스럽지 않습니다. 마지막 식사를 선택하는 (불행) 운이 있었다면 파스타 대신 스시와 페스토 사이에서 어려운 결정을 내리겠지만, 그래도 결국에는 페스토 파스타가 승리한다고 생각합니다.

페스토 얘기가 날 배고프게 만드네

어떻게 해야 하나요? 물론 페스토 파스타도 만들어 보세요. 가끔은 "Quando a Roma!"라고 말해야 할 때도 있습니다.

우리의 친근한 이탈리아 시장인 "Il Mercato di Giovanni"에서 구입할 재료 목록을 만드는 것부터 시작해 보겠습니다. 불변 객체 배열과 가변 객체 배열을 모두 사용하여 두 가지 레시피로 쇼핑 목록을 만듭니다. 필요한 것을 간단히 작성하는 것이 더 효율적이겠지만, 이것이 훨씬 더 재미있다는 것을 알고 계실 것입니다. 페스토 파스타를 만드는 방법을 프로그래밍하는 방법에 대해 자세히 알아보려면 배고픈 것 같으니 바로 파헤쳐 "Mangia Mangia!"

별도의 파스타와 페스토 조리법 배열 만들기

pastaRecipeArray 및 pestoRecipeArray에 대한 변수를 선언하는 것부터 시작하겠습니다. 각 변수는 개체 배열에 할당됩니다. 여기서 각 개체는 개별 재료를 나타냅니다.

각 변수에 배열 값을 할당할 때 Object.freeze() 메서드를 사용하여 변수가 변경되지 않도록 합니다. (나중에 자세히 설명)

각 레시피 객체에는 다음과 같은 키-값 쌍이 포함된 세 가지 속성이 있습니다.

• '이름' = '문자열' 형식의 성분 이름
• 'recipe' = 파스타, 페스토 또는 둘 다에 재료가 필요한 레시피를 나타내는 '배열' 형태의 값입니다.
• '가격' = 상당히 비현실적인 더미 콘텐츠를 사용하여 '숫자' 형태로 표시된 USD 단위의 재료 가격

(참고: 이 게시물에서는 내용을 간단하고 상대적으로 단순하게 유지하기 위해 수량 및 기타 세부 정보를 생략했습니다. JSON을 사용하여 이러한 객체를 구현할 수도 있지만 요약 여기.)

이러한 배열을 설정하는 코드는 다음과 같습니다.

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

recipe 키가 배열 형식의 값을 가리키는 것을 다시 한 번 알 수 있습니다. 두 레시피 모두 일부 재료가 사용되기 때문에 이렇게 설정했습니다.

pastaRecipeArray가 제대로 설정되었는지 테스트하려면 배열의 각 개체를 반복하는 데 사용되는 콜백 함수인 .forEach() 메서드를 활용할 수 있습니다. 성분을 매개변수로 사용하면 다음과 같이 콘솔에 로그인할 수 있습니다.

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

콘솔을 검사하면 다음과 같은 출력이 표시됩니다.

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}

마찬가지로 다음과 같이 pestoRecipeArray를 기록할 수 있습니다.

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

결과는 다음과 같습니다.

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}

(참고: Array(1) 및 Array(2)와 같은 출력이 표시되면 해당 키를 선택하도록 함수를 다시 작성하거나 콘솔에서 배열을 클릭하여 세부 정보를 볼 수 있습니다. 내용.)

쇼핑 목록 배열 만들기

이제 레시피 배열을 구축했으므로 다음 단계인 쇼핑 목록 배열을 생성해 보겠습니다. 이를 위해 객체 배열인 파스타RecipeArray와 pestoRecipeArray를 shoppingListArray라는 새로운 변경 가능한 변수로 결합하려고 합니다. 스프레드 연산자를 사용하여 이 작업을 수행합니다. 다음과 같습니다.

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

이제 다음 console.log()를 사용하여 새 목록이 어떻게 보이는지 살펴보겠습니다. 앞으로는 혼란스러운 부분을 제거하기 위해 전체 객체가 아닌 객체 내의 속성 값을 기록할 것입니다. 이 코드를 사용하여 프로세스의 각 단계 후에 목록이 어떻게 변경되는지 확인할 수 있습니다.

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

콘솔에서 목록이 하나로 합쳐진 것을 볼 수 있습니다. 이번에는 각 성분 이름만 기록합니다.

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

불변 배열과 가변 배열

pastaRecipeArray와 pestoRecipeArray를 불변으로 만들어야 하는 이유는 무엇인가요? 불변으로 만들면 할당된 후에 값을 변경할 수 없습니다. 우리는 이 레시피를 그냥 찢어버리고 싶지 않습니다. 우리는 또 다른 영광스러운 날을 위해 그들을 구하고 싶습니다. 우리가 임시적이고 변경 가능한 쇼핑 목록에 무엇을 쓰려고 하는지에 관계없이 이러한 불변의 가족 요리법은 계속 유지되어야 합니다.

또한 새로 만든 shoppingListArray에 재료를 추가하거나 빼서 원래 레시피에 영향을 주지 않고 특정 취향에 맞게 이 요리를 만들 수 있기를 원합니다.

Adding, replacing, and deleting ingredients

As you may have noticed, when we combined our pasta and pesto recipes into our shopping list we ended up with duplicates for "Extra Virgin Olive Oil" and "Kosher Salt". We don't need to buy these twice so let's get rid of them. There are fancier ways to eliminate duplicates, but for now we will use .splice() to remove the first Extra Virgin Olive Oil object.

The .splice() method destructively deletes or replaces elements in an array. The first parameter represents the first element we are deleting and the second parameter represents how many elements we want to delete from that start point. While "Extra Virgin Olive Oil" is the second object in the array, arrays start at '0', so technically the second object is represented by a '1'. Let's execute the following:

shoppingListArray.splice(1, 1)

In the console you will see that there is now only one "Extra Virgin Olive Oil" object. (note: If you try to use .splice() or similar methods on one of our original recipe arrays you will get a TypeError because we used Object.freeze(), making them immutable.)

We still have an extra "Kosher Salt", and now we are going to use .splice() to it's full power. In addition to our first two parameters we have a third parameter that can replace elements in an array with new elements. I love to add a bit of lemon to my pesto, and I don't like food that is too salty, so let's go ahead and replace our extra "Kosher Salt" with our new "Lemon" object. We will declare our lemon object as a variable for better readibility and include it as the third .splice() parameter.

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

shoppingListArray.splice(6, 1, lemon)

Today I'm feeling a bit saucy so let's change things up a bit and add in some roasted tomatoes using .push(). With .push() we can add elements to the end of the array, with each parameter representing a new element. So let's add some "Cherry Tomatoes" to our list. Come to think of it, I forgot the "Garlic" too!

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

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

shoppingListArray.push(tomatoes, garlic)

Organizing our shopping list

Now that we have all our ingredients well established let's organize them in a way that will make our shopping experience seamless.

Let's organize our list alphabetically using .sort().

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

  if (nameA < nameB) {
    return -1
  }
  if (nameA > nameB) {
    1
  }
  return 0
})

Our shopping list now looks like this in the console.

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

Planning ahead for our expected costs

Now we are ready to go to the market, but first let's make sure we know how much money we need, using .reduce(). There is a lot to go over with .reduce(), and I'm getting hungry, so I'll skip over the details.

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.

Creating new recipe list arrays

So we went to the store and got our ingredients, but now we want to separate our ingredients back into their respective recipes, just to lay everything out on the table and keep things in order. Lets create two new arrays, pastaIngredients and pestoIngredients using .filter(), .includes(), and of course .forEach() to log them to the 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)
})

"Wrapping" it up

As you can see from logging these to the console we successfully created a shoppingListArray that didn't modify our original immutable recipe arrays, pastaRecipeArray and pestoRecipeArray. We then were able to mutably modify the shoppingListArray in a destructive manner to add, delete, and replace ingredients to our liking. We also calculated how much we needed to spend before going to the store. Lastly, we were able to separate these ingredients back into their respective recipes, pastaIngredients and pestoIngredients in preparation for a brilliant meal.

Well, what a delicious dish that was. I hope you enjoyed it as much as I did. Again, Mangia Mangia!

위 내용은 맛있는 페스토 파스타를 위한 (불)변경 가능한 쇼핑 목록의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!