How to read the RxJs mergeMap marble diagram

Question

In this marble diagram for mergeMap, how do you read this expression?

// Kind of, looks like an em-dash near the end
mergeMap(i => 10*i--10*i--10*i--|)

Answer 1

mergeMap maps i to an observable represented by the string 10*i--10*i--10*i-|. This string contains marble syntax representing events happening over virtual time.

The main characters used in the documentation are:

• - frame: 1 "frame" of virtual time passing
• [a-z0-9] any alphanumeric character: Represents a value being emitted by the producer signaling next().
• | complete: The successful completion of an observable. This is the observable producer signaling complete().
• # error: An error terminating the observable. This is the observable producer signaling error().

So 10--10--10-| would be an expression for the second observable in the picture. e.g.

const tens$ = timer(0, 4).pipe(take(3), mapTo(10))

10*i--10*i--10*i-| is an expression for the observable you get when you multiply every value emitted by 10--10--10-| with i. e.g.

of(1,3,5).pipe(
  mergeMap(i => tens$.pipe(map(v => v*i)))
)