How does RxJS reduce in case there is no matching accumulator?

Question

I was going through an article on Reactive Programming in JavaScript and not sure how the following example listed in there results in output 27

import {Observable} from 'rxjs-es';

let output = Observable.interval(500)
             .map(i => [1,2,3,4,5,6][i]);

let result = output.map(num1 => num1)
    .filter(num1 => num1 > 4)
    .reduce((num1, num2) => num1 + num2);

result.subscribe(number => console.log(number));

Output --> 27

As per my understanding at every 500ms interval, each of the numbers in the stream [1,2,3,4,5,6] gets filtered one by one. So, only 5 and 6 will be able to go through the filter.

However, since only one element would be available at any given point during the processing, I wonder how the reduce is accumulating the result as 27?

user_1679126 · Answer

I have translated it to RxJs 6 and it doesn't output 27

const { interval } = rxjs;
const { map, filter, reduce, take } = rxjs.operators;

let output = interval(500).pipe(
 map(i => [1,2,3,4,5,6][i]), // very strange way of adding one to the interval
 take(6) // had to add a take so observable would complete else reduce would never emit
);

let result = output.pipe(
  map(num1 => num1), // Does nothing
  filter(num1 => num1 > 4), // filters out those less than 5
  reduce((num1, num2) => num1 + num2) // add the leftovers 5 and 6
);

result.subscribe(number => console.log(number)); // 11 is the output

How does RxJS reduce in case there is no matching accumulator?

1 Answers