Benchmark: JavaScript filter vs reduce

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;

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

Fastest: N/A

Slowest: N/A

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/112.0.0.0 Safari/537.36

Browser/OS: Chrome 112 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using array filter and reduce + spread	1013944.8 Ops/sec
Using array filter and object assign	810108.6 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

MeasureThat.net is testing the performance of two approaches to filter and process an object: using `Array.prototype.filter()` and `Array.prototype.reduce()` with the spread operator (`...`), versus using `Array.prototype.includes()` and `Object.assign()`. The test uses a specific scenario where it filters an array of scopes (`"a", "d"`), and then uses the filtered scopes to create a new object with their corresponding values from another object (`"A", "B", "C", "D"`).

**Options compared:**

1. **Using `Array.prototype.filter()` and `Array.prototype.reduce()` with the spread operator**: This approach creates an intermediate array with the filtered scopes, and then uses `reduce()` to create a new object with the desired structure.
2. **Using `Array.prototype.includes()` and `Object.assign()`:** This approach iterates over the available scopes, checks if each scope is in the primary scopes array using `includes()`, and if so, adds it to the output object using `Object.assign()`.

**Pros and Cons:**

1. **Using `Array.prototype.filter()` and `Array.prototype.reduce()` with the spread operator**:
	* Pros:
		+ More concise and expressive code.
		+ Avoids explicit loops and conditional statements.
	* Cons:
		+ May incur additional overhead due to array creation and reduction.
		+ Might be less efficient for large datasets.
2. **Using `Array.prototype.includes()` and `Object.assign()`:**
	* Pros:
		+ More straightforward and easy-to-understand code.
		+ Can be more efficient for small to medium-sized datasets.
	* Cons:
		+ May require more lines of code, making it less concise.
		+ Involves explicit loops and conditional statements.

**Other considerations:**

* The use of the spread operator (`...`) in the first approach can affect the performance if the object being spread is large.
* The `includes()` method has a shorter average execution time than `filter()` on modern browsers, making it potentially more efficient for this specific test case.
* Both approaches assume that the input data is reasonably small and manageable. For larger datasets, other approaches like using `Map` or `Promise.all()` might be more suitable.

**Library and syntax used:**

No specific libraries are mentioned in the benchmark definition. However, the use of `Array.prototype.filter()`, `Array.prototype.reduce()`, `Object.entries()`, `Object.assign()`, and `includes()` implies that the test is running on a browser environment with modern JavaScript features enabled.

If you're interested in exploring alternative approaches or optimizing this specific test case, I'd be happy to help!

Related benchmarks:

JavaScript filter vs reduce (version: 0)

Comparing performance of: Using array filter and reduce + spread vs Using array filter and object assign

Created: 2 years ago by: Guest

Jump to the latest result

Using array filter and reduce + spread

Using array filter and object assign

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