Run results for: Optional chaining vs manual chaining vs loop chaining vs Try/Catch

Run details:

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

Browser: Chrome 131

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Benchmark engine: Benchmark.js

Tests:

Optional chaining
const dataObject = {some: {deep: {hidden: {value: 1}}}}; for (let temp, i = 0; i < 1000; i +=1) { temp = dataObject?.some?.deep?.hidden?.value; temp = dataObject?.some?.deep?.black?.magic; }
Manual chaining
const dataObject = {some: {deep: {hidden: {value: 1}}}}; for (let temp, i = 0; i < 1000; i +=1) { temp = dataObject && dataObject.some && dataObject.some.deep && dataObject.some.deep.hidden && dataObject.some.deep.hidden.value; temp = dataObject && dataObject.some && dataObject.some.deep && dataObject.some.deep.black && dataObject.some.deep.black.magic; }
Loop chaining
const dataObject = {some: {deep: {hidden: {value: 1}}}}; function get(obj, steps) { let value = obj; for (let i = 0, l = steps.length; i < l; i += 1) { if (value && steps[i] in value) { value = value[steps[i]]; continue; } return undefined; } return value; } const path1 = ['dataObject', 'some', 'deep', 'hidden', 'value']; const path2 = ['dataObject', 'some', 'deep', 'black', 'magic']; for (let temp, i = 0; i < 1000; i +=1) { temp = get(dataObject, path1); temp = get(dataObject, path2); }
Try/Catch
const dataObject = {some: {deep: {hidden: {value: 1}}}}; for (let temp, i = 0; i < 1000; i +=1) { try { temp = dataObject.some.deep.hidden.value; temp = dataObject.some.deep.black.magic; } catch(e) {} }