Benchmark: Lodash Pick vs Native destructuring vs Manual Picks1

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 ({ type, subtype, card_last4, card_type, card_exp_month, card_exp_year, card_country, something } ) { 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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definitions and explain what each test case is measuring.

**Benchmark Overview**

The benchmark compares the performance of three approaches to extract specific properties from an object:

1. **Lodash**: Uses the `pick` function from the Lodash library to select specific properties from the object.
2. **Native**: Uses native JavaScript syntax ( destructuring and spread operator) to extract specific properties from the object.
3. **Manual pick with property names**: Manually extracts specific properties using their corresponding array of property names.
4. **Manual pick**: A simpler approach that extracts all properties without specifying any.

**Lodash (`_.pick`)**

The Lodash `pick` function is used to select a subset of properties from an object. It takes two arguments: the object and an array of property names to include. In this benchmark, `_.pick` is used with the entire `object` array, which contains 8 properties. The test measures how long it takes to apply `_pick` to each element in the array.

**Native Destructuring**

The native JavaScript syntax uses destructuring and spread operators (`{ ... }`) to extract specific properties from an object. In this benchmark, `{ type, subtype, card_last4, card_type, card_exp_month, card_exp_year, card_country, something }` is used as the destructured object, which corresponds to the same 8 properties in the `object` array.

**Manual Pick with Property Names**

This approach uses an array of property names (`props`) and iterates through it to extract each corresponding property from the `object`. The test measures how long it takes to apply this manual process for all elements in the array.

**Manual Pick**

This is a simpler approach that extracts all properties without specifying any. It simply returns the entire object, which contains 8 properties.

**Library: Lodash**

The Lodash library provides various utility functions, including `pick`, which is used in this benchmark. The library simplifies the process of extracting specific properties from objects and can be useful for developers who need to perform such operations frequently.

**Special JavaScript Feature/Syntax: Destructuring**

Destructuring syntax (`{ ... }`) is a modern JavaScript feature that allows you to extract specific properties from an object in a concise way. It's used in both the Native and Manual pick with Property Names test cases.

**Alternatives**

For performance-critical applications, developers might consider using alternative approaches or optimizations, such as:

1. Using `Object.fromEntries()` (available in modern browsers) for manual picking.
2. Implementing custom looping logic to reduce overhead.
3. Optimizing the data structure of the object being processed.
4. Leveraging parallel processing or other concurrency techniques.

Keep in mind that these alternatives might not be supported by all browsers or platforms, and their performance benefits may depend on specific use cases and requirements.

Related benchmarks:

Lodash Pick vs Native destructuring vs Manual Picks1 (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

Created: 2 years ago by: Guest

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

No previous run results

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