Benchmark: es6 destructuring vs lodash _.get string and array keys with toPath and manual caching

es6 destructuring vs lodash _.get string and array keys with toPath and manual caching (version: 0)

compare performance of _.get to es6 desu

Comparing performance of: destructuring with defaults, empty input vs lodash get, empty input vs destructuring with defaults, find item vs lodash get, find item vs destructuring dynamic key vs lodash dynamic key vs lodash dynamic key using array vs lodash dynamic key using manually cached array

Created: 5 years ago by: Guest

Jump to the latest result

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>

AخA
 
<script src="https://cdn.jsdelivr.net/lodash/4/lodash.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 lodashFnDynamic(input, key) {
  const documents = _.get(input, `contextMenu.data.${key}`, []);
  return documents;
}

function lodashFnDynamicArray(input, key) {
  const documents = _.get(input, ['contextMenu', 'data', 'key'], []);
  return documents;
}

let paths = {};
function lodashFnDynamicCachedArray(input, key) {
  paths[key] = paths[key] || _.toPath(`contextMenu.data.${key}`);
  const documents = _.get(input, paths[key], []);
  return documents;
}

function test(fn, input, key) {
  fn(input, key);
}

​x
 
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 lodashFnDynamic(input, key) {  const documents = _.get(input, `contextMenu.data.${key}`, []);  return documents;}​function lodashFnDynamicArray(input, key) {  const documents = _.get(input, ['contextMenu', 'data', 'key'], []);  return documents;}​let paths = {};function lodashFnDynamicCachedArray(input, key) {  paths[key] = paths[key] || _.toPath(`contextMenu.data.${key}`);  const documents = _.get(input, paths[key], []);  return documents;}​function test(fn, input, key) {  fn(input, key);}

Tests:

destructuring with defaults, empty input
test(destructuringFn, {});
test(destructuringFn, {});
lodash get, empty input
test(lodashFn, {});
test(lodashFn, {});
destructuring with defaults, find item
const input = { contextMenu: { data: { documents: [{ id: 'doc' }] } } }; test(destructuringFn, input);
const input = { contextMenu: { data: { documents: [{ id: 'doc' }] } } };
test(destructuringFn, input);
lodash get, find item
const input = { contextMenu: { data: { documents: [{ id: 'doc' }] } } }; test(lodashFn, input);
const input = { contextMenu: { data: { documents: [{ id: 'doc' }] } } };
test(lodashFn, input);
destructuring dynamic key
const input = { contextMenu: { data: { documents: [{ id: 'doc' }] } } }; test(destructuringFn, input, 'documents');
const input = { contextMenu: { data: { documents: [{ id: 'doc' }] } } };
test(destructuringFn, input, 'documents');
lodash dynamic key
const input = { contextMenu: { data: { documents: [{ id: 'doc' }] } } }; test(lodashFnDynamic, input, 'documents');
const input = { contextMenu: { data: { documents: [{ id: 'doc' }] } } };
test(lodashFnDynamic, input, 'documents');
lodash dynamic key using array
const input = { contextMenu: { data: { documents: [{ id: 'doc' }] } } }; test(lodashFnDynamicArray, input, 'documents');
const input = { contextMenu: { data: { documents: [{ id: 'doc' }] } } };
test(lodashFnDynamicArray, input, 'documents');
lodash dynamic key using manually cached array
const input = { contextMenu: { data: { documents: [{ id: 'doc' }] } } }; test(lodashFnDynamicCachedArray, input, 'documents');
const input = { contextMenu: { data: { documents: [{ id: 'doc' }] } } };
test(lodashFnDynamicCachedArray, input, 'documents');

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
destructuring with defaults, empty input
lodash get, empty input
destructuring with defaults, find item
lodash get, find item
destructuring dynamic key
lodash dynamic key
lodash dynamic key using array
lodash dynamic key using manually cached array

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
destructuring with defaults, empty input	158829328.0 Ops/sec
lodash get, empty input	13713576.0 Ops/sec
destructuring with defaults, find item	24543030.0 Ops/sec
lodash get, find item	8402243.0 Ops/sec
destructuring dynamic key	24512064.0 Ops/sec
lodash dynamic key	4614469.0 Ops/sec
lodash dynamic key using array	14741652.0 Ops/sec
lodash dynamic key using manually cached array	14933426.0 Ops/sec

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

