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>

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

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

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

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

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

 
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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash	11.4 Ops/sec
Native	1086.1 Ops/sec
Manual pick with property names	82.1 Ops/sec
Manual pick	986.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

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:

Using Lodash's pick function (Lodash)
Using native destructuring syntax (Native)
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

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.
Native destructuring syntax:
- Pros: Efficient, concise, and modern syntax.
- Cons: Only supported in recent browsers, and may require additional setup.
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.

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: 5 years ago by: Registered User

Jump to the latest result