Benchmark: Lodash Pick vs Native destructuring vs Manual Picks vs pick fn

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/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
arr.map(function (element) { return _.pick( element, 'type', 'subtype', 'card_last4', 'card_type', 'card_exp_month', 'card_exp_year', 'card_country', 'something' ); });
Native
arr.map(function (element) { const { type, subtype, card_last4, card_type, card_exp_month, card_exp_year, card_country, something } = element; return { type, subtype, card_last4, card_type, card_exp_month, card_exp_year, card_country, something }; });
Manual pick with property names
const props = [ "type", "subtype", "card_last4", "card_type", "card_exp_month", "card_exp_year", "card_country", "something" ]; function pick(element, props) { const res = {}; for(let prop of props){ res[prop] = element[prop] } return res; } arr.map((element) => pick(element, props));
Manual pick
arr.map(function (element) { return { type: element.type, subtype: element.subtype, card_last4: element.card_last4, card_type: element.card_type, card_exp_month: element.card_exp_month, card_exp_year: element.card_exp_year, card_country: element.card_country, something: element.something }; });
compiled pick function
const props = [ "type", "subtype", "card_last4", "card_type", "card_exp_month", "card_exp_year", "card_country", "something" ]; function pickBuilder(props) { const obj = props.map((prop) => `if (has.call(el, '${prop}')) res.${prop} = el.${prop}`).join(';'); return new Function('el', `const has = Object.prototype.hasOwnProperty; const res = {}; ${obj}; return res;`); } const pick = pickBuilder(props) arr.map((element) => pick(element));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash
Native
Manual pick with property names
Manual pick
compiled pick function

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Measuring the performance of different approaches to pick specific properties from an object in JavaScript.

**Overview**

The benchmark compares four approaches:

1. **Lodash's `pick` function**: A popular utility function that allows you to select specific properties from an object.
2. **Native destructuring**: Using the syntax `{ variable: property } = object` to destructure objects.
3. **Manual picks with property names**: Hardcoding the property names and manually accessing them.
4. **Compiled pick function**: Creating a custom function using `Function` constructor that generates the property access code.

**Options comparison**

| Approach | Description |
| --- | --- |
| Lodash's `pick` function | Uses regex to match properties, which can be slower due to overhead. Pros: convenient, easy to use. Cons: may not perform well for large objects or complex selections. |
| Native destructuring | Directly accesses properties using the syntax `{ variable: property } = object`. Pros: efficient, concise. Cons: limited to a specific syntax and only works with objects that have a defined shape. |
| Manual picks with property names | Hardcoded property names are used to manually access them. Pros: flexible, can be optimized for performance. Cons: verbose, error-prone. |
| Compiled pick function | Generates a custom function using `Function` constructor that performs the property access. Pros: highly customizable, can be optimized for performance. Cons: complex, may have overhead due to function creation. |

**Pros and cons**

* **Lodash's `pick` function**: Convenient, but may not perform well for large objects or complex selections.
* **Native destructuring**: Efficient and concise, but limited to a specific syntax and only works with objects that have a defined shape.
* **Manual picks with property names**: Flexible and can be optimized for performance, but verbose and error-prone.
* **Compiled pick function**: Highly customizable and can be optimized for performance, but complex and may have overhead due to function creation.

**Library: Lodash**

Lodash is a popular JavaScript utility library that provides a wide range of functions, including `pick`. The `pick` function allows you to select specific properties from an object using a regex pattern.

**Benchmark results**

The latest benchmark result shows the following performance values for each approach:

| Approach | ExecutionsPerSecond |
| --- | --- |
| Manual pick | 411.71 |
| Native destructuring | 157.62 |
| Compiled pick function | 76.53 |
| Lodash's `pick` function | 46.68 |

The results suggest that native destructuring is the fastest approach, followed by the compiled pick function. The manual picks with property names and Lodash's `pick` function are slower due to various reasons such as overhead or regex pattern complexity.

Keep in mind that these results may vary depending on the specific use case, object structure, and other factors.

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36

Browser/OS: Chrome 115 on Linux

View result in a separate tab

Test name	Executions per second
Lodash	6.8 Ops/sec
Native	157.6 Ops/sec
Manual pick with property names	46.7 Ops/sec
Manual pick	411.7 Ops/sec
compiled pick function	76.5 Ops/sec

Related benchmarks:

Lodash Pick vs Native destructuring vs Manual Picks vs pick fn (version: 0)

Compare _.pick vs native destructuring vs manual picks

Comparing performance of: Lodash vs Native vs Manual pick with property names vs Manual pick vs compiled pick function

Created: 3 years ago by: Guest

Jump to the latest result

Lodash

Native

Manual pick with property names

Manual pick

compiled pick function

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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