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

A guide to implementing angularjs app.service and $q in typescript

Learning how to smoothly navigate to the top of a page when changing routes in Angular using provideRouter

Tips on using the `IsEqual` function to develop a tool that verifies the similarity of different data types

Why is the Ionic 3 HTTP request malfunctioning on iOS, while functioning correctly on Android?

Angular template error: 'Component' type does not have the specified property

Limit the types of components allowed as children in a React component by utilizing TypeScript

Transform an Angular 2 application to seamlessly incorporate an SDK

Using ngModel in multiple mat-select elements in Angular 2/4

The properties are not found in the type 'Observable<Todo[]>'

Using Typescript with NodeJs

The Angular Syncfusion schedule is unable to call upon an object that may potentially be 'undefined'

Dynamic Text Labels in Treemap Visualizations with Echarts

Unable to run `create-react-app` with the `--template typescript` option

switchMap: Triggering multiple requests simultaneously (2)

Is there a way to expand the return type of a parent class's methods using an object

How can you dynamically disable the submit button on a form in Angular 7+ based on the form's current status?

Curious about the missing dependencies in React Hook useEffect?

What is the best way to retrieve an object within a class?

"Learn the trick of converting a stream into an array seamlessly with RxJs.toArray function without the need to finish the

Ways to fix the perpetual cycle in adal-angular4 following authentication redirect