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) Benchmark.js

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: 7 years ago by: Guest

Go to the latest result

HTML Preparation code:

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

Tests:

destructuring with defaults, empty input
test(destructuringFn, {});
lodash get, empty input
test(lodashFn, {});
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);
destructuring dynamic key
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');
lodash dynamic key using array
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');

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 17 runs

destructuring with defaults, empty input

8.3M/s

destructuring dynamic key

4.0M/s

destructuring with defaults, find item

4.0M/s

lodash get, empty input

2.4M/s

lodash dynamic key using array

2.1M/s

lodash dynamic key using manually cached array

2.1M/s

lodash get, find item

1.7M/s

lodash dynamic key

1.4M/s

Fastest: destructuring with defaults, empty input (6.0x faster)

View exact numbers

✓ destructuring with defaults, empty input: 8,255,223 ops/sec
• destructuring dynamic key: 4,021,010 ops/sec
• destructuring with defaults, find item: 3,998,975 ops/sec
• lodash get, empty input: 2,406,269 ops/sec
• lodash dynamic key using array: 2,116,580 ops/sec
• lodash dynamic key using manually cached array: 2,115,232 ops/sec
• lodash get, find item: 1,679,482 ops/sec
• lodash dynamic key: 1,378,732 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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: one year 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

destructuring with defaults, empty input

158.8M/s

destructuring with defaults, find item

24.5M/s

destructuring dynamic key

24.5M/s

lodash dynamic key using manually cached array

14.9M/s

lodash dynamic key using array

14.7M/s

lodash get, empty input

13.7M/s

lodash get, find item

8.4M/s

lodash dynamic key

4.6M/s

View exact numbers

Test name	Executions per second
✓ destructuring with defaults, empty input	158,829,328 Ops/sec
destructuring with defaults, find item	24,543,030 Ops/sec
destructuring dynamic key	24,512,064 Ops/sec
lodash dynamic key using manually cached array	14,933,426 Ops/sec
lodash dynamic key using array	14,741,652 Ops/sec
lodash get, empty input	13,713,576 Ops/sec
lodash get, find item	8,402,243 Ops/sec
lodash dynamic key	4,614,469 Ops/sec

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

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**

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:

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**

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.

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

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: 7 years ago by: Guest

Go to the latest 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

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 17 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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`