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 }; });

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: 2 months ago)

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

Browser/OS: Chrome 144 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash	9.4 Ops/sec
Native	480.2 Ops/sec
Manual pick with property names	73.9 Ops/sec
Manual pick	799.5 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.

Related benchmarks:

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

Jump to the latest result

Lodash

Native

Manual pick with property names

Manual pick

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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