Benchmark: es6 destructuring vs lodash _.get vs dlv

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dlv@1.1.3/dist/dlv.umd.min.js"></script>

Script Preparation code:


function destructuringFn(input) {
  const { contextMenu: { data: { documents = [] } = {} } = {} } = input;
  return documents;
}

function destructuringFnDynamic(input, key) {
  const { contextMenu: { data: { [key]: documents = [] } = {} } = {} } = input;
  return documents;
}

function lodashFn(input) {
  const documents = _.get(input, 'contextMenu.data.documents', []);
  return documents;
}

function delveFn(input) {
  const documents = dlv(input, 'contextMenu.data.documents', []);
  return documents;
}

function lodashFnDynamic(input, key) {
  const documents = _.get(input, `contextMenu.data.${key}`, []);
  return documents;
}

function delveFnDynamic(input, key) {
  const documents = dlv(input, `contextMenu.data.${key}`, []);
  return documents;
}

function test(fn, input, key) {
  fn(input, key);
}

Tests:

destructuring with defaults, find item
const input = { contextMenu: { data: { documents: [{ id: 'doc' }] } } }; test(destructuringFn, input);
lodash get, find item
const input = { contextMenu: { data: { documents: [{ id: 'doc' }] } } }; test(lodashFn, input);
dlv get, find item
const input = { contextMenu: { data: { documents: [{ id: 'doc' }] } } }; test(delveFn, input);
destructuring dynamic key
const input = { contextMenu: { data: { documents: [{ id: 'doc' }] } } }; test(destructuringFnDynamic, input, 'documents');
lodash dynamic key
const input = { contextMenu: { data: { documents: [{ id: 'doc' }] } } }; test(lodashFnDynamic, input, 'documents');
dlv dynamic key
const input = { contextMenu: { data: { documents: [{ id: 'doc' }] } } }; test(delveFnDynamic, input, 'documents');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
destructuring with defaults, find item
lodash get, find item
dlv get, find item
destructuring dynamic key
lodash dynamic key
dlv dynamic key

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

I'd be happy to help you understand what's being tested on MeasureThat.net.

**Benchmark Purpose**

The benchmark compares the performance of three approaches for accessing nested data in JavaScript objects:

1. **Destructuring**: Using the syntax `{ objectProperty: { nestedObjectProperty: value } }` to access nested properties.
2. **Lodash _.get()**: A utility function from the Lodash library that allows accessing nested properties using a dot notation (e.g., `obj.prop1.prop2.value`).
3. **Dlv**: A library for fast and efficient data lookups, which is used as an alternative to Lodash.

**Options Compared**

The benchmark tests two variants of each approach:

* **Static key**: Using a static key to access the nested property (e.g., `documents`).
* **Dynamic key**: Using a dynamic key to access the nested property (e.g., using a variable like `key`).

**Pros and Cons of Each Approach**

1. **Destructuring**:
	* Pros: concise, easy to read, and intuitive syntax.
	* Cons: may not work as expected if the object structure changes or is dynamic.
2. **Lodash _.get()**:
	* Pros: flexible, supports multiple levels of nesting, and can handle dynamic keys.
	* Cons: adds dependency on Lodash library, may be slower than other approaches due to function call overhead.
3. **Dlv**:
	* Pros: optimized for performance, can handle large datasets, and is designed specifically for data lookups.
	* Cons: may require more code to implement, and its syntax can be less intuitive.

**Library Used**

In this benchmark, Lodash is used as a utility library for the _.get() function. Dlv is another library that provides optimized data lookup capabilities.

**Special JS Feature/Syntax**

There are no special JavaScript features or syntax mentioned in the provided code examples. However, it's worth noting that some modern JavaScript features like `const` and arrow functions (used in some of the benchmark tests) may not be supported in older browsers.

**Other Alternatives**

If you're looking for alternative approaches to data lookup, you might consider:

1. **Object.keys()**: A built-in method for iterating over an object's keys.
2. **Array.prototype.indexOf()**: A built-in method for finding the index of a value within an array.
3. **Binary search algorithms**: For very large datasets.

Keep in mind that these alternatives may not provide the same level of performance or flexibility as Lodash or Dlv, but can be useful in specific situations.

Latest run results:

Run details: (Test run date: 4 months ago)

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

Browser/OS: Chrome 126 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
destructuring with defaults, find item	5632463.5 Ops/sec
lodash get, find item	2094050.9 Ops/sec
dlv get, find item	2568150.8 Ops/sec
destructuring dynamic key	5214174.0 Ops/sec
lodash dynamic key	1566352.8 Ops/sec
dlv dynamic key	1509967.2 Ops/sec

Related benchmarks:

es6 destructuring vs lodash _.get vs dlv (version: 0)

compare performance of _.get to es6 desu

Comparing performance of: destructuring with defaults, find item vs lodash get, find item vs dlv get, find item vs destructuring dynamic key vs lodash dynamic key vs dlv dynamic key

Created: 5 years ago by: Guest

Jump to the latest result

destructuring with defaults, find item

lodash get, find item

dlv get, find item

destructuring dynamic key

lodash dynamic key

dlv dynamic key

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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