Benchmark: Array.map().filter(Boolean) vs Array.flatMap() vs Array.reduce()

Script Preparation code:

var a1 = ['', '1231237', '', '', '', '', 'ergre', '', '', '', '', 'asdf1134', '', '', '123'];
var a2 = ['1231237', '123', '1231237', '123', '1231237', '', '123sdfsdf', 'sdfsdf'],
    result,
    a1 = a1.flatMap((s, i) => i % 2 ? a1 : a2),
    a2 = a2.flatMap((s, i) => i % 2 ? a2 : a1);

Tests:

Array.map().filter(Boolean)
result = a1.map(s => a2.includes(s) && s).filter(Boolean);
Array.flatMap()
result = a1.flatMap(s => s && a2.includes(s) ? [s] : []);
Array.reduce()
result = a1.reduce((acc, s) => (s && a2.includes(s) ? [...acc, s] : acc), []);

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 13 runs

Array.flatMap()

139K/s

Array.reduce()

113K/s

Array.map().filter(Boolean)

108K/s

Fastest: Array.flatMap() (1.3x faster)

View exact numbers

✓ Array.flatMap(): 139,349 ops/sec
• Array.reduce(): 112,526 ops/sec
• Array.map().filter(Boolean): 107,777 ops/sec

Firefox 5 runs

Array.flatMap()

262K/s

Array.map().filter(Boolean)

235K/s

Array.reduce()

45K/s

Fastest: Array.flatMap() (5.8x faster)

View exact numbers

✓ Array.flatMap(): 261,586 ops/sec
• Array.map().filter(Boolean): 235,306 ops/sec
• Array.reduce(): 45,323 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.map().filter(Boolean)
Array.flatMap()
Array.reduce()

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:138.0) Gecko/20100101 Firefox/138.0

Browser/OS: Firefox 138 on Mac OS X 10.15

View result in a separate tab

Array.flatMap()

276K/s

Array.map().filter(Boolean)

275K/s

Array.reduce()

45K/s

View exact numbers

Test name	Executions per second
✓ Array.flatMap()	276,026 Ops/sec
Array.map().filter(Boolean)	274,773 Ops/sec
Array.reduce()	45,323 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 provided benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Definition**

The benchmark compares three different approaches to filter out falsy values from an array:

1. `Array.map().filter(Boolean)`
2. `Array.flatMap()`
3. `Array.reduce()`

**What is being tested?**

Each test case measures the performance of a specific approach in filtering out falsy values from an array.

**Options compared**

The three options are compared as follows:

* `Array.map()` with a conditional filter (`filter(Boolean)`) to remove falsy values
* `Array.flatMap()` without any filters, which would return all elements regardless of truthiness
* `Array.reduce()` with an accumulator that checks for falsy values and includes only true ones

**Pros and Cons of each approach**

1. **`Array.map().filter(Boolean)`**
	* Pros:
		+ Simple and concise syntax
		+ Easy to understand and maintain
	* Cons:
		+ May incur additional overhead due to the filter operation
		+ Not as efficient as other approaches for large arrays
2. **`Array.flatMap()`**
	* Pros:
		+ More concise than `map()` with a conditional filter
		+ Can be more efficient for certain use cases (e.g., when returning an array of values)
	* Cons:
		+ Returns all elements, regardless of truthiness, which may lead to performance issues for large arrays
		+ May not be suitable for filtering out falsy values directly
3. **`Array.reduce()`**
	* Pros:
		+ Can be more efficient than `map()` or `flatMap()` by avoiding unnecessary operations
		+ Allows for a flexible accumulator function to filter out falsy values
	* Cons:
		+ More complex syntax, which can make it harder to understand and maintain
		+ May require additional logic to handle edge cases

**Library usage**

None of the benchmark cases uses any external libraries.

**Special JS feature/syntax**

The benchmark uses `flatMap()` and `reduce()`, which are relatively modern JavaScript features. However, since most browsers support these features, they don't pose a significant challenge for older browsers or those that have not adopted them yet.

In summary, this benchmark provides a clear comparison of three different approaches to filtering out falsy values from an array, highlighting the trade-offs between simplicity, efficiency, and readability.

Array.map().filter(Boolean) vs Array.flatMap() vs Array.reduce() (version: 0) Benchmark.js

comparison of filtering out falsy values from an array

Comparing performance of: `Array.map().filter(Boolean) vs Array.flatMap() vs Array.reduce()`

Created: 5 years ago by: Registered User

Go to the latest result

Array.map().filter(Boolean)

Array.flatMap()

Array.reduce()

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 13 runs

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array.map().filter(Boolean) vs Array.flatMap() vs Array.reduce() (version: 0) Benchmark.js

comparison of filtering out falsy values from an array

Comparing performance of: Array.map().filter(Boolean) vs Array.flatMap() vs Array.reduce()

Created: 5 years ago by: Registered User

Go to the latest result

Array.map().filter(Boolean)

Array.flatMap()

Array.reduce()

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 13 runs

Firefox 5 runs

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: `Array.map().filter(Boolean) vs Array.flatMap() vs Array.reduce()`