Benchmark: es6 destructuring vs lodash _.get string and array keys with toPath and manual caching 2

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

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 vs argument destructuring vs customGet

Created: 10 months 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 getByPath(o, path) {
    let prev = 0;
    let offset = 0;
    while (o !== undefined && o !== null && (offset = path.indexOf(".", offset)) !== -1) {
        o = o[path.slice(prev, offset)];
        prev = ++offset;
    }

    return o?.[path.slice(prev)];
}

function destructuring(input) {
  const { contextMenu: { data: { documents = [] } = {} } = {} } = input;
  return documents;
}

function destructuringDynamic(input, key) {
  const { contextMenu: { data: { [key]: documents = [] } = {} } = {} } = input;
  return documents;
}

function destructuringArgument({ contextMenu: { data: { documents = [] } = {} } = {} }) {
  return documents;
}

function lodashGet(input) {
  return _.get(input, 'contextMenu.data.documents', []);
}

function lodashGetDynamic(input, key) {
  return _.get(input, `contextMenu.data.${key}`, []);
}

function lodashGetDynamicArray(input, key) {
  return _.get(input, ['contextMenu', 'data', 'key'], []);
}

const paths = Object.create(null);
function lodashGetDynamicCachedArray(input, key) {
  return _.get(input, paths[key] ??= _.toPath(`contextMenu.data.${key}`), []);
}

function customGet(input, path) {
  return getByPath(input, path);
}

Tests:

destructuring with defaults, empty input
destructuring({});
lodash get, empty input
lodashGet({});
destructuring with defaults, find item
destructuring({ contextMenu: { data: { documents: [{ id: 'doc' }] } } });
lodash get, find item
lodashGet({ contextMenu: { data: { documents: [{ id: 'doc' }] } } });
destructuring dynamic key
destructuringDynamic({ contextMenu: { data: { documents: [{ id: 'doc' }] } } }, 'documents');
lodash dynamic key
lodashGetDynamic({ contextMenu: { data: { documents: [{ id: 'doc' }] } } }, 'documents');
lodash dynamic key using array
lodashGetDynamicArray({ contextMenu: { data: { documents: [{ id: 'doc' }] } } }, 'documents');
lodash dynamic key using manually cached array
lodashGetDynamicCachedArray({ contextMenu: { data: { documents: [{ id: 'doc' }] } } }, 'documents');
argument destructuring
destructuringArgument({ contextMenu: { data: { documents: [{ id: 'doc' }] } } });
customGet
customGet({ contextMenu: { data: { documents: [{ id: 'doc' }] } } }, 'contextMenu.data.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
lodash dynamic key using manually cached array
argument destructuring
customGet

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 10 months ago)

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

Browser/OS: Chrome 114 on Windows

View result in a separate tab

Test name	Executions per second
destructuring with defaults, empty input	22376840.0 Ops/sec
lodash get, empty input	4156590.0 Ops/sec
destructuring with defaults, find item	5280824.0 Ops/sec
lodash get, find item	2268294.0 Ops/sec
destructuring dynamic key	5280110.0 Ops/sec
lodash dynamic key	2195646.0 Ops/sec
lodash dynamic key using array	3013700.0 Ops/sec
lodash dynamic key using manually cached array	2964581.0 Ops/sec
argument destructuring	5294817.0 Ops/sec
customGet	1440846.0 Ops/sec

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

Created: 10 months 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

lodash dynamic key using manually cached array

argument destructuring

customGet

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A