Benchmark: lodash pick vs native using reduce

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

Script Preparation code:

var arr = [];
var object = { 
	type: 'aaa',
    subtype: 'bbb',
    card_last4:'bbb',
    card_type:'bbb',
    card_exp_month:'bbb',
    card_exp_year:'bbb',
    card_country:'bbb',
    foo: 'bar'
};
for (var i = 0; i <= 100000; i++) { arr.push(object); }

Tests:

lodash pick
arr.map(el => _.pick(el, ['type', 'subtype', 'card_last4', 'card_type', 'card_exp_month', 'card_exp_year', 'card_country']));
native based on reduce
function pick(object, keys) { return keys.reduce((obj, key) => { if (object && object.hasOwnProperty(key)) { obj[key] = object[key]; } return obj; }, {}); } arr.map(el => pick(el, ['type', 'subtype', 'card_last4', 'card_type', 'card_exp_month', 'card_exp_year', 'card_country']));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lodash pick
native based on reduce

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 19 days ago)

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
lodash pick	10.6 Ops/sec
native based on reduce	60.9 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 21 days ago):

LLMs can make mistakes. Check important info.

The benchmark provided compares two different approaches for selecting specific properties from an array of objects in JavaScript: using the Lodash library's `_.pick` method versus a native implementation based on the `reduce` method.

### Options Compared

1. **Lodash `_.pick` Method**:
   - **Benchmark Definition**: 
     ```javascript
     arr.map(el => _.pick(el, ['type', 'subtype', 'card_last4', 'card_type', 'card_exp_month', 'card_exp_year', 'card_country']));
     ```
   - **Test Name**: "lodash pick"
   - **Description**: This method utilizes the Lodash library to extract specified properties from each object in the array. Lodash is a powerful utility library that simplifies JavaScript coding with functions for common programming tasks.

2. **Native Implementation using `reduce`**:
   - **Benchmark Definition**:
     ```javascript
     function pick(object, keys) {
       return keys.reduce((obj, key) => {
         if (object && object.hasOwnProperty(key)) {
           obj[key] = object[key];
         }
         return obj;
       }, {});
     }

arr.map(el => pick(el, ['type', 'subtype', 'card_last4', 'card_type', 'card_exp_month', 'card_exp_year', 'card_country']));
     ```
   - **Test Name**: "native based on reduce"
   - **Description**: This custom implementation defines a `pick` function, which retrieves the specified keys from an object using the `reduce` method. This approach builds a new object by accumulating the desired key-value pairs.

### Pros and Cons of Each Approach

#### Lodash `_.pick`
- **Pros**:
  - Optimized for performance by a well-maintained library.
  - More concise code, reducing boilerplate and potential errors.
  - Abstractions that can handle edge cases better.
  - Readable and understandable for those familiar with Lodash.

- **Cons**:
  - Adds additional dependency, which can increase the size of the application.
  - May have overhead compared to a focused native implementation, especially if it’s not fully optimized in this scenario.
  
#### Native Based on `reduce`
- **Pros**:
  - No external dependencies; reduces the size of the application.
  - Allows full control of the implementation, which can be tailored for specific use cases.
  - Can be modified easily to incorporate additional or fewer properties to extract.

- **Cons**:
  - More verbose and can be harder to read and understand for someone unfamiliar with JavaScript functional programming patterns.
  - Potential for bugs if not implemented correctly, especially with regards to edge cases.
  - Performance may vary depending on the quality of implementation compared to effectively tuned library functions.

### Benchmark Results

From the benchmark results provided:
- Executions per second for **native based on reduce**: **80.97**
- Executions per second for **lodash pick**: **13.65**

The results show that the native implementation using `reduce` is significantly faster than the Lodash `_.pick`. This discrepancy may arise from the overhead associated with using a library function compared to executing a custom, streamlined operation.

### Other Alternatives

1. **Native `forEach` with Object Literal**: Instead of using `map`, one could iterate with `forEach` and construct new objects manually, though that typically leads to more boilerplate code.
   
2. **Using ES6 Destructuring**: For smaller arrays or known schemas, one might be able to use destructuring directly within the map, but this approach lacks the flexibility and scalability of both Lodash and custom implementations.

3. **Array.prototype.filter()**: In use cases where specific conditions need to be met while picking properties, combining `filter()` and `map()` allows more complex logic but may degrade readability and performance.

In summary, the benchmark efficiently analyzes the trade-offs between abstraction and performance when selecting object properties in JavaScript. Depending on real-world scenarios, the choice between using a library or a native method needs to consider performance requirements, code readability, and maintainability.

Related benchmarks:

lodash pick vs native using reduce (version: 1)

Comparing performance of: lodash pick vs native based on reduce

Created: 21 days ago by: Guest

Jump to the latest result

lodash pick

native based on reduce

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 21 days ago):