Benchmark: es6 destructuring vs lodash _.get

es6 destructuring vs lodash _.get (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 null input vs lodash null input vs destructuring undefined input vs lodash undefined input vs destructuring dynamic key vs lodash dynamic key

Created: 7 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 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 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 null input
test(destructuringFn, null);
test(destructuringFn, null);
lodash null input
test(lodashFn, null);
test(lodashFn, null);
destructuring undefined input
let input; test(destructuringFn, input);
let input;
test(destructuringFn, input);
lodash undefined input
let input; test(lodashFn, input);
let input;
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(lodashFn, input, 'documents');
const input = { contextMenu: { data: { documents: [{ id: 'doc' }] } } };
test(lodashFn, 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 null input
lodash null input
destructuring undefined input
lodash undefined input
destructuring dynamic key
lodash dynamic key

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:77.0) Gecko/20100101 Firefox/77.0

Browser/OS: Firefox 77 on Ubuntu

View result in a separate tab

Test name	Executions per second
destructuring with defaults, empty input	68897296.0 Ops/sec
lodash get, empty input	3063274.5 Ops/sec
destructuring with defaults, find item	18837910.0 Ops/sec
lodash get, find item	2160528.5 Ops/sec
destructuring null input	109657968.0 Ops/sec
lodash null input	53679824.0 Ops/sec
destructuring undefined input	111116376.0 Ops/sec
lodash undefined input	55228308.0 Ops/sec
destructuring dynamic key	19644854.0 Ops/sec
lodash dynamic key	2055996.5 Ops/sec

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

Let's break down the provided benchmark definition and test cases to understand what is being tested, compared, and their pros and cons.

Benchmark Definition:

The benchmark compares the performance of two approaches:

ES6 destructuring: A JavaScript feature that allows extracting values from objects using a syntax like const { prop } = obj;.
Lodash _.get: A popular utility library function that extracts a value from an object using a dot notation or bracket notation.

Script Preparation Code:

The script preparation code defines four functions:

destructuringFn(input): A static version of the destructuring function, which assumes the input object has a specific structure.
destructuringFnDynamic(input, key): A dynamic version of the destructuring function, which extracts a value from an object using a dynamically provided key.
lodashFn(input): The Lodash _.get function applied to the input object.
lodashFnDynamic(input, key): The Lodash _.get function applied to the input object with a dynamic key.

Html Preparation Code:

The HTML preparation code includes the Lodash library.

Test Cases:

The test cases execute each of the four functions on different input scenarios and measure their execution time. The input scenarios cover various cases, such as:

Empty objects
Objects with default values
Objects with dynamically provided keys

Comparison:

The benchmark compares the performance of each function across different input scenarios. It measures the execution time for each approach and provides the results in a table format.

Pros and Cons:

Here's a brief analysis of the pros and cons of each approach:

ES6 destructuring:
- Pros:
  - Efficient for simple cases with known object structure.
  - Provides a concise syntax for extracting values.
- Cons:
  - May fail or produce incorrect results if the object structure is unknown or dynamic.
Lodash _.get:
- Pros:
  - Robust and reliable for handling dynamic object structures.
  - Provides a flexible syntax for accessing nested values.
- Cons:
  - Adds an external dependency (the Lodash library).
  - May be slower due to the overhead of function calls.

Conclusion:

The benchmark provides a comprehensive comparison of two approaches to extracting values from objects. The results suggest that:

For simple cases with known object structure, ES6 destructuring is efficient and concise.
For dynamic or complex object structures, Lodash _.get provides a robust and reliable solution.

By understanding the strengths and weaknesses of each approach, developers can choose the best fit for their specific use case.

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases to understand what is being tested, compared, and their pros and cons.

**Benchmark Definition:**

The benchmark compares the performance of two approaches:

1. **ES6 destructuring**: A JavaScript feature that allows extracting values from objects using a syntax like `const { prop } = obj;`.
2. **Lodash _.get**: A popular utility library function that extracts a value from an object using a dot notation or bracket notation.

**Script Preparation Code:**

The script preparation code defines four functions:

1. `destructuringFn(input)`: A static version of the destructuring function, which assumes the input object has a specific structure.
2. `destructuringFnDynamic(input, key)`: A dynamic version of the destructuring function, which extracts a value from an object using a dynamically provided key.
3. `lodashFn(input)`: The Lodash _.get function applied to the input object.
4. `lodashFnDynamic(input, key)`: The Lodash _.get function applied to the input object with a dynamic key.

**Html Preparation Code:**

The HTML preparation code includes the Lodash library.

**Test Cases:**

The test cases execute each of the four functions on different input scenarios and measure their execution time. The input scenarios cover various cases, such as:

* Empty objects
* Objects with default values
* Objects with dynamically provided keys

**Comparison:**

The benchmark compares the performance of each function across different input scenarios. It measures the execution time for each approach and provides the results in a table format.

**Pros and Cons:**

Here's a brief analysis of the pros and cons of each approach:

1. **ES6 destructuring**:
	* Pros:
		+ Efficient for simple cases with known object structure.
		+ Provides a concise syntax for extracting values.
	* Cons:
		+ May fail or produce incorrect results if the object structure is unknown or dynamic.
2. **Lodash _.get**:
	* Pros:
		+ Robust and reliable for handling dynamic object structures.
		+ Provides a flexible syntax for accessing nested values.
	* Cons:
		+ Adds an external dependency (the Lodash library).
		+ May be slower due to the overhead of function calls.

**Conclusion:**

The benchmark provides a comprehensive comparison of two approaches to extracting values from objects. The results suggest that:

1. For simple cases with known object structure, ES6 destructuring is efficient and concise.
2. For dynamic or complex object structures, Lodash _.get provides a robust and reliable solution.

By understanding the strengths and weaknesses of each approach, developers can choose the best fit for their specific use case.

Related benchmarks: