Benchmark: Lodash Pick vs Native destructuring vs Manual Picks

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" ]; arr.map(function (element) { const res = {}; for(let prop of props){ res[prop] = element[prop] } return res; });
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 }; });

Historical Performance Data aggregated from 83 community runs

Desktop Results:

Chrome 74 runs

Manual pick

323/s

Native

308/s

Manual pick with property names

60/s

Lodash

9/s

Fastest: Manual pick (37.2x faster)

View exact numbers

✓ Manual pick: 323 ops/sec
• Native: 308 ops/sec
• Manual pick with property names: 60 ops/sec
• Lodash: 9 ops/sec

Firefox 9 runs

Native

571/s

Manual pick

449/s

Manual pick with property names

36/s

Lodash

7/s

Fastest: Native (81.9x faster)

View exact numbers

✓ Native: 571 ops/sec
• Manual pick: 449 ops/sec
• Manual pick with property names: 36 ops/sec
• Lodash: 7 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:150.0) Gecko/20100101 Firefox/150.0

Browser/OS: Firefox 150 on Linux

View result in a separate tab

Native

120/s

Manual pick

112/s

Manual pick with property names

23/s

Lodash

4/s

View exact numbers

Test name	Executions per second
✓ Native	120 Ops/sec
Manual pick	112 Ops/sec
Manual pick with property names	23 Ops/sec
Lodash	4 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 benchmark and explain what is being tested.

**What is being tested?**

The benchmark is comparing three approaches for extracting specific properties from an object:

1. Using Lodash's `pick` function (`Lodash`)
2. Using native destructuring syntax (`Native`)
3. Manually iterating over a list of property names to extract the desired properties (`Manual pick`) and (`Manual pick with property names`)

**Options compared**

* Lodash's `pick` function: This is a utility function from the popular JavaScript library Lodash that allows you to specify which properties to include in an object.
* Native destructuring syntax: This is a feature introduced in ECMAScript 2018 (ES2018) that allows you to extract specific properties from an object using destructuring assignment.
* Manual iteration over property names: This approach involves manually iterating over a list of property names and assigning the corresponding values from the original object.

**Pros and Cons**

1. **Lodash's `pick` function**:
	* Pros: Convenient, easy to use, and efficient for large objects.
	* Cons: Requires importing the Lodash library, which may add overhead to the benchmark.
2. **Native destructuring syntax**:
	* Pros: Efficient, concise, and modern syntax.
	* Cons: Only supported in recent browsers, and may require additional setup.
3. **Manual iteration over property names**:
	* Pros: Simple, low-overhead, and works in all browsers.
	* Cons: Can be error-prone, especially for large objects.

**Library usage**

In the benchmark, Lodash is used as a library to provide the `pick` function. The script preparation code includes importing the Lodash library using a CDN link (`<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>`). This library is not included in the Chrome browser by default, so it's likely that this benchmark is running on a machine with access to the Internet.

**Special JS feature**

The benchmark uses native destructuring syntax (`Native`), which was introduced in ECMAScript 2018 (ES2018). While most modern browsers support ES2018 features, it's worth noting that older browsers may not.

Lodash Pick vs Native destructuring vs Manual Picks (version: 1)

Compare _.pick vs native destructuring vs manual picks

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

Created: 6 years ago by: Registered User

Go to the latest result

Lodash

Native

Manual pick with property names

Manual pick

Historical Performance Data aggregated from 83 community runs

Desktop Results:

Chrome 74 runs

Firefox 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Lodash Pick vs Native destructuring vs Manual Picks (version: 1)

Compare _.pick vs native destructuring vs manual picks

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

Created: 6 years ago by: Registered User

Go to the latest result

Lodash

Native

Manual pick with property names

Manual pick

Historical Performance Data aggregated from 83 community runs

Desktop Results:

Chrome 74 runs

Firefox 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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