RxJS bufferCount() Transformation Operator

The RxJS bufferCount() operator is a transformation operator that buffers the source Observable values until the size hits the maximum bufferSize given.

In other words, we can say that the bufferCount() operator collects the values from the past as an array, and emits that array only when the size reaches bufferSize.

It takes two arguments:

buffersize: It specifies the maximum size of the buffer emitted.
startBufferEvery: It specifies the interval at which the new buffer is started. For example, if startBufferEvery is 2, then a new buffer will be started on every other value from the source. A new buffer is started at the beginning of the source by default. It is optional. The default is value is null.

Syntax:

Following is the syntax of the bufferCount() operator:

Parameter Explanation

bufferSize: It specifies the size of the buffer to be emitted.

Return value

The bufferCount() operator's return value is an Observable of arrays of buffered values.

Let us see some examples of bufferCount() operator to understand it clearly.

Example 1 (Collect buffer and emit after specified number of values)

import { interval } from 'rxjs';
import { bufferCount } from 'rxjs/operators';
//Create an observable that emits a value every second
const source = interval(1000);
//After three values are emitted, pass on as an array of buffered values
const bufferThree = source.pipe(bufferCount(3));
const subscribe = bufferThree.subscribe(val =>
  console.log('Buffered Values:', val)
);

Output:

After executing the above example, you will see the following result:

RxJS bufferCount() Transformation Operator

Example 2 (Overlapping buffers)

import { interval } from 'rxjs';
import { bufferCount } from 'rxjs/operators';
//Create an observable that emits a value every second
const source = interval(1000);
const bufferEveryOne = source.pipe(bufferCount(3, 1));
const subscribe = bufferEveryOne.subscribe(val =>
  console.log('Start Buffer Every 1:', val)
);

Output:

After executing the above example, you will see the following result: