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

HTML Preparation code:

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

Script Preparation code:

var arr = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.".split(" ");

Tests:

for-loop
let val; for(i=0; i<arr.length; i++){ var value = arr[i]; if (value === 'dolore') { val = value; break; } }
for..of
let val; for (var value of arr) { if (value === 'dolore') { val = value; break; } }
Array.find()
let val = arr.find(value => value === 'dolore');

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: 4 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser/OS: Firefox 115 on Windows

View result in a separate tab

Test name	Executions per second
for-loop	1805547.0 Ops/sec
for..of	4802960.5 Ops/sec
Array.find()	18055958.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases to understand what is being tested.

**Benchmark Definition**

The website uses a JSON object to define the benchmark, which includes:

1. **Name**: A unique identifier for the benchmark.
2. **Description**: A brief summary of the benchmark.
3. **Script Preparation Code**: A snippet of JavaScript code that sets up the test environment.
4. **Html Preparation Code**: An HTML snippet that creates a container element for the test.

**Individual Test Cases**

The benchmark defines three individual test cases:

1. **for-loop**
2. **for..of**
3. **Array.find()**

Each test case has its own JavaScript code that performs a specific operation on an array of strings.

**Test Case 1: for-loop**

This test case uses a traditional `for` loop to iterate through the array and find the first occurrence of the string `'dolore'`. The loop variable `i` is incremented manually, and when the condition `value === 'dolore'` is met, the value of the loop variable `val` is set to the matched string.

**Test Case 2: for..of**

This test case uses the `for...of` loop syntax, which allows iterating over an array without a traditional loop variable. The `value` variable takes on each element of the array in turn, and when `value === 'dolore'`, the value of the loop variable `val` is set.

**Test Case 3: Array.find()**

This test case uses the `Array.prototype.find()` method to find the first occurrence of the string `'dolore'` in the array. The callback function takes two arguments, `value` (the current element) and `index` (the index of the current element).

**Options Compared**

The benchmark compares three different approaches:

1. **for-loop**: A traditional loop using an explicit variable.
2. **for..of**: An iterator-based loop without a manual loop variable.
3. **Array.find()**: A method-based approach that uses a callback function.

**Pros and Cons of Each Approach**

Here are some general pros and cons for each approach:

* **for-loop**:
	+ Pros: Control over the iteration process, no dependency on the array's implementation details.
	+ Cons: More verbose, requires manual variable management.
* **for..of**:
	+ Pros: Concise and readable, eliminates the need for manual loop variables.
	+ Cons: Limited control over the iteration process, may not work as expected with certain array implementations.
* **Array.find()**:
	+ Pros: Concise and expressive, leverages the built-in method to find a value in an array.
	+ Cons: May be slower than traditional loops or `for..of` due to additional overhead.

**Library/Features Used**

The benchmark uses the following features:

1. **for...of**: A modern JavaScript feature that allows iterating over arrays without manual loop variables.
2. **Array.prototype.find()**: A method that searches for a value in an array, returning the first matching element or `undefined` if none is found.

**Special JS Feature/Syntax**

The benchmark uses modern JavaScript features (e.g., `for...of`) but does not require any special syntax or extensions to run.

**Other Alternatives**

If you wanted to compare different approaches, you could consider adding additional test cases, such as:

1. **Using a traditional loop with an index variable**: Similar to the `for-loop` test case.
2. **Using a while loop**: Another way to iterate over an array without using a `for` loop.
3. **Using `Array.prototype.forEach()`**: A method that iterates over an array, but does not return a value like `find()`.

Keep in mind that each alternative approach would require careful consideration of its pros and cons, as well as potential variations in performance and code readability.

Related benchmarks:

find() vs for...of vs for-loop simple (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: Registered User

Jump to the latest result

for-loop

for..of

Array.find()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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