Benchmark: JavaScript filter vs reduce more cases

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;

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

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	582422.5 Ops/sec
Using array filter and object assign	432107.6 Ops/sec
Using array filter and object assign SMALLER array first	523630.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is tested, the pros and cons of different approaches, and other considerations.

**Benchmark Test Cases**

The test cases compare three different ways to create an object from an array of scopes using two arrays: `PRIMARY_SCOPES` and `availableScopes`. The test aims to measure the performance difference between these approaches.

1. **Using array filter and reduce + spread**: This approach uses the `filter()` method to select only the scopes that exist in `availableScopes`, then applies the `reduce()` method to create an object from the filtered scopes.
2. **Using array filter and object assign**: The first variant of this approach is similar to the previous one, but with a slight difference: it uses the `forEach()` method instead of `reduce()`. The second variant uses `PRIMARY_SCOPES.filter()` and then iterates over the result using another `forEach()` call.
3. **Using array filter and object assign SMALLER array first**: This approach is similar to the previous one, but with a slight difference: it iterates over `PRIMARY_SCOPES` before filtering the scopes.

**Library Used**

None of the test cases explicitly use any external libraries.

**Special JavaScript Features or Syntax**

The benchmark uses some ES6+ syntax features:

* `const`: used for variable declarations
* `let` and `var`: not used in this benchmark, but it's worth mentioning that they are still valid options
* `template literals`: not used directly, but the spread operator (`...`) is used inside a template literal (although it can be used without one)
* `Object.entries()`, `Object.assign()`: these methods were introduced in ECMAScript 2015 (ES6)

**Pros and Cons of Different Approaches**

1. **Using array filter and reduce + spread**:
	* Pros: concise, efficient
	* Cons: might be less readable due to the use of `reduce()` with an initial value
2. **Using array filter and object assign**:
	* Pros: easy to understand, no need for `reduce()`
	* Cons: might be slower than using `reduce()` due to the overhead of the `forEach()` method
3. **Using array filter and object assign SMALLER array first**:
	* Pros: potentially faster since it iterates over `PRIMARY_SCOPES` before filtering
	* Cons: less readable compared to the other two approaches

**Other Considerations**

* The test cases do not consider edge cases, such as an empty `availableScopes` object or a scope that is not present in both arrays.
* It's worth noting that the benchmark uses Chrome 100 as the browser, which might affect the results due to differences in rendering and execution optimization.

**Alternatives**

If you were to rewrite this benchmark with different approaches, here are some alternatives:

1. Using a loop instead of `forEach()` or `reduce()`
2. Using a library like Lodash, which provides a more concise way to create objects from arrays
3. Using a different data structure, such as an object with string keys instead of an array of scopes

Related benchmarks:

JavaScript filter vs reduce more cases (version: 0)

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

Created: 2 years ago by: Guest

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

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):