Benchmark: Array.find vs Array.filter on large dataset

Script Preparation code:

var total = [];
var ids = [10000, 14000, 19999];
for (var i = 0; i < 20000; i++) {
  total.push({id: i, value: Math.floor(Math.random() * 1000)});
}

Tests:

Filter
total.filter((item) => ids.includes(item.id));
Find with default
ids.map((id) => total.find((item) => item.id === id)).filter((item) => !!item) ?? []
Find without default
ids.map((id) => total.find((item) => item.id === id))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Filter
Find with default
Find without default

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36 OPR/107.0.0.0 (Edition Yx GX)

Browser/OS: Opera 107 on Windows

View result in a separate tab

Find without default

29K/s

Find with default

29K/s

Filter

885/s

View exact numbers

Test name	Executions per second
✓ Find without default	29,013 Ops/sec
Find with default	28,989 Ops/sec
Filter	885 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark.

**Benchmark Overview**

The benchmark compares three approaches to filter an array of objects in JavaScript:

1. `Array.prototype.filter()`
2. Using `map()` followed by `find()` with and without providing a default value
3. Using `map()` followed by `find()` without providing a default value

The benchmark generates a large dataset (20000 elements) and repeats the filtering process on this data using each of the three approaches.

**What is tested?**

* The performance of `Array.prototype.filter()`
* The performance of using `map()` followed by `find()` with a default value
* The performance of using `map()` followed by `find()` without providing a default value

**Options compared**

1. `Array.prototype.filter()`: This is the built-in JavaScript method for filtering arrays.
2. Using `map()` followed by `find() with default value`: This approach uses `map()` to create a new array with transformed elements, and then uses `find()` to find the first element that satisfies the condition. The `filter` function returns the first element or an empty array if no element is found.
3. Using `map()` followed by `find()` without default value: This approach uses `map()` to create a new array with transformed elements, and then uses `find()` to find the first element that satisfies the condition.

**Pros and Cons**

* **`Array.prototype.filter()`**: Pros:
	+ Built-in method
	+ Efficient
	+ Clear syntax
* Cons:
	+ May not be optimized for large datasets
	+ May have performance issues due to iteration over the entire array
* Using `map()` followed by `find()` with default value: Pros:
	+ Can avoid unnecessary iterations over the entire array
	+ Allows for a more functional programming style
* Cons:
	+ Requires two separate function calls, which may be slower than a single call to `filter()`
	+ May require additional checks for null or undefined values
* Using `map()` followed by `find()` without default value: Pros:
	+ Avoids unnecessary iterations over the entire array
	+ Allows for a more functional programming style
* Cons:
	+ Requires two separate function calls, which may be slower than a single call to `filter()`
	+ May not handle cases where no element is found

**Library and syntax**

The benchmark uses the following library:

* None: The benchmark does not rely on any external libraries.

The benchmark uses the following special JavaScript feature or syntax:

* None: There are no special features or syntax used in this benchmark.

**Alternative approaches**

Other alternative approaches for filtering arrays in JavaScript include:

1. Using `reduce()` with a predicate function
2. Using `forEach()` and checking if an element was returned from the callback function
3. Using `some()` with a predicate function

Each of these approaches has its own trade-offs and may be more or less suitable depending on the specific use case.

In general, it's recommended to use `Array.prototype.filter()`, as it is built-in, efficient, and clear in syntax. However, using `map()` followed by `find()` can provide additional benefits for functional programming styles or when working with large datasets.

Array.find vs Array.filter on large dataset (version: 0)

Comparing performance of: `Filter vs Find with default vs Find without default`

Created: 3 years ago by: Guest

Go to the latest result

Filter

Find with default

Find without default

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array.find vs Array.filter on large dataset (version: 0)

Comparing performance of: Filter vs Find with default vs Find without default

Created: 3 years ago by: Guest

Go to the latest result

Filter

Find with default

Find without default

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: `Filter vs Find with default vs Find without default`