In what way can a piped operator in rxjs be influenced by the value returned by a subsequent operator?

Question

In what way can a piped operator in rxjs be influenced by the value returned by a subsequent operator?

When attempting to examine values between operators in an rxjs pipe, I decided to use tap to log them to the console.

I added two taps, one before a map operator used for sorting an Array, and one after. Surprisingly, both taps logged the same sorted Array, instead of displaying the original order followed by the sorted one.

This indicates that the sorting done in the map operator impacts the observable used by the preceding tap operator. However, the operators' functions appear to execute sequentially as expected, since the log from the second map is displayed between the taps' logs.

Here is my code (I plan to specify the Observable Array's type properly later):

public getJSONData(): Observable<any[]> {
    return this.http.get(this.poisJSONPath).pipe(
      map((featureCollection: any) => featureCollection.features),
      tap((features) => console.log(features)),
      map((features: any) => {
        console.log('this is logged in between as expected');
        return features.sort((a, b) =>
          a.properties.name > b.properties.name ? 1 : -1
        );
      }),
      tap((features) => console.log(features))
    );
  }

I suspect there may be a critical aspect of how rxjs pipes operate that I'm overlooking. In every other example I've seen, tap behaves as I anticipate. Can anyone point out what I might be missing?

angular typescript rxjs rxjs-pipeable-operators

Answer 1

Answer №1

The most straightforward explanation is that the array is already organized.

Upon closer inspection, when I execute this code:

of({
  features: [3,4,7,1,3,8]
}).pipe(
  pluck('features'),
  tap(console.log),
  map(features => {
    console.log('this is logged in between as expected');
    return features.sort(
      (a, b) => a > b ? 1 : -1
    );
  }),
  tap(console.log)
).subscribe(console.log);

This is what I see in the output:

[3,4,7,1,3,8]
this is logged in between as expected
[1,3,3,4,7,8]
[1,3,3,4,7,8]

Therefore, it could be related to the environment where you are running the code.

If, for instance, console.log is buffered, then maybe the array has been altered in memory before it's actually printed, even though the order of printing remains intact.

An Important Point

RxJS does not provide any assurances about the state of memory. Hence, it is advisable to use pure, non-mutating functions so that your program logic becomes easier to understand.

Take into account this example:

const delayedLog = val => setTimeout(() => console.log(val), 1000);

of({a: 5}).pipe(
  tap(delayedLog),
  map(input => {
    delayedLog("this is logged in between as expected");
    input.a++;
    return input;
  }),
).subscribe(delayedLog);

output:

{"a":6}
this is logged in between as expected
{"a":6}

The value {"a":6} is printed two times although initially a = 5 when the first delayed log is triggered. This happens because the value changes in memory prior to the console reading the value from memory.

Vs

const delayedLog = val => setTimeout(() => console.log(val), 1000);

of({a: 5}).pipe(
  tap(delayedLog),
  map(input => {
    delayedLog("this is logged in between as expected");
    return { a: input.a + 1 }
  }),
).subscribe(delayedLog);

{"a":5}
this is logged in between as expected
{"a":6}

In this case, we obtain the anticipated result since we do not alter the object directly; instead, we return a new object with the incremented value.

A Starting Point for Investigation

Try sorting a copy of the array and check if that resolves the issue for you.

public getJSONData(): Observable<any[]> {
  return this.http.get(this.poisJSONPath).pipe(
    pluck('features'),
    tap(console.log),
    map((features: any[]) => {
      console.log('this is logged in between as expected');
      return [...features].sort((a, b) =>
        a.properties.name > b.properties.name ? 1 : -1
      );
    }),
    tap(console.log)
  );
}

Answer 2

The most straightforward explanation is that the array is already organized.

Upon closer inspection, when I execute this code:

of({
  features: [3,4,7,1,3,8]
}).pipe(
  pluck('features'),
  tap(console.log),
  map(features => {
    console.log('this is logged in between as expected');
    return features.sort(
      (a, b) => a > b ? 1 : -1
    );
  }),
  tap(console.log)
).subscribe(console.log);

This is what I see in the output:

[3,4,7,1,3,8]
this is logged in between as expected
[1,3,3,4,7,8]
[1,3,3,4,7,8]

Therefore, it could be related to the environment where you are running the code.

If, for instance, console.log is buffered, then maybe the array has been altered in memory before it's actually printed, even though the order of printing remains intact.

An Important Point

RxJS does not provide any assurances about the state of memory. Hence, it is advisable to use pure, non-mutating functions so that your program logic becomes easier to understand.

Take into account this example:

const delayedLog = val => setTimeout(() => console.log(val), 1000);

of({a: 5}).pipe(
  tap(delayedLog),
  map(input => {
    delayedLog("this is logged in between as expected");
    input.a++;
    return input;
  }),
).subscribe(delayedLog);

output:

{"a":6}
this is logged in between as expected
{"a":6}

The value {"a":6} is printed two times although initially a = 5 when the first delayed log is triggered. This happens because the value changes in memory prior to the console reading the value from memory.

Vs

const delayedLog = val => setTimeout(() => console.log(val), 1000);

of({a: 5}).pipe(
  tap(delayedLog),
  map(input => {
    delayedLog("this is logged in between as expected");
    return { a: input.a + 1 }
  }),
).subscribe(delayedLog);

{"a":5}
this is logged in between as expected
{"a":6}

In this case, we obtain the anticipated result since we do not alter the object directly; instead, we return a new object with the incremented value.

A Starting Point for Investigation

Try sorting a copy of the array and check if that resolves the issue for you.

public getJSONData(): Observable<any[]> {
  return this.http.get(this.poisJSONPath).pipe(
    pluck('features'),
    tap(console.log),
    map((features: any[]) => {
      console.log('this is logged in between as expected');
      return [...features].sort((a, b) =>
        a.properties.name > b.properties.name ? 1 : -1
      );
    }),
    tap(console.log)
  );
}

In what way can a piped operator in rxjs be influenced by the value returned by a subsequent operator?

Answer №1

An Important Point

A Starting Point for Investigation

Similar questions

Leveraging RXJS for efficient data retrieval in nodejs

Angular2's counterpart to the angular.version property in AngularJS

Is there a way to pass around jest mocks across numerous tests?

Which option is more beneficial for intercepting API data in Angular 6: interfaces or classes?

Fetching User Details Including Cart Content Upon User Login

What is the best way to utilize Object.keys() for working with nested objects?

Encountering a runtime issue with socket.io when using typescript that has been bundled by

Check for a rapid return if the function ends up returning null in JavaScript

Angular - Facing issues with CORS for every request made

Learn how to access tag attributes within the ngIf function in Angular 2

The recent update to Bootstrap v5 caused a complete disruption in the CSS of our application

The properties 'paginator' and 'sort' are missing an initial value

Unable to exclude modules from ng-build in Angular CLI, the feature is not functioning as intended

Ways to retrieve the following angular.callbacks.counter within angular2

Is there a marble experiment that will alter its results when a function is executed?

Guide on setting up redux store from server component using next.js and app router

I seem to be stuck in an endless cycle with React hooks and I can't figure out the root cause

Using Typescript, Angular, and Rxjs to retrieve multiple HttpClients

employing flush for lodash's throttle wrapper

Exploring the power of Prosemirror with NextJS through Tiptap v2