Benchmark: Array ForEach vs Find vs for loop

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
var indexFound = arr.find((item, index) => { if (item === needToFindThis) { return index; } });
For
var indexFound = -1; for (var i = 0; i < arr.length; i++) { if (arr[i] === needToFindThis) { indexFound = i; } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ForEach
Find
For

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 9) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/92.0.4515.131 Mobile DuckDuckGo/5 Safari/537.36

Browser/OS: Chrome Mobile 92 on Android

View result in a separate tab

Test name	Executions per second
ForEach	351.4 Ops/sec
Find	426.9 Ops/sec
For	157.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its various components.

**Benchmark Overview**

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

1. `Array.prototype.forEach()`
2. `Array.prototype.find()`
3. A traditional `for` loop

Each approach is implemented with a slight modification: instead of directly comparing `item` with the target value, we store its index when found.

**Comparison Options**

The options being compared are:

* `forEach()` (method)
* `find()` (method)
* Traditional `for` loop

Here's what makes each option different:

*   **forEach()**: Iterates over the array and calls a callback function for each element. It doesn't return anything but instead passes the result to the callback.
*   **Find():** Iterates over the array until it finds a match with the given value, returning its index.

**Pros and Cons**

### `ForEach()`:

Pros: It's a more modern approach that can be used when you need to execute some code for each element in an array.

Cons: Since it doesn't return anything, finding a specific element by its value might not directly translate to getting the element itself with `index`. However, we're storing the index, which solves this problem.

### `Find():`   finds the first element matching the provided value (or `undefined` if no element matches). This function can be less efficient for large arrays as the loop has a chance of terminating earlier than required

Pros: More suitable when you know exactly where to start searching within your array. Also provides more flexibility.

Cons: Since it's just finding an index, not returning the value itself, might need additional steps.

### `For` Loop:

Pros: Easy to implement and doesn't require any built-in methods for this task. Also can be optimized if needed with early termination logic.

Cons: Can look less "javascript-like" when compared with other options like `forEach()` or `find()`.

**Library Usage**

In the benchmark definitions, there's no explicit library usage beyond the standard JavaScript libraries (i.e., DOM APIs and standard libraries). However, the presence of `Math.random()` indicates that this code is intended for use in a browser environment.

**Special JS Features or Syntax**

There doesn't seem to be any special features or syntax being used here.

Related benchmarks:

Array ForEach vs Find vs for loop (version: 0)

Comparing performance of: ForEach vs Find vs For

Created: 3 years ago by: Guest

Jump to the latest result

ForEach

Find

For

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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