Benchmark: Map vs Filter - MeasureThat.net

Script Preparation code:

var arr = [];
var mapArr = [];
for (var i = 0; i < 12345; i++) {
  arr[i] = i;
}

function someFn(i) {
  return i % 2 === 0;

}

Tests:

FilterFilter
arr.filter(someFn);
Map
arr.map((el, idx) => { if (el % 2 === 0) { mapArr.push(el); } });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
FilterFilter
Map

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/21A329 Twitter for iPhone/10.7

Browser/OS: Mobile Safari 17 on iOS 17.0

View result in a separate tab

Test name	Executions per second
FilterFilter	4332.6 Ops/sec
Map	1469.1 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 explain what's being tested.

**Benchmark Definition**

The benchmark is comparing two approaches: `arr.filter(someFn)` (Filter) and `arr.map((el, idx) => { ... })` (Map). These are both array methods in JavaScript that can be used to filter or transform an array of elements.

**What's being tested?**

The benchmark is testing the performance difference between these two approaches. Specifically:

* Is the `filter()` method more efficient than the `map()` method for this particular use case?
* How does the browser (in this case, Mobile Safari 17) execute these methods?

**Options compared**

In this case, we have only two options being compared: Filter and Map.

**Pros and Cons of each approach**

**Filter**

Pros:

* Faster execution time, since it stops iterating as soon as it finds a match
* Fewer unnecessary computations

Cons:

* May require more iterations to find the desired result (since it's stopping early)
* May not be suitable for all use cases where you need to transform the entire array

**Map**

Pros:

* Allows for transformations on each element of the array
* Can be useful when you need to perform multiple operations on each element

Cons:

* More computations, since it processes every single element in the array
* May be slower due to unnecessary iterations

**Library usage (none)**

In this benchmark, no libraries are used.

**Special JS feature or syntax (none)**

There is no special JavaScript feature or syntax being tested in this benchmark. It's a simple comparison of two common array methods.

**Other alternatives**

If you're looking for alternative approaches to filtering and mapping arrays, some other options might include:

* Using `forEach()` with a callback function
* Using a custom loop (e.g., a `for` loop)
* Using a library like Lodash (which provides `filter()` and `map()` methods)

Keep in mind that the performance differences between these approaches can be significant, so it's worth considering the specific requirements of your use case when choosing an approach.

Related benchmarks:

Map vs Filter (version: 0)

Comparing performance of: FilterFilter vs Map

Created: one year ago by: Guest

Jump to the latest result

FilterFilter

Map

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):