Coding Puzzles[EP2]: What Anime to Watch

One of the things I dearly miss about working in person was our lunchtime Anime Watch Sessions*. Anime is somewhat of a common interest in the company, and watching episodes together is something that has brought the team especially closer together (that we enjoy occasionally sprinkling anime easter eggs in our code and internal jargon in enthusiasm).

One of our struggles was deciding which anime to watch for lunch. See, we were yet to be at the point where we had a team member for each subscription site whose accounts we could mix and match like Megazords. So when picking what to watch, we had to consider what we enjoyed watching as a team and what streaming site that anime was available on.

And with thunderous applause, this puzzle was born.

* Trust me, some others that share the same acronym aren’t as enjoyable.

Remixed licensed fan art

Episode 2: What Anime to Watch

Puzzle Type: Write a Function
Difficulty: Tiger*
Instructions:
- Accept a String Array of subscriptions as input
- Write a function that returns a String Array of available shows to watch given the input
- No duplicate values on the output
- One line function only (no semi-colons)
- No Lodash or other libraries beyond ES6
- Bonus: What’s the most efficient way to do this?

* In Athennian, we label our bug tickets on a scale that goes from ⏬Wolf, Tiger, Demon, Dragon, and ⏫God. For those who play Dungeon & Dragons, think of it as the creature you randomly encounter.

Check out the starting code on a repl or work with the following code:

const providers = [{
  name: "Netflix",
  shows: [
    "Attack on Titan",
    "One Punch Man",
    "Jojo's Bizzare Adventures",
    "Fullmetal Alchemist"
  ]
},{
  name: "Crunchyroll",
  shows: [
    "Attack on Titan",
    "Demon Slayer",
    "Jojo's Bizzare Adventures"
  ]
},{
  name: "Funimation",
  shows: [
    "Cowboy Bebop",
    "Hunter x Hunter",
    "Fullmetal Alchemist"
  ]
}]
const mySubscriptions = ['Netflix', 'Crunchyroll']
const result = mySubscriptions // write one line function here
console.log(result)

Check out the solution when you’re done, or read the first part of the Takeaways section for some cleverly disguised clues before trying to solve it.

It looks like we may not have to worry about this problem in the future.

Takeaways

Beyond the anime twist, this puzzle is inspired by our many code review sessions when we had dealt with complex logic. We occasionally have meetings where we advise each other on writing similar data structure manipulation algorithms to determine how we would work with arrays while taking efficiency, readability, and the cool factor into account. (We usually consider trendy ES6 sugar functions cool).

For this puzzle, there are three connected algorithms the solver needs to connect:

1. Filtering [providers] by [mySubscriptions]
2. Mapping [providers] to [[shows]]
3. Filtering [[shows]] to a Set

The solution is ahead, so turn back now if you haven’t taken a stab at the puzzle yet!

Typecasting between Arrays and Sets

An array with duplicates can be turned into an array of unique values by casting it to a Set and then back into an Array:

// OG Javascript example
Array.from(new Set(['a', 'b', 'a'])) // ['a', 'b']
// Equivalent example but using the cool spread operator
[...new Set(['a', 'b', 'a'])] // ['a', 'b']

Algorithm for 3. complete ✔️

Array manipulation by filtering and mapping

The javascript Map function returns an array of the same length but containing the same or mutated entries.

The javascript Filter function returns an array of the same or shorter length but contains no mutated entries.

Reduce may be used instead if an input must go through both mapping and filtering. Using reduce instead of map and filter is more efficient given an array long enough. However, note that this benefit would be minuscule for our use case in this puzzle. Many would argue that separating the algorithm out to Map and Filter rather than one Reduce would be more readable.

Fortunately, the ES6 standards javascript FlatMap function offers the best of all worlds by being both efficient and readable (and cool too). It accomplishes filtering, mapping, and flattening an array abstracted in one array function.

Algorithms for 1. and 2. complete ✔️

¯\_(ツ)_/¯ Not an anime reference, but I hope the meme fits the vibe here ¯\_(ツ)_/¯

How did that go?

You guys seemed to love (or at least love to hate) the first coding puzzle of this series, so here’s some more!

Want more like this? Follow BACIC where yours truly, Elvin Limpin, will try to churn out some more over the next year.

As always, feedback is appreciated — we want to make these posts as engaging and informative as possible. Thanks for the read!