Benchmark: Lodash Pick vs Native destructuring vs Manual Picks vs Delete Props

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 }; });
Delete props
const props = [ "type", "subtype", "card_last4", "card_type", "card_exp_month", "card_exp_year", "card_country", "something" ]; const propsSet = new Set(["foo"]); arr.map(function (element) { for(let prop of propsSet){ if (propsSet.has(prop)) { delete element[prop]; } } return 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
Delete props

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 benchmark and explain what is being tested.

**Benchmark Purpose:**
The benchmark is designed to compare the performance of three approaches for extracting specific properties from an object:

1. Lodash's `pick` function
2. Native destructuring syntax (using the spread operator `{...}`)
3. Manual property extraction using a loop

**Options Compared:**

* **Lodash Pick:** Uses the `_.pick()` function to extract specific properties from an object.
	+ Pros:
		- Concise and readable code
		- Handles nested objects out of the box
	+ Cons:
		- Requires the Lodash library, which can add extra overhead
		- May not be as performant as native destructuring or manual loops for large datasets
* **Native Destructuring:** Uses the spread operator `{...}` to destructure an object and extract specific properties.
	+ Pros:
		- Fast and lightweight implementation
		- Easy to read and understand code
	+ Cons:
		- Only works with modern JavaScript versions that support destructuring
		- May not be as flexible as Lodash's `pick` function for handling nested objects or dynamic property names
* **Manual Pick:** Uses a loop to manually iterate over an array of property names and extract the corresponding values from an object.
	+ Pros:
		- Lightweight implementation with no additional library dependencies
		- Can handle large datasets without significant performance degradation
	+ Cons:
		- Code can be less readable and maintainable than Lodash's `pick` function or native destructuring

**Library:**
Lodash is a popular JavaScript utility library that provides a wide range of functions for tasks such as string manipulation, array processing, and object manipulation.

**Special JS Feature/Syntax:**
The benchmark uses modern JavaScript features such as:

* Destructuring syntax (`const { ... } = element;`)
* Spread operator (`{...}`)

These features are only supported in modern browsers that have updated their JavaScript engines to support these new syntaxes. If you need to support older browsers, you may need to use polyfills or fallbacks.

**Other Alternatives:**
If you don't want to use Lodash's `pick` function, here are some alternative approaches:

* Using the `Object.keys()` and `reduce()` methods to iterate over an array of property names and extract values
* Using a library like `lodash-es` which provides a subset of Lodash's functions without the extra dependencies
* Implementing your own custom solution using only built-in JavaScript functions

Keep in mind that each approach has its pros and cons, and the best choice will depend on your specific use case, performance requirements, and personal preference.

Related benchmarks:

Lodash Pick vs Native destructuring vs Manual Picks vs Delete Props (version: 2)

Compare _.pick vs native destructuring vs manual picks

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

Created: 3 years ago by: Registered User

Jump to the latest result

Lodash

Native

Manual pick with property names

Manual pick

Delete props

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):