Benchmark: Object filtering by key v2

Script Preparation code:

var data = { ...Array.from(Array(10000).keys()) };

const filterWithObject = (val) => {
  const result = {}
  for (const key in val) {
    if (Number(key) % 2 === 0) {
      continue;
    }
    result[key] = val[key];
  } 

  return result;
};

const filterWithMap = (val) => {
  const result = new Map();
  for (const key in val) {
    if (Number(key) % 2 === 0) {
      continue;
    }
    result.set(key, val[key]);
  } 

  return Object.fromEntries(result.entries());
};

Tests:

Reduce (object)
Object.keys(data) .filter(key => Number(key) % 2 === 0) .reduce((acc, key) => { acc[key] = data[key]; return acc; }, {});
Reduce (Map)
Object.keys(data) .filter(key => Number(key) % 2 === 0) .reduce((acc, key) => { acc.set(key, data[key]); return acc; }, new Map());
for-of (object)
filterWithObject(data)
for-of (Map)
filterWithMap(data)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Reduce (object)
Reduce (Map)
for-of (object)
for-of (Map)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

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

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
Reduce (object)	4154.3 Ops/sec
Reduce (Map)	2769.7 Ops/sec
for-of (object)	4238.5 Ops/sec
for-of (Map)	1310.7 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The benchmark titled **"Object filtering by key v2"** compares different methods of filtering objects in JavaScript. Each test case evaluates a different approach to remove keys based on whether they are even or odd (with the goal of filtering out odd keys).

### Options Compared
1. **Reduce with Object**
   ```javascript
   Object.keys(data)
       .filter(key => Number(key) % 2 === 0)
       .reduce((acc, key) => {
           acc[key] = data[key];
           return acc;
       }, {});
   ```
   - **Test Name**: **Reduce (object)**

2. **Reduce with Map**
   ```javascript
   Object.keys(data)
       .filter(key => Number(key) % 2 === 0)
       .reduce((acc, key) => {
           acc.set(key, data[key]);
           return acc;
       }, new Map());
   ```
   - **Test Name**: **Reduce (Map)**

3. **For-of Loop with Object**
   ```javascript
   filterWithObject(data);
   ```
   - This function uses a for-in loop to iterate over the properties of the object. It collects odd keys in the result based on the modulus condition.
   - **Test Name**: **for-of (object)**

4. **For-of Loop with Map**
   ```javascript
   filterWithMap(data);
   ```
   - This function uses a for-in loop with a Map to collect odd keys similarly.
   - **Test Name**: **for-of (Map)**

### Pros and Cons

#### Reduce with Object
- **Pros**:
  - Intuitive chaining with functional programming style.
  - Safe for use with standard objects.

- **Cons**:
  - Potentially less performant due to multiple traversals (filtering followed by reducing).
  - Overhead in creating interim arrays during filtering.

#### Reduce with Map
- **Pros**:
  - Use of Map can be more efficient when the data set is large due to optimized key-value access.
  - Maintains insertion order, which can be an advantage in some scenarios.

- **Cons**:
  - Greater overhead in conversion to and from Map compared with a plain object (`Object.fromEntries`).

#### For-of Loop with Object
- **Pros**:
  - A classic iterative approach; simple and clean to understand.
  - Straightforward assignment to results without using additional methods (like in reduce).

- **Cons**:
  - Longer syntax compared to function-chaining methods.
  - Not leveraging functional programming paradigms, which some may prefer.

#### For-of Loop with Map
- **Pros**:
  - Retains order during iteration, which can be beneficial depending on the use-case.
  - Similar benefit as the for-of with object, as it’s simple and direct.

- **Cons**:
  - Must convert back to an object afterward, incurring some performance overhead.
  - Slightly more complex due to the usage of Map API and additional conversion code.

### Considerations
- The choice between using objects and Maps may depend on the specific use case and performance requirements. Maps can be more performant for key-value pairs manipulation, especially with non-string keys.
- Functional styles (using methods like `reduce`) are generally more readable to developers familiar with those patterns but may incur performance penalties with large datasets due to multiple iterations.
- When measuring performance, the execution speed is impacted by browser optimization and engine (like V8 in Chrome), so results may vary between environments.

### Alternatives
1. **For Loop**: Using a traditional `for` loop for maximum control.
2. **Array.reduce only**: Might skip the filter; instead, directly reduce with conditions.
3. **Third-party libraries**: Libraries like Lodash provide optimized utilities for object filtering and manipulation, which might yield better performance in certain cases but add an external dependency.

In summary, this benchmark aims to illustrate various methods to filter objects in JavaScript, highlighting differences in syntax, performance characteristics, and use cases.

Related benchmarks:

Object filtering by key v2 (version: 1)

Compares different way to filter object

Comparing performance of: Reduce (object) vs Reduce (Map) vs for-of (object) vs for-of (Map)

Created: one month ago by: Guest

Jump to the latest result

Reduce (object)

Reduce (Map)

for-of (object)

for-of (Map)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):