Benchmark: map/filter vs reduce vs for

Tests:

map/filter
const tableData = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]; const ids = new Array(100) .fill(null) .map((_, i) => { return tableData[i]; }) .filter(id => id !== undefined);
reduce
const tableData = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]; const ids = new Array(100).fill(null).reduce((acc, _, i) => { if(tableData[i]) { acc[i] = tableData[i] || null } return acc; }, []);
for
const tableData = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]; const total = 100; const result = []; for(let i = 0; i < total; i++) { if(tableData[i]) { result.push(tableData[i]); } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map/filter
reduce
for

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**Benchmark Overview**

The benchmark measures the performance of three different approaches to iterate over an array: `map`, `filter`, and `for`. The test case uses a predefined array, `tableData`, with 100 elements, most of which are equal to 1. The goal is to extract a subset of these elements using each approach.

**Options Compared**

The benchmark compares the performance of three options:

1. **`map/filter`**: This approach uses the `map()` method to create a new array with transformed values and then filters out the unwanted values using the `filter()` method.
2. **`reduce`**: This approach uses the `reduce()` method to accumulate values in an array, starting from an initial value (`[]` in this case).
3. **`for` loop**: This is a traditional approach that uses a `for` loop to iterate over the array elements.

**Pros and Cons of Each Approach**

1. **`map/filter`**:
	* Pros: Efficient use of built-in methods, concise code.
	* Cons: Creates new arrays, which can be memory-intensive for large datasets.
2. **`reduce`**:
	* Pros: Can be more efficient than `map/filter` since it only iterates over the array once.
	* Cons: Requires understanding of the accumulator pattern and can be less readable for some developers.
3. **`for` loop**:
	* Pros: Traditional, easy to understand, no memory allocation required.
	* Cons: Can be slower than other approaches due to the overhead of the loop.

**Library Usage**

None of the benchmark tests use any external libraries or frameworks.

**Special JavaScript Features/Syntax**

None of the test cases explicitly utilize special JavaScript features like `async/await`, generators, or modern methods like `flat()`. The focus is on comparing traditional iteration techniques.

**Browser Results**

The latest benchmark results show:

1. **`for` loop**: 3534647.75 executions per second ( Chrome 113)
2. **`reduce`**: 1280092.875 executions per second (Chrome 113)
3. **`map/filter`**: 79776.59375 executions per second (Chrome 113)

These results indicate that the `for` loop approach is still the fastest, followed by the `reduce` method. The `map/filter` approach is slower due to the creation of new arrays.

Keep in mind that these results may vary depending on the specific browser and system configuration used for testing.

Related benchmarks:

map/filter vs reduce vs for (version: 0)

Comparing performance of: map/filter vs reduce vs for

Created: 5 years ago by: Guest

Jump to the latest result

map/filter

reduce

for

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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