The example that made me understand flatMap and then flatMapLatest

I had a hard time wrapping my head around flatMap and flatMapLatest when I started learning observables. Oh the number of times I googled map vs flatMap! I always ended up just more confused. Until my mind magically crafted this simile for me. Don’t ask me how though.

I will not explain what observables are now, because you won’t be here if you didn’t already know. I will also assume that you understand what map does because it’s pretty simple, but still I will start the example with it in order to compare and contrast.

The Fashion Show example

Imagine a fashion show with 2 catwalks.

The catwalk represents an observable sequence.

The first catwalk is for the designers behind the beautiful dresses. The second catwalk is for the models wearing those beautiful dresses made by these designers.

map

Each designer has made exactly one dress. There is the same number of designers and models. Each model is wearing a dress for a designer. So every time a designer walks out on the first catwalk, a model wearing his designed dress will walk out on the second catwalk.

• The designers together form a sequence.
• Each dress on its own is NOT a sequence. But the result of all dresses is a sequence.

flatMap

Each designer has made several dresses. Every time a designer walks out on the catwalk, the models wearing his dresses start going out on the next catwalk.

Let’s say the number of models is less than the number of dresses. The models need to go backstage to change dresses.

Now the first designer went out on the catwalk, 2 models went out on the second catwalk wearing his first 2 dresses, but the designer still has more dresses to flaunt.

In the meantime a 2nd designer walks out on the first catwalk, the models will start wearing dresses of the 2nd designer as well, while they will continue to wear dresses of the first designer.

However, on the second catwalk, people watching the show, can no longer tell if the model is wearing a dress of the first or the second designer. The 2 series of dresses have been flattened (wink) into 1 series. You see 1 series of dresses regardless who the designer is.

The first designer’s dresses will keep being worn and displayed until all of them are done. Models will keep going out on the second catwalk, until the designer catwalk no longer has new designers walking out and until all the dresses of each designer who walked out is completed too.

• The designers are a sequence.
• Each designer’s dresses are a sequence on their own. But the combination of all the dresses of the designers is one sequence too!

So? Did you see the difference? The map generates another observable sequence based on mapping each element to another element; each designer to a model; however, the flatMap allows you to operate on an observable where each element generates another observable, so the flatMap instead of generating another observable for each element of the first observable, it generates ONE observable sequence based on combining all of the resulting sequences.

Back to my example, if the flatMap didn’t do a flattening; for each designer walking out, there had to be a new catwalk constructed on the spot for the designer’s models to walk out onto.

I thought to myself: “Mmm okay, I got it. Thanks brain for creating this example for me. flatMapLatest is useless though. I don’t need to understand it now.”

Then with experience I understood that I need it even more than the flatMap, but I also could not understand it by just looking at the — although superhelpful — rxMarbles.

So how does flatMapLatest play out in this example?

flatMapLatest

People went crazy, they said we can no longer tell which dress is whose. So it was agreed that whenever a new designer walks out on the first catwalk, the dresses of the previous designer stop being displayed by the models on the second.

So the first designer walks out, the models start rolling out. The second one walks out, the models unsubscribe (wink) from his dresses, and dispose them (wink) then start wearing and walking out with the new designer’s dresses.

I really hope these examples made it easier for you. I’m someone who is very visual and to really understand things I need to associate them to real world examples. So if you’re like me, and found this helpful, please let me know in the comments. It would make me very happy.