Benchmark: Object arrays: findIndex vs for loop for finding and editing an array item.

Script Preparation code:

/* make a new array with 15k items */
var arr = new Array(15000);

/* fill array tems with basic object */
arr.fill({ id: 0 });

/* generate 2 random numbers in our 15k range */
var foo = Math.floor(Math.random() * 15000);
var bar = Math.floor(Math.random() * 15000);

/* set the index of arr[foo] to foo for our tests */
arr[foo].id = foo;

Tests:

findIndex
const bookFreePlatform = (arr, foo, bar) => { /* find array index where id == foo */ var index = arr.findIndex(item => item.id === foo); /* findIndex returns -1 on fail, so test for that */ if ( index != -1 ) { /* ok, we have an index, lets edit that entry, and console log it for fun */ arr[index].id = bar; console.log(arr[index]); } /* return altered array */ return arr; } bookFreePlatform(arr, foo, bar);
for loop
const bookFreePlatform = (arr, foo, bar) => { /* find array item where id == foo */ for (let i = 0; i < arr.length; i++) { /* not an error check, just a simple comparison */ if (arr[i].id === foo) { /* if we got here, it found and index, lets edit it and log it again */ arr[i].id = bar; console.log(arr[i]); /* stop the loop to save time and resources, we're done */ break; } } /* return altered array */ return arr; } bookFreePlatform(arr, foo, bar);

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 12 runs

for loop

43K/s

findIndex

25K/s

Fastest: for loop (1.7x faster)

View exact numbers

✓ for loop: 42,680 ops/sec
• findIndex: 24,592 ops/sec

Firefox 5 runs

for loop

74K/s

findIndex

18K/s

Fastest: for loop (4.1x faster)

View exact numbers

✓ for loop: 74,156 ops/sec
• findIndex: 18,031 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
findIndex
for loop

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 139 on Windows

View result in a separate tab

for loop

27K/s

findIndex

9K/s

View exact numbers

Test name	Executions per second
✓ for loop	26,710 Ops/sec
findIndex	8,786 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The benchmark measures the performance difference between two approaches: using `findIndex` and a traditional `for` loop to find an item in an array, edit its value, and return the modified array.

**Options Compared**

There are two options being compared:

1. **Using `findIndex`**: This method finds the index of the first element in the array that matches the specified condition (in this case, `foo`) and returns it. If no match is found, it returns -1.
2. **Traditional `for` loop**: This approach iterates through each element in the array until a match is found and updates the value at the matched index.

**Pros and Cons**

* **findIndex**:
	+ Pros: More concise and efficient for finding a single item in an array.
	+ Cons: Can be slower if no match is found, as it needs to iterate through the entire array. Additionally, it may not be suitable for finding multiple items or updating values at multiple indices.
* **Traditional `for` loop**:
	+ Pros: More control over the iteration process and can handle multiple matches or updates more efficiently.
	+ Cons: Can be slower than `findIndex` due to the overhead of explicit looping.

**Library and Special JS Features**

The benchmark uses the JavaScript array methods provided by the browser, specifically:

* `findIndex`: a method introduced in ECMAScript 2015 (ES6) that finds the index of the first element in an array that matches the specified condition.
* `forEach` is not used but the use of `for(let i=0;i<arr.length;i++)` suggests JavaScript's for loop syntax, which has been around since early versions of the language.

**Test Preparation Code**

The preparation code generates a large array with 15,000 elements and sets two random indices (`foo` and `bar`) within that range. It then updates the value at index `foo` to match `foo`.

**Other Alternatives**

In addition to `findIndex` and traditional `for` loops, other approaches might include:

* Using `some()` and indexing into the array: `arr.some((item) => item.id === foo) && arr[foo].id = bar`
* Using `map()` or `reduce()`: while these methods are typically used for transforming arrays, they could be used to iterate through an array and update values at specific indices.
* Using a custom implementation using bitwise operations or other optimization techniques.

Object arrays: findIndex vs for loop for finding and editing an array item. (version: 0) Benchmark.js

Test finding an object array via findIndex or by using a for loop, and edit the value of that index.

Comparing performance of: `findIndex vs for loop`

Created: 4 years ago by: Guest

Go to the latest result

findIndex

for loop

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 12 runs

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Object arrays: findIndex vs for loop for finding and editing an array item. (version: 0) Benchmark.js

Test finding an object array via findIndex or by using a for loop, and edit the value of that index.

Comparing performance of: findIndex vs for loop

Created: 4 years ago by: Guest

Go to the latest result

findIndex

for loop

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 12 runs

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `findIndex vs for loop`