Benchmark: Array ForEach vs Find

Script Preparation code:

var arr = [];
for (var i = 0; i < 10000; i++) {
  arr[i] = i;
}
var needToFindThis = Math.floor((Math.random() * 10000) + 1);

Tests:

ForEach
var indexFound = -1; arr.forEach((item, index) => { if (item === needToFindThis) { indexFound = index; } });
Find
arr.find((item, index) => { if (item === needToFindThis) { return index; } });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ForEach
Find

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data and explain what's being tested in this JavaScript microbenchmark.

**Overview**
The benchmark is comparing the performance of two approaches: `Array.prototype.forEach()` and `Array.prototype.find()`. Both methods are used to search for an element within an array, but they differ in their execution behavior.

**Test Case 1: ForEach**

The "ForEach" test case uses the `forEach` method to iterate over the array and find the index of a specific element. The benchmark prepares an array of 10,000 elements, each initialized with its index value. Then, it randomly selects an element from the array (between 1 and 10,000) using `Math.floor((Math.random() * 10000) + 1)`.

The test case executes the following code:
```javascript
arr.forEach((item, index) => {
  if (item === needToFindThis) {
    indexFound = index;
  }
});
```
**Test Case 2: Find**

The "Find" test case uses the `find` method to search for an element within the array. The benchmark prepares the same array as in the "ForEach" test case.

The test case executes the following code:
```javascript
arr.find((item, index) => {
  if (item === needToFindThis) {
    return index;
  }
});
```
**Library and Special JS Features**

Both tests use built-in JavaScript methods (`forEach` and `find`) without any external libraries.

There are no special JavaScript features or syntax used in these test cases.

**Approach Comparison**

Here's a brief comparison of the two approaches:

*   **For Each:**
    *   Pros:
        *   More intuitive for some developers who prefer an explicit loop.
        *   Can be useful when you need to perform multiple operations on each element (e.g., `forEach((item, index) => { ... })`).
    *   Cons:
        *   In modern JavaScript, the `forEach` method is generally slower than the `find` method due to its iterative nature.
*   **Find:**
    *   Pros:
        *   Faster and more efficient for searching a single element within an array.
        *   Often preferred in modern JavaScript development due to its concise syntax and performance advantages.

**Other Alternatives**

If you needed to search for multiple elements or perform other operations on each element, you could consider using `forEach` with a callback function. For example:
```javascript
arr.forEach((item, index) => {
  if (item === needToFindThis) {
    console.log(index);
  }
});
```
Alternatively, you can use the `every`, `some`, or `map` methods to perform other operations on each element.

**Benchmark Results**

The latest benchmark results show that the "Find" test case executed approximately 844 times per second on a Chrome 92 browser running on a Mac OS X 10.15.7 operating system, while the "ForEach" test case executed around 691 times per second. This suggests that the `find` method is indeed faster than the `forEach` method for this specific use case.

Keep in mind that benchmark results can vary depending on the system configuration, browser version, and other factors.

Related benchmarks:

Array ForEach vs Find (version: 0)

Comparing performance of: ForEach vs Find

Created: 4 years ago by: Guest

Jump to the latest result

ForEach

Find

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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