The Scan & Reduce operators in Angular

The Scan & Reduce Operators in Angular applies an accumulator function on the values of the source observable. The Scan Operator returns all intermediate results of the accumulation, while Reduce only emits the last result. Both also use an optional seed value as the initial value.

Scan in Angular

The scan operator applies an accumulator function over the values emitted by the source Observableble sequentially and emits each value.

Syntax

Where

  • accumulator is the function, that is called on each source value
  • seed is the initial accumulation value (optional)

The accumulator function gets three argument.

acc is the accumulator variable where the values are accumulated.
value comes from the source observable,
index of the value.

The initial value for the acc comes from the seed.

When the first value arrives from the source, the scan operator invokes the accumulator function on these two variables and emits the result.

When the second value arrives from the source, the result of the previous step becomes the input ( acc ). The scan emits a new result, which then becomes the input for the third emission.

This cycle continues till the stream completes.

Scan Example

In the example below (acc, value) => acc + value is the accumulator function. Seed is 0.

Source Code

The value for acc starts with the seed value i.e. 0. The variable value gets the value 1, which is the first value emitted by the source. The scan operator runs the accumulator function (acc + value = 1) and emits the result.

The result of the previous accumulator function becomes the input (acc) of the next scan. It is added to the next value (i. e. 2) emitted from the source and the result becomes 3.

This will continue until we reach the end of sequence

In the following code, we change the seed to 10. Now the accumulator starts with 10 instead of 0.

Combining as Arrays

Source Code

Tracking Button Clicks

Source Code

Reduce in Angular

The Reduce operator applies an accumulator function over the values emitted by the source Observation sequentially and returns the accumulated result when the source completes.

The Reduce operator behaves exactly like the scan operator, except for the following differences

  1. It does not return the intermediate results.
  2. It returns only after the source completes.

Reduce Example

The following example is similar to the scan example above. The only difference is that you will not see the intermediate results i.e. 1, 3, 6 10.

Source Code

Combining as Arrays

Source Code

Tracking Button Clicks

The Reduce operator emits only if the observable completes. Hence in the Tracking button click example, just replacing the scan with the reduce will not work.

In the following example, we create a new observable using the Subject and emit the click event using the event binding. This allows us to raise the complete notification.

Source Code

References

Read More

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top