Benchmark: datablob find() vs for...of vs for-loop

HTML Preparation code:

<div id='test'></div>

Script Preparation code:

var obj = {
    CALLBACK: {
      Valid: true,
      Data: [
        {
          NumSeqMarket: 7189,
          NumSeqCarnet: 967,
          IdPartener: -1,
          IdFrame: 1,
          IdUser: -1,
          Ecran: "*",
          symbol: "",
          Data: "1\u0002Regular Trading\u000212:22:31",
          Espace: 1,
        },
        {
          NumSeqMarket: 7189,
          NumSeqCarnet: 967,
          IdPartener: -1,
          IdFrame: 2,
          IdUser: -1,
          Ecran: "*",
          symbol: "",
          Data: "IAM\u0002108.00\u00020.00\u0003MNG\u00021701.00\u00020.00",
          Espace: 1,
        },
      ],
    },
  };

Tests:

for-loop
var val; for (index = 0; index < obj.CALLBACK.Data.length; index++) { const frameData = obj.CALLBACK.Data[index]; if (frameData.IdFrame === 2) { val = frameData; break; } }
for..of
var val; for (var value of obj.CALLBACK.Data) { const frameData = obj.CALLBACK.Data[index]; if (frameData.IdFrame === 2) { val = frameData; break; } }
Array.find()
let val = obj.CALLBACK.Data.find(node => node.IdFrame === 2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for-loop
for..of
Array.find()

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 126 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for-loop	949305.9 Ops/sec
for..of	4276716.0 Ops/sec
Array.find()	14639982.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of different JavaScript loops is an essential task for any web developer or performance enthusiast.

**Benchmark Overview**

The provided benchmark compares three ways to find a specific element in an array:

1. **Native `for` loop**: A traditional loop using the `for` keyword, which increments an index variable until it reaches the desired length.
2. **`for...of` loop**: A newer syntax introduced in ECMAScript 2015, which allows iterating over arrays without an explicit index variable.
3. **`.find()` method**: A built-in array method that returns the first element matching a provided callback function.

**Comparison of Loops**

### Native `for` Loop

* **Pros**:
	+ Wide support across browsers and platforms.
	+ Can be optimized for performance, especially with manual indexing and caching.
* **Cons**:
	+ Requires manual indexing and incrementing, which can lead to errors if not implemented correctly.
	+ May require additional memory allocation for the index variable.

Example code:
```javascript
for (index = 0; index < obj.CALLBACK.Data.length; index++) {
  const frameData = obj.CALLBACK.Data[index];
  if (frameData.IdFrame === 2) {
    val = frameData;
    break;
  }
}
```

### `for...of` Loop

* **Pros**:
	+ Concise and expressive syntax, reducing the chance of errors.
	+ Eliminates the need for manual indexing, making it easier to maintain.
* **Cons**:
	+ Lower performance compared to native `for` loops due to overhead from the iterator object.
	+ Limited support across older browsers and platforms.

Example code:
```javascript
for (var value of obj.CALLBACK.Data) {
  const frameData = value;
  if (frameData.IdFrame === 2) {
    val = frameData;
    break;
  }
}
```

### `.find()` Method

* **Pros**:
	+ High-level and concise syntax, making it easier to understand and maintain.
	+ Built-in support across most modern browsers and platforms.
	+ Can be optimized with callback functions for better performance.
* **Cons**:
	+ May have higher overhead due to the creation of an iterator object.
	+ Limited control over iteration compared to native `for` loops.

Example code:
```javascript
let val = obj.CALLBACK.Data.find(node => node.IdFrame === 2);
```

**Benchmark Results**

The provided benchmark results show:

* `.find()` method outperforms both `for...of` and native `for` loops, with a 33.7x and 34.6x speedup respectively.
* `for...of` loop is faster than the native `for` loop, but still slower by 23.4x.

**Considerations**

When choosing between these approaches, consider the trade-offs:

* Performance: Native `for` loops might be a better choice for performance-critical applications, while `.find()` method might be sufficient for most use cases.
* Code readability and maintainability: `for...of` loop is often preferred due to its concise syntax, but may require additional memory allocation.

**Other Alternatives**

If the benchmark were to be modified or expanded:

* **Array.prototype.some()**: Similar to `.find()`, but returns as soon as a matching element is found.
* **Array.prototype.every()**: Returns true if all elements match the provided callback function.
* **Using `Map` data structure instead of arrays**: Can offer better performance and scalability for large datasets.

These alternatives would depend on the specific use case and requirements.

Related benchmarks:

datablob find() vs for...of vs for-loop (version: 0)

Testing the difference between native loops and find()

Comparing performance of: for-loop vs for..of vs Array.find()

Created: one year ago by: Guest

Jump to the latest result

for-loop

for..of

Array.find()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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