Benchmark: for in vs reduce vs pick vs objectsdf

HTML Preparation code:

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

Tests:

hasownprop
const TEXT_PROPS_TO_BLOCK = { 'display':true, 'textColor':true, 'verticalAlign':true, 'className':true, 'style':true }; 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.hasOwnProperty(key)) { newObj[key] = propsToTest[key]; } return newObj; }, {});
reduce includes
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; }, {});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
hasownprop
reduce includes

Fastest: N/A

Slowest: N/A

Autogenerated LLM Sumamry (model llama3.2:3b, generated 4 days ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and considered.

**Benchmark Overview**

The provided benchmark compares four different approaches to filter properties from an object:

1. `for` loop
2. `reduce()`
3. `includes()` with array filtering (using `Object.keys()` and `reduce()`)
4. Object iteration using a `for...in` loop

These methods are used to extract specific properties from an object, specifically the ones that exist in a predefined array (`TEXT_PROPS_TO_BLOCK`). The benchmark aims to determine which approach is faster and more efficient.

**Library**

The benchmark uses Lodash.js library, which provides functional programming utilities. In this case, `reduce()` is used as a utility function to filter properties from an object.

**Special JS Features/Syntax**

None mentioned in the provided code snippets.

**Benchmark Preparation Code**

The preparation code includes a script tag that loads the Lodash.min.js file from a CDN, making it available for use in the benchmark.

**Individual Test Cases**

Each test case involves creating an object `propsToTest` with some properties and then using one of the four approaches to filter out properties that do not exist in the predefined array (`TEXT_PROPS_TO_BLOCK`). The resulting filtered objects are stored in variables like `newObj` or `newList`.

**Comparison Options**

The benchmark compares the execution time of each approach:

1. **For Loop**: Iterates over the object's properties using a `for...in` loop.
2. **Reduce()**: Uses the `reduce()` function to filter properties from an object.
3. **Includes() with Array Filtering**: Uses `Object.keys()` to get an array of property names, then uses `includes()` to filter out properties that do not exist in the predefined array.

**Pros and Cons**

Here's a brief summary:

1. **For Loop**:
	* Pros: Simple and straightforward.
	* Cons: Can be slow for large objects due to property iteration.
2. **Reduce()**:
	* Pros: Fast and efficient for filtering large objects.
	* Cons: May require additional setup (e.g., understanding the callback function).
3. **Includes() with Array Filtering**:
	* Pros: Similar to `reduce()`, but uses a more straightforward approach.
	* Cons: Requires creating an array of property names, which can be slower for large objects.

**Other Alternatives**

If you need alternative approaches, consider:

1. Using `Object.fromEntries()` and filtering the resulting object with `Object.fromEntries()` or `filter()`.
2. Utilizing a library like Ramda.js, which provides functional programming utilities similar to Lodash.
3. Implementing your own custom filter function using arrow functions.

Keep in mind that the performance differences between these approaches may vary depending on the specific use case and object size.

When running this benchmark, consider the following factors:

* Object size: Larger objects may favor `reduce()` or `includes()` with array filtering over traditional `for` loops.
* Performance requirements: If you need to filter large objects frequently, optimize for speed using approaches like `reduce()` or `includes()`.
* Readability and maintainability: Choose an approach that balances performance with code readability.

Latest run results:

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

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

Browser/OS: Chrome 79 on Mac OS X 10.15.0

View result in a separate tab

Test name	Executions per second
hasownprop	4192739.0 Ops/sec
reduce includes	4269915.0 Ops/sec

Related benchmarks:

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

Comparing performance of: hasownprop vs reduce includes

Created: 4 years ago by: Guest

Jump to the latest result

hasownprop

reduce includes

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Sumamry (model llama3.2:3b, generated 4 days ago):