[RxJS] Transformation operator: scan

All of the combination operators take two or more observables as input. These operators may also be alternatively called "vertical combination operators", because of how they work in a marble diagram. Next, we will learn about scan(), which is an important "horizontal combination operator".

var click$ = Rx.Observable.fromEvent(document.querySelector("#btn"), 'click');

/*

----ev-----ev---ev----ev----ev----..

    mapTo(1)

----1 -----1 ---1 ----1 ----1-----..

    scan( (acc, curr) => acc + curr, 0)

----1------2----3-----4-----5-----..

*/

var clicks$ = click$

.mapTo(1)

.scan( (acc, curr) => {

  return acc + curr

}, 0);

var sub = clicks$.subscribe(

  (x) => console.debug("Total Clicks: " + x),

  (err) => console.error(err),

  () => console.info("DONE")

)

var foo$ = Rx.Observable.of('h', 'e', 'l', 'l', 'o')

  .zip(Rx.Observable.interval(500), (c, t) => c);

var bar$ = foo$.scan( (acc, curr) => {

  return acc + curr;

}, '');

/*

-----h-----e-----l-----l------o|        (foo)

    scan( (acc, curr) => acc + curr, '')

-----h-----(he)--(hel)-(hell)-(hello|)  (bar)

*/

var sub = bar$.subscribe(

  (x) => console.debug(x),

  (err) => console.error(err),

  () => console.info("DONE")

);

/**

"h"

"he"

"hel"

"hell"

"hello"

"DONE"

*/