Public Solving: Elf Coffee Shop menu

By now, this will be a couple days past the date that you could submit, so I think it's safe to start this series.

I've been participating in Marc Backes his unique Dev Advent Calendar.
Not to win the prizes, but just to try and solve the puzzles at hand.

The first puzzle I did was day 02.
The query is to help the elves solve a new menu because they have new drinks and even introduce flavors!

Describing the problem

After cloning the code and checking what we have to work with, I've noticed we got a helper function called: createMenu. It gets two parameters in the form of drinks, and flavors.

They look like this:

const drinks = [
    { name: 'Latte', price: 3 },
    { name: 'Macchiato', price: 3.5 },
    { name: 'Cappuccino', price: 4 },
    { name: 'Hot Chocolate', price: 4.5 },
]
const flavors = [
    { name: 'Ginerbread', price: 1.5 },
    { name: 'Cinnamon', price: 1 },
    { name: 'Peppermint', price: 0.5 },
    { name: 'Chestnuts', price: 1.25 },
    { name: 'Pumpkin Spice', price: 1.75 },
    { name: 'Apple Crisp', price: 2 },
    { name: 'Mrs. Claus Special', price: 3 },
]

The desired output for this challenge is an array of each option on the menu.

Each drink can have each of the flavors + an undefined one, which will be the "normal" version.
The price is the price of the drink + the price of the flavor.

The output should also be sorted by drink name (a-z) and then by price (lowest to highest).

The output should be in this format:

[
    { drink: 'Cappuccino', flavor: undefined, price: 4 },
    { drink: 'Cappuccino', flavor: 'Peppermint', price: 4.5 },
    { drink: 'Cappuccino', flavor: 'Cinnamon', price: 5 },
]

Right, let's get to it!

Solving the puzzle

My first thought was: this is a perfect option for the JavaScript map function.

I've started by wrapping the return in the drinks map like so:

return drinks.map((drink) => {
    // drink available
});

This will loop over each drink.
Then we need to loop over each of the flavors inside this map.
Again a good opportunity to use the map.

return drinks.map((drink) => {
    return flavors.map((flavor) => {
      // flavor
    });
});

Then we can simply return the object we want.
This object should look like this:

{ drink: 'Hot Chocolate', flavor: 'Gingerbread', price: 5.5 },

Where the price is a sum of the drink price and the flavor price.

return drinks.map((drink) => {
    return flavors.map((flavor) => {
      return {
        drink: drink.name,
        flavor: flavor.name,
        price: drink.price + flavor.price,
      };
    });
});

However, if we run this, we get a weird array like so:

[
  [
    { drink: 'Latte', flavor: 'Ginerbread', price: 4.5 },
  ],
  [
    { drink: 'Macchiato', flavor: 'Ginerbread', price: 5 },
  ],
]

Hmm, not exactly what we want, but we can quickly fix this, by changing the top map, to a flatMap. This makes sure it's all on one level.

return drinks.flatMap((drink) => {
    return flavors.map((flavor) => {
      return {
        drink: drink.name,
        flavor: flavor.name,
        price: drink.price + flavor.price,
      };
    });
});

That's better. Everything is now in one array.
However, we are missing the "basic" drink option!

My solution is to add an undefined flavor to the flavor array.
Decided to use unshift to add it as the first option in the array.

flavors.unshift({ name: undefined, price: 0 });

If we run the script, the output is almost correct. We just need a way to sort everything.

Let's start by using the sort function to sort on the name of the drink.

return drinks.flatMap((drink) => {
  return flavors.map((flavor) => {
    return {
      drink: drink.name,
      flavor: flavor.name,
      price: drink.price + flavor.price,
    };
  });
})
.sort((a, b) => (a.drink < b.drink ? -1 : 1));

This is the shorthand function for the sort option, ensuring the array is sorted based on the drink property which resembles the name.

Running the code shows that my favorite coffee, the Cappuccino, is now number one, so that's fine, but the prices are still scrambled!

No worries, we can check if the drink name is already correct. We should order based on the price.

If we would write it out completely it looks like this:

.sort((a, b) => {
  if (a.drink === b.drink) {
    return a.price < b.price ? -1 : 1;
  } else {
    return a.drink < b.drink ? -1 : 1;
  }
});

We can also make this a bit smaller by using the inline ternary operator.

.sort((a, b) =>
  a.drink > b.drink
    ? 1
    : a.drink === b.drink
    ? a.price > b.price
      ? 1
      : -1
    : -1
);

Some people like the first one better, some the second.
I would agree the entirely written one actually is easier to read in this case.

The moment of truth

Now it's time to put it to the test.

I've decided to run npm test to see if I pass the test.

🥁🥁🥁

And as you can see in the image above, the test turned green!
Yes, we solved it.

I'm not stating this is the "best" solution, but I wanted to show you my approach.
Let me know what your approach was or what you would do differently 👏

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Comments

[Alex Lohr]

I find Array.prototype.reduce the ideal candidate for asymmetric input/output and it also allows us to forgo creating multiple arrays in memory, so the first part of my solution would look like this:

return drinks.reduce((flavored, drink) => {
  flavored.push({ drink: drink.name, flavor: undefined, price: drink.price });
  flavors.forEach((flavor) =>
    flavored.push({ drink: drink.name, flavor: flavor.name, price: drink.price + flavor.price })
  );
}, [])

For the second part, I would utilize that 0 (equal sort value) it's coerced to false when using || and that string.prototype.localeCompare returns a number.

[Chris Bongers]

Nice one!

For future puzzle i actually decided to rely a lot of reduce.
Must say this looks a bit cleaner.

Map made more sense if it was just the one array loop that we had to format.

Thanks for this wonderful alternative Alex 👏