Benchmark: ??= vs manual 3 - MeasureThat.net

Script Preparation code:

function rand() {
  return Math.floor(Math.random * 10000);
}

Tests:

??=
const a = Array.from({ length: 10000 }) for (let i = 0; i < 10000; i++) { const idx = rand() a[idx] ??= 0 a[idx] += 1 }
manual
const a = Array.from({ length: 10000 }) for (let i = 0; i < 10000; i++) { const idx = rand() if (!a[idx]) a[idx] = 0 a[idx] += 1 }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
??=
manual

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Linux

View result in a separate tab

Test name	Executions per second
??=	131.7 Ops/sec
manual	87.3 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to explain the benchmark being measured on MeasureThat.net.

The benchmark is designed to measure the performance difference between two approaches:

1. Null Coalescing Operator (??=)
2. Manual initialization and incrementation

Let's break down each approach:

**Null Coalescing Operator (??=)**

This operator was introduced in ECMAScript 2017 (ES7) as a shorthand for `a[idx] || 0`. It returns the value of `a[idx]` if it exists, or `0` if it doesn't. In this benchmark, we use `a[idx] ??= 0` to initialize `a[idx]` to `0` if it's undefined, and then increment it.

Pros:

* Concise syntax
* Efficient, as it avoids unnecessary null checks

Cons:

* May not be supported in older browsers or environments that don't implement ES7
* Can lead to unexpected behavior if the value being coalesced is a falsy value (e.g., `0`, `false`, etc.)

**Manual initialization and incrementation**

This approach uses an if statement to check if `a[idx]` exists, and initializes it to `0` if it doesn't.

Pros:

* Wide browser support, as this syntax has been around for longer
* Clearer code, making it easier to understand

Cons:

* More verbose syntax compared to the null coalescing operator
* May lead to slower performance due to the additional null check

Now, let's talk about the test cases:

**Test Case 1: ??=**

This test case uses the null coalescing operator (`??=`) to initialize and increment `a[idx]`.

```javascript
const a = Array.from({ length: 10000 });
for (let i = 0; i < 10000; i++) {
  const idx = rand();
  a[idx] ??= 0;
  a[idx] += 1;
}
```

**Test Case 2: Manual**

This test case uses an if statement to manually initialize and increment `a[idx]`.

```javascript
const a = Array.from({ length: 10000 });
for (let i = 0; i < 10000; i++) {
  const idx = rand();
  if (!a[idx]) a[idx] = 0;
  a[idx] += 1;
}
```

In both test cases, we use `Array.from` to create an array of length 10,000, and then iterate over it 10,000 times. In each iteration, we generate a random index (`idx`) and perform the operation specified in the benchmark definition.

The latest benchmark results show that Chrome 126 performs better with the null coalescing operator (`??=`), executing approximately 44.39% more times per second compared to the manual approach.

Other alternatives for this kind of benchmarking include:

* Using other initialization methods, such as `a[idx] = 0` or `a[idx] || 0`
* Adding additional operations, such as array methods (e.g., `push`, `splice`) or object properties
* Testing different browsers, versions, or platforms to assess cross-browser compatibility

Keep in mind that the choice of approach and test cases depends on the specific use case and requirements.

Related benchmarks:

??= vs manual 3 (version: 2)

Comparing performance of: ??= vs manual

Created: one year ago by: Registered User

Jump to the latest result

??=

manual

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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