Benchmark: Object arrays: map + indexOf vs for loop vs findIndex 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);
Map + IndexOf
const bookFreePlatform = (arr, foo, bar) => { /* find array index where id == foo */ var index = arr.map(item => item.id).indexOf(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);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
findIndex
for loop
Map + IndexOf

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:129.0) Gecko/20100101 Firefox/129.0

Browser/OS: Firefox 129 on Windows

View result in a separate tab

Test name	Executions per second
findIndex	59375.5 Ops/sec
for loop	76016.3 Ops/sec
Map + IndexOf	11090.9 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark measures the performance of three approaches to find an element in an array and update its value:

1. **findIndex**: Uses the `findIndex` method, which returns the index of the first element that satisfies the provided condition (in this case, `item.id === foo`). If no such element is found, it returns -1.
2. **for loop**: Iterates through the array using a traditional `for` loop to find the element with the matching `id`.
3. **Map + IndexOf**: Uses the `map` method to create an array of `id`s and then uses the `indexOf` method to find the index of the first occurrence of `foo` in that array.

**Options Compared**

The three options are compared in terms of their performance, which is measured by the number of executions per second (ExecutionsPerSecond). The goal is to identify the fastest approach for finding and updating an element in a large array.

**Pros and Cons of Each Approach**

1. **findIndex**:
	* Pros: Efficient and concise implementation.
	* Cons: May be slower than other approaches if the array is very large, since it uses a linear search.
2. **for loop**:
	* Pros: Can be faster for small to medium-sized arrays due to the overhead of `map` and `indexOf`.
	* Cons: More verbose and error-prone compared to `findIndex`.
3. **Map + IndexOf**:
	* Pros: Can be faster than `findIndex` for large arrays, since it uses a more efficient search algorithm.
	* Cons: Requires creating an additional array using `map`, which can consume more memory.

**Library Used**

None. The benchmark uses built-in JavaScript methods and data structures (arrays).

**Special JS Features or Syntax**

The `findIndex` method is used to find the index of an element in an array, while the `for` loop iterates through the array manually using a traditional loop construct. No special JS features or syntax are used beyond these basic language constructs.

**Other Alternatives**

Other approaches that could be considered include:

* Using `forEach` instead of a traditional `for` loop.
* Using `reduce` to find and update the element in a single pass through the array.
* Using a different search algorithm, such as binary search, which might be more efficient for large arrays.

However, these alternatives are not explicitly tested in this benchmark.

Related benchmarks:

Object arrays: map + indexOf vs for loop vs findIndex for finding and editing an array item. (version: 0)

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 vs Map + IndexOf

Created: one year ago by: Guest

Jump to the latest result

findIndex

for loop

Map + IndexOf

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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