Benchmark: rxjs map map - MeasureThat.net

HTML Preparation code:

<script src='https://unpkg.com/rxjs@^7/dist/bundles/rxjs.umd.min.js'></script>

Script Preparation code:

var example = {
    rid: 123,
    data: [{
        id: 1,
        name: 'name-1'
    }, {
        id: 2,
        name: 'name-2'
    }],
    summary: {
        count: 10
    }
}

Tests:

map #1
let { of, map } = rxjs; const sub1 = of(example).pipe( map( value => value.data), map( data => data.map( item => item.name)) ); sub1.subscribe()
map #2
let { of, map } = rxjs; const sub2 = of(example).pipe( map( data => data.data.map( item => item.name)) ); sub2.subscribe()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map #1
map #2

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of two different approaches to transforming data using the `map` function in the RxJS library.

**Benchmark Definition JSON**

The benchmark definition json contains three key elements:

1. **Script Preparation Code**: This code is executed by MeasureThat.net before running the benchmark. In this case, it defines an object `example` with some sample data.
2. **Html Preparation Code**: This code is used to include the RxJS library in the HTML document.
3. **Benchmark Definition**: This specifies the JavaScript function that will be run as part of the benchmark.

**Individual Test Cases**

There are two test cases:

1. **map #1**
This test case defines a subscription `sub1` using the `pipe` method, which applies the `map` function to the `example` object and then maps over the resulting array.
2. **map #2**
This test case is similar to the first one, but it uses a different approach: it uses the `map` function directly on the `example` object's `data` property, without using `pipe`.

**Options Compared**

The two test cases compare the performance of two approaches:

1. **Using `pipe`**: This approach involves using the `pipe` method to chain multiple transformations together.
2. **Direct Mapping**: This approach involves applying the `map` function directly on the original data.

**Pros and Cons**

**Using `pipe`:**

Pros:

* More flexible, as it allows for chaining multiple transformations
* Can be more efficient, since it avoids creating unnecessary intermediate arrays

Cons:

* May incur additional overhead due to the creation of a new observable chain
* Requires explicit management of the subscription

**Direct Mapping**

Pros:

* Simplifies the code and eliminates the need for explicit subscription management
* Often faster in practice, since it avoids the overhead of `pipe`

Cons:

* Less flexible than using `pipe`, as it limits the ability to chain transformations
* May result in unnecessary intermediate arrays being created

**Library: RxJS**

RxJS (Reactive Extensions) is a library for functional programming on streams of data. The `map` function is used to transform each element of an observable sequence.

In this benchmark, RxJS is used to create observables and manage subscriptions.

**Special JS Feature/Syntax**

There are no special JavaScript features or syntax used in these test cases.

**Other Alternatives**

If you wanted to write a similar benchmark, you could use other libraries or frameworks that provide reactive programming capabilities, such as:

* Lodash
* Ramda
* Preact

Keep in mind that the performance results may vary depending on the specific implementation and environment.

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

Browser/OS: Chrome 118 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
map #1	2160570.2 Ops/sec
map #2	3159863.8 Ops/sec

Related benchmarks:

rxjs map map (version: 0)

123

Comparing performance of: map #1 vs map #2

Created: one year ago by: Registered User

Jump to the latest result

map #1

map #2

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):