Benchmark: JavaScript filter vs reduce more cases ha

JavaScript filter vs reduce more cases ha (version: 1)

Comparing performance of: Using array filter and reduce + spread vs Using array filter and object assign vs Using array filter and object assign SMALLER array first vs Using array filter and object assign SMALLER array first, includes instead of in vs Using array filter and reduce + spread + includes

Created: 2 years ago by: Registered User

Jump to the latest result

Tests:

Using array filter and reduce + spread
PRIMARY_SCOPES = ['a', 'd'] availableScopes = {'a': 'A', 'b': 'B', 'c': 'C', 'd': 'D'} const output = PRIMARY_SCOPES.filter((scope) => scope in availableScopes).reduce( (result, scope) => ({ ...result, [scope]: availableScopes[scope], }), {}, );
Using array filter and object assign
PRIMARY_SCOPES = ['a', 'd'] availableScopes = {'a': 'A', 'b': 'B', 'c': 'C', 'd': 'D'} const output = {}; Object.entries(availableScopes).forEach(([key, value]) => { if (!PRIMARY_SCOPES.includes(key)) { return; } Object.assign(output, { [key]: value }); }); return output;
Using array filter and object assign SMALLER array first
PRIMARY_SCOPES = ['a', 'd'] availableScopes = {'a': 'A', 'b': 'B', 'c': 'C', 'd': 'D'} const output = {}; PRIMARY_SCOPES.filter((scope) => scope in availableScopes).forEach((scope) => { Object.assign(output, { [scope]: availableScopes[scope] }); }); return output;
Using array filter and object assign SMALLER array first, includes instead of in
PRIMARY_SCOPES = ['a', 'd'] availableScopes = {'a': 'A', 'b': 'B', 'c': 'C', 'd': 'D'} const output = {}; PRIMARY_SCOPES.filter((scope) => Object.keys(availableScopes).includes(scope)).forEach((scope) => { Object.assign(output, { [scope]: availableScopes[scope] }); }); return output;
Using array filter and reduce + spread + includes
PRIMARY_SCOPES = ['a', 'd'] availableScopes = {'a': 'A', 'b': 'B', 'c': 'C', 'd': 'D'} const output = PRIMARY_SCOPES.filter((scope) => Object.keys(availableScopes).includes(scope)).reduce( (result, scope) => ({ ...result, [scope]: availableScopes[scope], }), {}, );

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using array filter and reduce + spread
Using array filter and object assign
Using array filter and object assign SMALLER array first
Using array filter and object assign SMALLER array first, includes instead of in
Using array filter and reduce + spread + includes

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.60 Safari/537.36

Browser/OS: Chrome 100 on Windows

View result in a separate tab

Test name	Executions per second
Using array filter and reduce + spread	574493.0 Ops/sec
Using array filter and object assign	422799.7 Ops/sec
Using array filter and object assign SMALLER array first	509160.9 Ops/sec
Using array filter and object assign SMALLER array first, includes instead of in	432962.1 Ops/sec
Using array filter and reduce + spread + includes	480566.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark definition and test cases.

**Benchmark Definition:**

The benchmark defines two scopes, `PRIMARY_SCOPES` and `availableScopes`, which contain arrays of strings. The goal is to find the intersection between these two arrays and store the resulting objects in an output object.

**Test Cases:**

There are four test cases that vary in their implementation:

1. **Using array filter and reduce + spread**
```javascript
const output = PRIMARY_SCOPES.filter((scope) => scope in availableScopes).reduce(
  (result, scope) => ({ ...result, [scope]: availableScopes[scope] }),
  {}
);
```
This test case uses the `filter` method to select scopes that exist in both arrays and then uses the `reduce` method to merge the resulting objects.

2. **Using array filter and object assign**
```javascript
const output = {};
Object.entries(availableScopes).forEach(([key, value]) => {
  if (!PRIMARY_SCOPES.includes(key)) return;
  Object.assign(output, { [key]: value });
});
```
This test case uses the `filter` method to select scopes that exist in both arrays and then iterates over the remaining scopes using `Object.entries`, merging each scope into the output object using `Object.assign`.

3. **Using array filter and object assign SMALLER array first**
```javascript
const output = {};
PRIMARY_SCOPES.filter((scope) => Object.keys(availableScopes).includes(scope)).forEach(
  (scope) => {
    Object.assign(output, { [scope]: availableScopes[scope] });
  }
);
```
This test case uses the `filter` method to select scopes that exist in both arrays and then iterates over the smaller array first, merging each scope into the output object using `Object.assign`.

4. **Using array filter and object assign SMALLER array first, includes instead of in**
```javascript
const output = {};
PRIMARY_SCOPES.filter((scope) => Object.keys(availableScopes).includes(scope)).forEach(
  (scope) => {
    Object.assign(output, { [scope]: availableScopes[scope] });
  }
);
```
This test case uses the `filter` method to select scopes that exist in both arrays and then iterates over the smaller array first, merging each scope into the output object using `Object.assign`, but uses the `includes` method instead of `in`.

**Options Compared:**

The benchmark compares four different approaches:

* Using `reduce` with `spread`
* Using `object assign`
* Using `object assign` with a smaller array first
* Using `object assign` with includes instead of `in`

**Pros and Cons:**

Here's a brief summary of the pros and cons of each approach:

1. **Using `reduce` with `spread`:**
	* Pros: concise, efficient
	* Cons: can be slower for large arrays due to the overhead of `reduce`
2. **Using `object assign`:**
	* Pros: simple, easy to understand
	* Cons: can be slower than `reduce` or `Object.assign` with a smaller array first
3. **Using `object assign` with a smaller array first:**
	* Pros: efficient, since it only iterates over the smaller array
	* Cons: requires manual sorting of arrays to ensure smaller array is iterated first
4. **Using `object assign` with includes instead of `in`:**
	* Pros: potentially faster than using `in` due to optimization in some browsers
	* Cons: may not be supported in older browsers or with certain data types

**Browser Performance:**

The benchmark results show that the order of operations and use of specific methods can impact performance. The top-performing test case is the one using `object assign` with a smaller array first, likely due to its efficiency and reduced overhead.

Overall, the benchmark highlights the importance of considering implementation details when optimizing performance-critical code.

Related benchmarks:

JavaScript filter vs reduce more cases ha (version: 1)

Created: 2 years ago by: Registered User

Jump to the latest result

Using array filter and reduce + spread

Using array filter and object assign

Using array filter and object assign SMALLER array first

Using array filter and object assign SMALLER array first, includes instead of in

Using array filter and reduce + spread + includes

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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