Benchmark: es6 destructuring vs lodash _.get string and array keys

es6 destructuring vs lodash _.get string and array keys (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

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>

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

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 Safari/537.36

Browser/OS: Chrome 78 on Windows

View result in a separate tab

Test name	Executions per second
destructuring with defaults, empty input	6074671.0 Ops/sec
lodash get, empty input	1839597.0 Ops/sec
destructuring with defaults, find item	1672529.9 Ops/sec
lodash get, find item	983559.8 Ops/sec
destructuring dynamic key	1690493.6 Ops/sec
lodash dynamic key	769004.6 Ops/sec
lodash dynamic key using array	1224656.9 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll provide an explanation of the benchmark, options compared, pros and cons, and other considerations.

**Benchmark Overview**

MeasureThat.net is testing the performance of three approaches for accessing nested object properties in JavaScript:

1.  **Destructuring**: A syntax introduced in ECMAScript 2015 (ES6) that allows you to extract values from an object by assigning them to variables with the same name as the property.
2.  **Lodash _.get() method**: A utility function provided by the Lodash library, which helps you access nested properties of an object.

**Options Compared**

The benchmark compares three options for accessing nested object properties:

*   **Destructuring approach**
    *   Two variants: one with default values (`destructuringFn`) and one without ( `destructuringFnDynamic` )
    *   Both use destructuring syntax to access the desired property
*   **Lodash _.get() method approach**:
    *   Three variants: one for accessing properties with a single key (`lodashFn`), one using dynamic keys with dot notation (`lodashFnDynamic`), and one using dynamic keys with array notation (`lodashFnDynamicArray`)
*   **Empty input**
*   **Finding an item in the nested object**

**Pros and Cons of Each Approach**

### Destructuring approach

Pros:

*   Simple and readable syntax
*   Can be efficient for accessing properties with default values

Cons:

*   May not perform well when dealing with dynamic or unknown property names
*   Requires ECMAScript 2015 (ES6) support, which may not be universally available

### Lodash _.get() method approach

Pros:

*   Flexible and powerful utility function for accessing nested properties
*   Can handle dynamic keys and array notation
*   Works with a wide range of JavaScript versions

Cons:

*   May introduce additional overhead due to the use of a library function
*   Less readable syntax compared to destructuring

### Empty input

This option is likely used as a baseline or warm-up test, ensuring that the environment and benchmarking setup are correct before running the actual tests.

**Other Considerations**

The benchmark also considers various factors that may affect performance, such as:

*   **Device and browser support**: The results are obtained from a Chrome browser on a Windows 10 system.
*   **Input size and complexity**: The nested object contains multiple levels of properties, which increases the difficulty of accessing them.

By considering these factors and options, MeasureThat.net provides a comprehensive benchmarking scenario that helps developers understand the performance characteristics of their JavaScript code.

Related benchmarks:

es6 destructuring vs lodash _.get string and array keys (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

Created: 5 years ago by: Guest

Jump 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

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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