Benchmark: for in vs reduce vs pick vs filter

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js'></script>

Tests:

for in
const TEXT_PROPS_TO_BLOCK = [ 'display', 'textColor', 'verticalAlign', 'className', 'style', ]; const propsToTest = { "aria-label": "ordered list", "data-test": "something", "textColor": "foo", "className": "bar" } let allowedProps = {}; for (let p in propsToTest) { if (!TEXT_PROPS_TO_BLOCK.includes(p)) { allowedProps = {[p]: propsToTest[p], ...allowedProps}; } }
reduce
const TEXT_PROPS_TO_BLOCK = [ 'display', 'textColor', 'verticalAlign', 'className', 'style', ]; const propsToTest = { "aria-label": "ordered list", "data-test": "something", "textColor": "foo", "className": "bar" } const newList = Object.keys(propsToTest).reduce((newObj, key) => { if (!TEXT_PROPS_TO_BLOCK.includes(key)) { newObj[key] = propsToTest[key]; } return newObj; }, {});
pick
const TEXT_PROPS_TO_BLOCK = [ 'display', 'textColor', 'verticalAlign', 'className', 'style', ]; const propsToTest = { "aria-label": "ordered list", "data-test": "something", "textColor": "foo", "className": "bar" } _.pick( propsToTest, Object.keys(propsToTest).filter(prop => !TEXT_PROPS_TO_BLOCK.includes(prop)) );
filter and fromPairs
const TEXT_PROPS_TO_BLOCK = [ 'display', 'textColor', 'verticalAlign', 'className', 'style', ]; const propsToTest = { "aria-label": "ordered list", "data-test": "something", "textColor": "foo", "className": "bar" } _.fromPairs(Object.entries(propsToTest).filter(([prop, value]) => !TEXT_PROPS_TO_BLOCK.includes(prop)))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for in
reduce
pick
filter and fromPairs

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

Browser/OS: Chrome 120 on Windows

View result in a separate tab

reduce

8.8M/s

for in

5.9M/s

filter and fromPairs

5.2M/s

pick

2.1M/s

View exact numbers

Test name	Executions per second
✓ reduce	8,764,509 Ops/sec
for in	5,905,041 Ops/sec
filter and fromPairs	5,195,924 Ops/sec
pick	2,069,359 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Overview**

The benchmark compares four different approaches to filter an object:

1. `for in`
2. `reduce`
3. `pick` (using Lodash)
4. `filter` + `fromPairs` (using Lodash)

**Options Compared**

Each option is compared in terms of execution speed, measured in executions per second.

**Pros and Cons of Each Approach:**

1. **`for in`**: This approach iterates over the object's properties using a traditional `for` loop. It can be slow because it has to check each property individually.
	* Pros: Simple, easy to understand
	* Cons: Slow, not optimized for performance
2. **`reduce`**: This approach uses the `Array.prototype.reduce()` method to filter the object's properties. It's a concise and efficient way to perform filtering.
	* Pros: Concise, efficient
	* Cons: Requires understanding of the `reduce()` method
3. **`pick` (using Lodash)**: This approach uses the `_.pick()` function from Lodash to filter the object's properties. It's a convenient and fast way to perform filtering.
	* Pros: Convenient, fast
	* Cons: Requires including Lodash in the benchmark, may not be familiar to all users
4. **`filter` + `fromPairs` (using Lodash)**: This approach uses the `_.filter()` function from Lodash to filter the object's properties, followed by `_.fromPairs()` to convert the resulting array back into an object.
	* Pros: Fast, flexible
	* Cons: Requires including Lodash in the benchmark, may not be familiar to all users

**Other Considerations**

* **Browser and Device**: The benchmark is run on a Chrome 120 browser on a Windows desktop. The results may not be representative of other browsers or devices.
* **Object Size**: The object being filtered has approximately 10 properties. Increasing the size of the object could impact the performance of each approach.

**Alternative Approaches**

Other approaches to filtering an object might include:

1. Using `Object.keys()` and a traditional `for` loop
2. Using `Array.prototype.filter()` on the object's properties
3. Using a library like Moment.js or date-fns for specific filtering needs

In conclusion, the benchmark compares four different approaches to filtering an object, each with its pros and cons. The choice of approach depends on personal preference, familiarity with the language or library being used, and performance requirements.

for in vs reduce vs pick vs filter (version: 0)

Comparing performance of: `for in vs reduce vs pick vs filter and fromPairs`

Created: 5 years ago by: Guest

Go to the latest result

for in

reduce

pick

filter and fromPairs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

for in vs reduce vs pick vs filter (version: 0)

Comparing performance of: for in vs reduce vs pick vs filter and fromPairs

Created: 5 years ago by: Guest

Go to the latest result

for in

reduce

pick

filter and fromPairs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `for in vs reduce vs pick vs filter and fromPairs`