Benchmark: es6 destructuring vs lodash _.get

es6 destructuring vs lodash _.get (version: 10)

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: Registered User

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Safari/605.1.15

Browser/OS: Safari 16 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
destructuring with defaults, empty input	16394662.0 Ops/sec
lodash get, empty input	2589685.0 Ops/sec
destructuring with defaults, find item	14848909.0 Ops/sec
lodash get, find item	2355672.8 Ops/sec
destructuring null input	0.0 Ops/sec
lodash null input	9018978.0 Ops/sec
destructuring undefined input	0.0 Ops/sec
lodash undefined input	8901846.0 Ops/sec
destructuring dynamic key	13892219.0 Ops/sec
lodash dynamic key	2296507.8 Ops/sec

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

Benchmark Overview

The provided benchmark compares the performance of two JavaScript approaches: ES6 destructuring and Lodash's get() method. The test cases cover different scenarios, including accessing nested properties, handling null and undefined inputs, and optimizing for empty input.

ES6 Destructuring

ES6 destructuring is a shorthand syntax for extracting values from objects or arrays into variables. In this benchmark, the ES6 destructuring approach uses the following syntax:

const { prop1, prop2 } = obj;

This syntax allows for concise and readable code to access nested properties.

Lodash's get() Method

Lodash's get() method is a utility function that helps retrieve values from objects or arrays. In this benchmark, the Lodash get() method is used with the following syntax:

const value = _.get(obj, 'path.to.prop1,prop2');

This syntax allows for flexible and dynamic path specification to access nested properties.

Performance Comparison

The benchmark results show that ES6 destructuring outperforms Lodash's get() method in most cases, especially when accessing nested properties. However, Lodash's get() method excels when handling null or undefined inputs, as it provides a safer and more explicit way to access values.

Here are some key takeaways from the benchmark results:

ES6 destructuring is generally faster than Lodash's get() method.
Lodash's get() method is slower when accessing nested properties but provides better performance handling null or undefined inputs.
ES6 destructuring can lead to better code readability and conciseness, especially for simple cases.

Advice

Based on the benchmark results, consider the following advice:

Use ES6 destructuring when:
- You need to access nested properties in a concise and readable manner.
- The input data is well-structured and predictable.
Use Lodash's get() method when:
- You need to handle null or undefined inputs safely and explicitly.
- You require flexibility in your path specification (e.g., dynamic paths or nested arrays).

Ultimately, the choice between ES6 destructuring and Lodash's get() method depends on the specific use case, personal preference, and coding style.

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark compares the performance of two JavaScript approaches: ES6 destructuring and Lodash's `get()` method. The test cases cover different scenarios, including accessing nested properties, handling null and undefined inputs, and optimizing for empty input.

**ES6 Destructuring**

ES6 destructuring is a shorthand syntax for extracting values from objects or arrays into variables. In this benchmark, the ES6 destructuring approach uses the following syntax:
```javascript
const { prop1, prop2 } = obj;
```
This syntax allows for concise and readable code to access nested properties.

**Lodash's `get()` Method**

Lodash's `get()` method is a utility function that helps retrieve values from objects or arrays. In this benchmark, the Lodash `get()` method is used with the following syntax:
```javascript
const value = _.get(obj, 'path.to.prop1,prop2');
```
This syntax allows for flexible and dynamic path specification to access nested properties.

**Performance Comparison**

The benchmark results show that ES6 destructuring outperforms Lodash's `get()` method in most cases, especially when accessing nested properties. However, Lodash's `get()` method excels when handling null or undefined inputs, as it provides a safer and more explicit way to access values.

Here are some key takeaways from the benchmark results:

* ES6 destructuring is generally faster than Lodash's `get()` method.
* Lodash's `get()` method is slower when accessing nested properties but provides better performance handling null or undefined inputs.
* ES6 destructuring can lead to better code readability and conciseness, especially for simple cases.

**Advice**

Based on the benchmark results, consider the following advice:

* Use ES6 destructuring when:
	+ You need to access nested properties in a concise and readable manner.
	+ The input data is well-structured and predictable.
* Use Lodash's `get()` method when:
	+ You need to handle null or undefined inputs safely and explicitly.
	+ You require flexibility in your path specification (e.g., dynamic paths or nested arrays).

Ultimately, the choice between ES6 destructuring and Lodash's `get()` method depends on the specific use case, personal preference, and coding style.

Related benchmarks: