Benchmark: array find vs for-loop vs while

Tests:

find

const arr = Array.from({ length: 20000 }, (_, i) => ({ property: i }))
const elementToFind = 15000;

const element = arr.find((el) => el.property === elementToFind);

​x
 
const arr = Array.from({ length: 20000 }, (_, i) => ({ property: i }))const elementToFind = 15000;​const element = arr.find((el) => el.property === elementToFind);

For-loop

const arr = Array.from({ length: 20000 }, (_, i) => ({ property: i }))
const elementToFind = 15000;

let element = undefined;

for (let i = 0; i < arr.length; i++) {
	if (arr[i].property === elementToFind) {
      element = arr[i];
      break;
    }
}

 
const arr = Array.from({ length: 20000 }, (_, i) => ({ property: i }))const elementToFind = 15000;​let element = undefined;​for (let i = 0; i < arr.length; i++) {    if (arr[i].property === elementToFind) {      element = arr[i];      break;    }}

while

const arr = Array.from({ length: 20000 }, (_, i) => ({ property: i }))
const elementToFind = 15000;

let element = undefined;
let i = 0;
while(element === undefined) {
  if(arr[i].property === elementToFind) {
  	element = elementToFind;
  }
  i++;
}

 
const arr = Array.from({ length: 20000 }, (_, i) => ({ property: i }))const elementToFind = 15000;​let element = undefined;let i = 0;while(element === undefined) {  if(arr[i].property === elementToFind) {    element = elementToFind;  }  i++;}​

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
find
For-loop
while

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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Browser/OS: Chrome 109 on Windows

View result in a separate tab

Test name	Executions per second
find	598.5 Ops/sec
For-loop	634.3 Ops/sec
while	255.8 Ops/sec

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

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

What is being tested?

The provided benchmark tests three approaches to find an element in an array: find, for-loop, and while. The test case uses 20,000 elements in the array, generated using the Array.from method. The goal is to determine which approach performs better in terms of execution speed.

Options compared

The benchmark compares three options:

Find: Uses the find method, which returns the first element that satisfies the provided condition.
For-loop: Iterates through the array using a traditional for loop, checking each element's property until it finds a match.
While: Uses a while loop to iterate through the array, incrementing the index until it finds an element with the desired property.

Pros and Cons of each approach

Find:
- Pros: Efficient and concise, as it uses the optimized find method.
- Cons: May be slower due to the overhead of the find method, especially for large arrays.
For-loop:
- Pros: Can be easily implemented and understood by developers familiar with traditional loops.
- Cons: Generally slower than the optimized find method, as it requires manual iteration.
While:
- Pros: Similar to the for-loop approach, but uses a while loop, which can be more efficient for some use cases.
- Cons: Requires manual incrementing of the index, which can lead to errors if not implemented correctly.

Library and purpose

The Array.from method is used to generate the array, and it's a built-in JavaScript function that creates a new array from an iterable. Its purpose is to provide a convenient way to create arrays with a specified length and initial value.

Special JS feature/syntax

There are no special JS features or syntax mentioned in this benchmark. However, it does use ES6+ syntax, such as the const keyword, => arrow functions, and template literals (\r\n) for better readability.

Other alternatives

If you're interested in exploring alternative approaches, here are a few options:

Linear search: An even simpler approach than the for-loop or while loop methods, where you iterate through the array one element at a time, checking each element's property.
Binary search: A more efficient approach for large arrays, where you use the middle element of the array to estimate the position of the target element and repeat the process until the target is found.
Native methods: Depending on the specific use case, native JavaScript methods like Array.prototype.indexOf() or Array.prototype.includes() might be used instead of the find method.

Keep in mind that these alternatives might not be suitable for all scenarios and can have different performance characteristics.

The choice of approach ultimately depends on your specific requirements, such as the size of the array, the frequency of element access, and any additional constraints or optimizations you need to consider.

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**What is being tested?**

The provided benchmark tests three approaches to find an element in an array: `find`, `for-loop`, and `while`. The test case uses 20,000 elements in the array, generated using the `Array.from` method. The goal is to determine which approach performs better in terms of execution speed.

**Options compared**

The benchmark compares three options:

1. **Find**: Uses the `find` method, which returns the first element that satisfies the provided condition.
2. **For-loop**: Iterates through the array using a traditional for loop, checking each element's property until it finds a match.
3. **While**: Uses a while loop to iterate through the array, incrementing the index until it finds an element with the desired property.

**Pros and Cons of each approach**

1. **Find**:
	* Pros: Efficient and concise, as it uses the optimized `find` method.
	* Cons: May be slower due to the overhead of the `find` method, especially for large arrays.
2. **For-loop**:
	* Pros: Can be easily implemented and understood by developers familiar with traditional loops.
	* Cons: Generally slower than the optimized `find` method, as it requires manual iteration.
3. **While**:
	* Pros: Similar to the for-loop approach, but uses a while loop, which can be more efficient for some use cases.
	* Cons: Requires manual incrementing of the index, which can lead to errors if not implemented correctly.

**Library and purpose**

The `Array.from` method is used to generate the array, and it's a built-in JavaScript function that creates a new array from an iterable. Its purpose is to provide a convenient way to create arrays with a specified length and initial value.

**Special JS feature/syntax**

There are no special JS features or syntax mentioned in this benchmark. However, it does use ES6+ syntax, such as the `const` keyword, `=>` arrow functions, and template literals (`\r\n`) for better readability.

**Other alternatives**

If you're interested in exploring alternative approaches, here are a few options:

1. **Linear search**: An even simpler approach than the for-loop or while loop methods, where you iterate through the array one element at a time, checking each element's property.
2. **Binary search**: A more efficient approach for large arrays, where you use the middle element of the array to estimate the position of the target element and repeat the process until the target is found.
3. **Native methods**: Depending on the specific use case, native JavaScript methods like `Array.prototype.indexOf()` or `Array.prototype.includes()` might be used instead of the `find` method.

Keep in mind that these alternatives might not be suitable for all scenarios and can have different performance characteristics.

Related benchmarks:

array find vs for-loop vs while (version: 0)

Comparing performance of: find vs For-loop vs while

Created: one year ago by: Guest

Jump to the latest result