Let's dive into the world of JavaScript microbenchmarks and explore what's tested in this benchmark.

Benchmark Definition

The benchmark is designed to compare the performance of two approaches: ES6 destructuring and Lodash's _.get method, specifically when dealing with string and array keys. The tests cover various scenarios, including:

Destructuring with defaults (empty input)
Destructuring dynamic key
Lodash get with empty input
Lodash get dynamic key using array
Lodash get dynamic key using manually cached array

Options Compared

The benchmark compares the following options:

ES6 destructuring: A simple and concise way to access object properties using destructuring syntax.
Lodash _.get method: A popular utility function for accessing nested properties in objects.

Both approaches have their own pros and cons:

ES6 destructuring:
- Pros: Simple, efficient, and widely supported.
- Cons: Can be error-prone if not used carefully, especially with complex object structures.
Lodash _.get method:
- Pros: Robust and flexible, can handle nested properties and null/undefined values.
- Cons: Adds an additional dependency (Lodash library) and may introduce performance overhead.

Test Scenarios

The benchmark tests the following scenarios:

Destructuring with defaults (empty input): This test checks how quickly both approaches can access a default object property.
Destructuring dynamic key: This test evaluates the performance of both approaches when accessing an object property using a dynamic key.
Lodash get with empty input: This test compares the performance of both approaches when using _.get method on an empty object.
Lodash get dynamic key using array: This test assesses the performance of both approaches when using _.get method with a dynamic key and an array-like structure.
Lodash get dynamic key using manually cached array: This test evaluates the performance of both approaches when using _.get method with a dynamic key, an array-like structure, and manual caching.

Results

The benchmark results show the number of executions per second for each test scenario on Chrome 129 running on a desktop device. The top-performing approach varies depending on the specific test scenario.

Destructuring with defaults (empty input): ES6 destructuring is faster.
Destructuring dynamic key: Lodash _.get method is faster.
Lodash get with empty input: ES6 destructuring is faster.
Lodash get dynamic key using array: Lodash _.get method is faster.
Lodash get dynamic key using manually cached array: Lodash _.get method is faster.

Keep in mind that these results are specific to Chrome 129 on a desktop device and may not reflect other browsers, devices, or performance characteristics.

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks and explore what's tested in this benchmark.

**Benchmark Definition**

1. Destructuring with defaults (empty input)
2. Destructuring dynamic key
3. Lodash get with empty input
4. Lodash get dynamic key using array
5. Lodash get dynamic key using manually cached array

**Options Compared**

The benchmark compares the following options:

* **ES6 destructuring**: A simple and concise way to access object properties using destructuring syntax.
* **Lodash _.get method**: A popular utility function for accessing nested properties in objects.

Both approaches have their own pros and cons:

* **ES6 destructuring**:
	+ Pros: Simple, efficient, and widely supported.
	+ Cons: Can be error-prone if not used carefully, especially with complex object structures.
* **Lodash _.get method**:
	+ Pros: Robust and flexible, can handle nested properties and null/undefined values.
	+ Cons: Adds an additional dependency (Lodash library) and may introduce performance overhead.

**Test Scenarios**

The benchmark tests the following scenarios:

1. Destructuring with defaults (empty input): This test checks how quickly both approaches can access a default object property.
2. Destructuring dynamic key: This test evaluates the performance of both approaches when accessing an object property using a dynamic key.
3. Lodash get with empty input: This test compares the performance of both approaches when using _.get method on an empty object.
4. Lodash get dynamic key using array: This test assesses the performance of both approaches when using _.get method with a dynamic key and an array-like structure.
5. Lodash get dynamic key using manually cached array: This test evaluates the performance of both approaches when using _.get method with a dynamic key, an array-like structure, and manual caching.

**Results**

* Destructuring with defaults (empty input): ES6 destructuring is faster.
* Destructuring dynamic key: Lodash _.get method is faster.
* Lodash get with empty input: ES6 destructuring is faster.
* Lodash get dynamic key using array: Lodash _.get method is faster.
* Lodash get dynamic key using manually cached array: Lodash _.get method is faster.

Keep in mind that these results are specific to Chrome 129 on a desktop device and may not reflect other browsers, devices, or performance characteristics.

Related benchmarks: