Benchmark: find() vs for...of vs for-loop more data

HTML Preparation code:

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

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

Script Preparation code:

var arr = [];

for (let i = 0; i < 100; i++) {
	arr.push(i);
}

​x
 
var arr = [];​for (let i = 0; i < 100; i++) {    arr.push(i);}

Tests:

for-loop

let val;
for(i=0; i<arr.length; i++){
  var value = arr[i];
  if (value === 98) {
    val = value;
    break;
   }
}

 
​let val;for(i=0; i<arr.length; i++){  var value = arr[i];  if (value === 98) {    val = value;    break;   }}

for..of

let val;
for (var value of arr) {
  if (value === 98) {
    val = value;
    break;
  }
}

 
​let val;for (var value of arr) {  if (value === 98) {    val = value;    break;  }}

Array.find()
let val = arr.find(node => node.id === 98);
let val = arr.find(node => node.id === 98);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:102.0) Gecko/20100101 Firefox/102.0

Browser/OS: Firefox 102 on Linux

View result in a separate tab

Test name	Executions per second
for-loop	227461.6 Ops/sec
for..of	709191.5 Ops/sec
Array.find()	4273374.5 Ops/sec

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

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

Overview

The benchmark compares three different approaches to find an element in an array:

Native for-loop: A traditional for loop that iterates over the array using an index variable i.
for...of: A newer iteration of the for loop, introduced in ECMAScript 2015 (ES6), which uses a more modern syntax to iterate over arrays.
Array.find(): A method on the Array prototype that searches for an element that satisfies a provided callback function.

Options being compared

The benchmark is testing which approach is faster and more efficient in terms of executions per second.

Pros and Cons of each approach:

Native for-loop:
- Pros: Wide support across older browsers, easy to understand and implement.
- Cons: Can be slower than other approaches due to manual indexing and loop control.
for...of:
- Pros: More modern syntax, easier to read and maintain, and can be faster in some cases.
- Cons: May not work as expected in older browsers that don't support it.
Array.find():
- Pros: Elegant syntax, easy to implement, and can be faster than traditional loops due to optimized implementation.
- Cons: May not work as expected if the array is very large or if the callback function returns multiple values.

Library usage

None of the benchmark tests use any external libraries. However, the Array.find() method is a built-in method on the Array prototype, which means it's implemented by the browser itself and doesn't rely on any external libraries.

Special JavaScript features or syntax

The only special feature used in this benchmark is the for...of loop, which was introduced in ECMAScript 2015 (ES6). This loop uses a more modern syntax to iterate over arrays and can be faster and more efficient than traditional for loops.

Other alternatives

If you wanted to compare other approaches to find an element in an array, some examples include:

Using forEach() method with a callback function
Using the filter() method followed by indexOf()
Using a regular expression search

However, these approaches may not be as efficient or elegant as the native for-loop or Array.find() methods used in this benchmark.

LLMs can make mistakes. Check important info.

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

**Overview**

The benchmark compares three different approaches to find an element in an array:

1. **Native for-loop**: A traditional for loop that iterates over the array using an index variable `i`.
2. **for...of**: A newer iteration of the for loop, introduced in ECMAScript 2015 (ES6), which uses a more modern syntax to iterate over arrays.
3. **Array.find()**: A method on the Array prototype that searches for an element that satisfies a provided callback function.

**Options being compared**

The benchmark is testing which approach is faster and more efficient in terms of executions per second.

**Pros and Cons of each approach:**

1. **Native for-loop**:
	* Pros: Wide support across older browsers, easy to understand and implement.
	* Cons: Can be slower than other approaches due to manual indexing and loop control.
2. **for...of**:
	* Pros: More modern syntax, easier to read and maintain, and can be faster in some cases.
	* Cons: May not work as expected in older browsers that don't support it.
3. **Array.find()**:
	* Pros: Elegant syntax, easy to implement, and can be faster than traditional loops due to optimized implementation.
	* Cons: May not work as expected if the array is very large or if the callback function returns multiple values.

**Library usage**

None of the benchmark tests use any external libraries. However, the `Array.find()` method is a built-in method on the Array prototype, which means it's implemented by the browser itself and doesn't rely on any external libraries.

**Special JavaScript features or syntax**

The only special feature used in this benchmark is the `for...of` loop, which was introduced in ECMAScript 2015 (ES6). This loop uses a more modern syntax to iterate over arrays and can be faster and more efficient than traditional for loops.

**Other alternatives**

If you wanted to compare other approaches to find an element in an array, some examples include:

* Using `forEach()` method with a callback function
* Using the `filter()` method followed by `indexOf()`
* Using a regular expression search

However, these approaches may not be as efficient or elegant as the native for-loop or `Array.find()` methods used in this benchmark.

Related benchmarks:

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

Testing the difference between native loops and find()

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

Created: 2 years ago by: Guest

Jump to the latest result