If you're looking for the most effective solution to your issue, consider this approach:

function findBestStoreForRecipe(recipe, stores) {
    let bestStore;
    let lowestPrice = Number.MAX_SAFE_INTEGER;

    Object.keys(stores).forEach(store => {
        let recipeCost = 0;

        Object.keys(recipe).forEach(ingredient => {
            recipeCost += recipe[ingredient] || 0;
        });

        if (recipeCost < lowestPrice) {
            lowestPrice = recipeCost;
            bestStore = store;
        }
    });

    return bestStore;
}

There's debate about whether for is more efficient than forEach. Some argue that in modern environments, there's no significant difference. Personally, I find the forEach implementation easier to read and maintain.

If you're looking to dive into the world of Array.reduce, here's a solution that can serve as a starting point for your exploration. While it may not be the most optimized approach, it offers a foundation from which you can build upon and optimize further. By honing your skills with this concept, you can achieve the desired results in terms of processing efficiency and complexity.

Check out this Repl Example for more hands-on experience.

The function cheapestStoreForRecipe takes in two arguments: recipe and storeCollection. It returns a list of stores along with their corresponding invoices for the given recipe, showcasing the cost of each ingredient item and the total cost of the recipe.

Here's an overview of how the function works:
1. Iterate through each store in the storeCollection.
2. For each store, iterate through the items in the recipe.
3. If there is a match between a recipe item and a store inventory item, calculate the quantity, unit, total cost of the item, and eventually the total cost of the entire recipe.

function cheapestStoreForRecipe(recipe, storeCollection){
  return Object.entries(storeCollection)
    .reduce((_storeCollection, [storeName, storeInventory]) => {
      let storeInvoice = Object.entries(recipe)
        .reduce((_recipe, [itemName, itemQuantity]) => {
          let storeInventoryItem = storeInventory[itemName]
          if(storeInventoryItem) {
            _recipe.invoice[itemName] = {
              quantity: itemQuantity,
              unit: storeInventoryItem,
              total: itemQuantity * storeInventoryItem,
            }
            _recipe.total += _recipe.invoice[itemName].total
          }
          return _recipe
        }, {
          invoice: {},
          total: 0,
        })
      _storeCollection[storeName] = storeInvoice
      return _storeCollection
    }, {
      Brutto: {},
      Edoka: {},
      Were: {},
    })
}

Below is a sample representation of the invoices generated by the function:

{
  "Brutto": {
    "invoice": {
      "potato": {
        "quantity": 3, 
        "unit": 3,
        "total": 9
      },
      "onion": {
        "quantity": 1,
        "unit": 5,
        "total": 5
      },
      "corn": {
        "quantity": 5,
        "unit": 2,
        "total": 10
      }
    },
    "total": 24
  },
  "Edoka": {
    "invoice": {
      "potato": {
        "quantity": 3,
        "unit": 5,
        "total": 15
      },
      "onion": {
        "quantity": 1,
        "unit": 4,
        "total": 4
      },
      "corn": {
        "quantity": 5,
        "unit": 3,
        "total": 15
      }
    },
    "total": 34
  },
  "Were": {
    "invoice": {
      "potato": {
        "quantity": 3,
        "unit": 3,
        "total": 9
      },
      "onion": {
        "quantity": 1,
        "unit": 5,
        "total": 5
      },
      "corn": {
        "quantity": 5,
        "unit": 2,
        "total": 10
      }
    },
    "total": 24
  }
}

In my opinion, this code snippet is highly readable and personally, I would choose to implement it. The performance is expected to be top-notch and it also presents an opportunity to utilize the relatively new Object.entries API.

function findCheapestStoreForRecipe(recipe, storeCollection){
    let cheapest, cheapestStore;
    for (const [storeName, store] of Object.entries(allStores)) {
        let total = 0;
        for (const [ingredient, amount] of Object.entries(recipe)) {
            total += store[ingredient] * amount;
        }

        if (!cheapest || total < cheapest) {
            cheapest = total;
            cheapestStore = storeName;
        }
    }

    return cheapestStore;
}

If you want to find out the total cost of a recipe, you'll have to add up the values from an array that consists of the common elements between the recipe keys and the product keys in each store. However, this task is for you to solve on your own.

When it comes to efficiently summing up the elements of an array, using a for loop is the most effective method, especially when dealing with large arrays.

Below, I have created a simple demonstration comparing:

• for loop
• for..of loop
• forEach method
• reduce method

const add = (a, b) => a + b;

const functionsObj = {
  usingFor: async(array) => {

    return new Promise(res => {
      let result = 0;
      for (let i = 0; i < array.length; i++) {
        result += array[i];
      }
      res(result);
    });
  },
  usingForeach: async(array) => {
    return new Promise(res => {
      let result = 0;
      array.forEach(number => {
        result += number;
      })
      res(result);
    });
  },

  usingReduce: async(array) => {
    return new Promise(res => {
      const result = array.reduce(add);
      res(result);
    });
  },
  usingForOf: async(array) => {
    return new Promise(res => {
      let result = 0;
      for (let i of array) {
        result += i;
      }
      res(result);
    });
  }
};
const Arr10M = [];
for (let j = 0; j < 10000000; j++) {
  Arr10M.push(
    1 + parseInt(40 * Math.random(), 10)
  );
}
const Arr10K = Arr10M.slice(0, 10000);

async function runTests(method, arr, attempts = 300) {
  let results = [];
  for (let attempt of arr.slice(0, attempts)) {
    performance.mark('start');
    await functionsObj[method](arr);
    performance.mark('end');
    results.push(performance.measure(method, 'start', 'end').duration);
    performance.clearMeasures();
    performance.clearMarks();
  }
  return new Promise(res => {
    let min = 1 * Number(Math.min(...results)).toFixed(6),
      max = 1 * Number(Math.max(...results)).toFixed(6);

    window.setTimeout(() => {
      res([min, max]);
    }, 1000 - 1 * max);
  });

}
(async() => {


  let results = {},
    methods = ['usingFor', 'usingForOf', 'usingReduce', 'usingForeach'];
  for (let method of methods) {
    let [
      min_10K_elements,
      max_10K_elements
    ] = await runTests(method, Arr10K), [
        min_10M_elements,
        max_10M_elements
      ] = await runTests(method, Arr10M, 3),
      result = {
        min_10K_elements,
        max_10K_elements,
        min_10M_elements,
        max_10M_elements
      };

    results[method] = result;
    console.log({
      method,
      ...result
    });
  }
  console.table(results);


  return;
})();

By inspecting the results in a table within your browser's devtools, you will observe that the for loop consistently performs the fastest, while reduce and forEach are more or less equal in speed. Any slight differences may be influenced by concurrent processes in the browser or other factors related to your machine.

When testing with an array containing 10 million elements, the for loop shows a performance improvement of approximately 20 to 30 times compared to reduce and forEach.

Remember, prioritizing clean code over premature optimization is essential. But if raw performance is key for your project, this benchmark provides valuable insights for your homework assignment.