Benchmark: Optional chaining vs manual chaining vs loop chaining vs try catch

Tests:

Optional chaining
const dataObject = {some: {deep: {hidden: {value: 1}}}}; for (let temp, i = 0; i < 10000; 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 < 10000; 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 < 10000; 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 < 10000; i +=1) { try { temp = dataObject.some.deep.hidden.value; } catch(e) {} try { temp = dataObject.some.deep.black.magic; } catch(e) {} }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Optional chaining
Manual chaining
Loop chaining
Try/Catch

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 14_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.1 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 14 on iOS 14.2

View result in a separate tab

Test name	Executions per second
Optional chaining	230362.0 Ops/sec
Manual chaining	229255.6 Ops/sec
Loop chaining	174.3 Ops/sec
Try/Catch	66.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided benchmark.

**Benchmark Overview**

The benchmark compares the performance of four approaches to access nested properties in an object:

1. Optional Chaining (?.)
2. Manual Chaining (using dot notation and explicit null checks)
3. Loop Chaining (using a loop with indices)
4. Try/Catch (using try-catch blocks to access nested properties)

**Optional Chaining**

* Description: Uses the optional chaining operator (?.) to access nested properties.
* Syntax: `dataObject.some.deep.hidden.value`
* Pros:
	+ Concise and readable syntax
	+ Reduces boilerplate code and errors
* Cons:
	+ May not work as expected for objects with missing properties or null values
	+ Not supported in older browsers

**Manual Chaining**

* Description: Uses dot notation and explicit null checks to access nested properties.
* Syntax: `dataObject.some.deep.hidden.value`
* Pros:
	+ Works consistently across all browsers, including older ones
	+ Allows for more control over error handling
* Cons:
	+ More verbose syntax can lead to errors if not used carefully

**Loop Chaining**

* Description: Uses a loop with indices to access nested properties.
* Syntax: `for (let temp, i = 0; i < 10000; i +=1) { ... }`
* Pros:
	+ Allows for more control over the iteration process
	+ Can be useful in certain scenarios where other approaches fail
* Cons:
	+ More complex and error-prone than other approaches

**Try/Catch**

* Description: Uses try-catch blocks to access nested properties.
* Syntax: `try { temp = dataObject.some.deep.hidden.value; } catch(e) {}`
* Pros:
	+ Allows for explicit error handling
	+ Works consistently across all browsers, including older ones
* Cons:
	+ More verbose syntax can lead to errors if not used carefully

**Library Used**

None of the benchmark approaches rely on any specific libraries.

**Special JavaScript Features/Syntax**

The benchmark uses the optional chaining operator (?.) and the nullish coalescing operator (??), which are relatively recent features introduced in ECMAScript 2020. These features may not be supported in older browsers or environments.

**Other Alternatives**

Some alternative approaches to accessing nested properties include:

* Using the `in` operator to check for property existence: `if ('some' in dataObject && 'deep' in dataObject.some && 'hidden' in dataObject.some.deep) { ... }`
* Using a recursive function to access nested properties: `function get(obj, path) { if (path.length === 0) return obj; let key = path.shift(); if (!obj || !(key in obj)) return null; return get(obj[key], path); }`
* Using a library like Lodash or Ramda that provides utility functions for working with objects and arrays.

In summary, the benchmark compares four approaches to accessing nested properties in an object, each with its pros and cons. The optimal approach depends on the specific use case, performance requirements, and browser support considerations.

Related benchmarks:

Optional chaining vs manual chaining vs loop chaining vs try catch (version: 0)

Comparing performance of: Optional chaining vs Manual chaining vs Loop chaining vs Try/Catch

Created: 4 years ago by: Guest

Jump to the latest result

Optional chaining

Manual chaining

Loop chaining

Try/Catch

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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