Benchmark: Lodash.get vs Property dot notation deeply vs optional chaining

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/lodash/4.16.0/lodash.min.js"></script>

Script Preparation code:

var person = {name: 'Frederick', lastName: 'Corcino Alejo', details: {eyes: 'brown', hobbies: ['skiing', 'cooking']}};

Tests:

Lodash get
_.get(person, 'details.hobbies.1');
Native naive
person.details.hobbies[1]
Guarded native
person && person.details && person.details.hobbies && person.details.hobbies.length && person.details.hobbies[1]
Shimmed get.
const get = (obj, path, defaultValue) => { const result = String.prototype.split.call(path, /[,[\].]+?/) .filter(Boolean) .reduce((res, key) => (res !== null && res !== undefined) ? res[key] : res, obj); return (result === undefined || result === obj) ? defaultValue : result; }; get(person, 'details.hobbies.1');
Optional chaining
person?.details?.hobbies?.[1]

Rendered benchmark preparation results:

Previous results

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

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36

Browser/OS: Chrome 91 on Mac OS X 10.15.7

Lodash.get vs Property dot notation deeply vs optional chaining (version: 0)