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: 8 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 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 null input
test(destructuringFn, null);
lodash null input
test(lodashFn, null);
destructuring undefined input
let input; test(destructuringFn, input);
lodash undefined input
let input; 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(lodashFn, 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 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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

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: