Benchmark: Lodash Pick vs compiled pick fn vs loop pick fn

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' ); });
compiled pick function
const props = [ "type", "subtype", "card_last4", "card_type", "card_exp_month", "card_exp_year", "card_country", "something" ]; function pickBuilder(props) { const obj = props.map((prop) => `if (has.call(el, '${prop}')) res.${prop} = el.${prop}`).join(';'); return new Function('el', `const has = Object.prototype.hasOwnProperty; const res = {}; ${obj}; return res;`); } const pick = pickBuilder(props) arr.map((element) => pick(element));
loop
const has = Object.prototype.hasOwnProperty; const props = [ "type", "subtype", "card_last4", "card_type", "card_exp_month", "card_exp_year", "card_country", "something" ]; function pick(element, props) { const res = {}; for (const prop of props) { if (has.call(element, prop)) res[prop] = element[prop]; } return res; } arr.map((element) => pick(element, props));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash
compiled pick function
loop

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 its test cases.

**Benchmark Purpose:**
The benchmark is designed to compare three different approaches for extracting specific properties from an object in JavaScript:

1. Using the Lodash `pick` function
2. Creating a compiled pick function (a custom function that generates a dynamic property extraction code)
3. Implementing a loop-based approach for picking properties

**Lodash `pick` Function:**
The Lodash `pick` function is used to extract specific properties from an object. It takes an array of property names as input and returns an object with only the specified properties.

Pros:

* Easy to use: The `pick` function provides a simple and concise way to extract properties.
* Well-tested: Lodash is a popular library with extensive testing and validation.

Cons:

* Overhead: Using an external library like Lodash may introduce additional overhead due to loading and initialization time.
* Limited control: When using the `pick` function, you have limited control over the generated code.

**Compiled Pick Function:**
The compiled pick function is a custom implementation that generates a dynamic property extraction code. This approach allows for more control over the generated code but requires manual effort to set up.

Pros:

* Fine-grained control: By generating the code manually, you have complete control over the output.
* Potential performance improvement: If optimized correctly, this approach might be faster than using Lodash or a loop-based implementation.

Cons:

* Steeper learning curve: Creating a compiled pick function requires understanding JavaScript and template literals.
* Maintenance burden: Updating and maintaining the generated code can be more complex than using an established library like Lodash.

**Loop-Based Approach:**
The loop-based approach involves manually iterating through the properties of interest in the object and assigning their values to a new object.

Pros:

* Zero dependencies: This implementation has no external libraries or dependencies.
* Manual control: You have full control over the generated code, allowing for potential performance optimizations.

Cons:

* Error-prone: Manually writing loop-based code can be prone to errors due to incorrect logic or variable naming.
* Potential performance issues: Without proper optimization, this approach might suffer from slower execution times compared to Lodash or compiled pick function.

**Other Considerations:**

* The benchmark measures the number of executions per second (ExecutionsPerSecond) for each test case. A higher value indicates faster performance.
* The browser and device platform information provides context about the environment in which the benchmarks were run.
* The raw UA string contains additional metadata about the testing environment, such as the Chrome version.

**Alternatives:**
Some alternative approaches to consider include:

1. Using `Object.fromEntries()` or `Object.entries()` instead of a loop-based approach for picking properties.
2. Implementing a compiled pick function using a different templating engine, like Handlebars or Mustache.
3. Comparing the performance of Lodash's `pick` function with other object extraction libraries or built-in JavaScript methods.

I hope this explanation helps you understand the benchmark and its test cases!

Related benchmarks:

Lodash Pick vs compiled pick fn vs loop pick fn (version: 0)

Comparing performance of: Lodash vs compiled pick function vs loop

Created: 4 years ago by: Guest

Jump to the latest result

Lodash

compiled pick function

loop

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