Benchmark: My reduce vs flatMap benchmark for collection

Script Preparation code:

var raw = new Array(250).fill({
    id: 'gid://something/Something/something',
    handle: 'something',
    name: 'Something',
    categories: ['SOMETHING'],
    lastViewedAt: '2022-03-18T21:30:18Z',
    isPinned: false,
});

AخA
 
var raw = new Array(250).fill({    id: 'gid://something/Something/something',    handle: 'something',    name: 'Something',    categories: ['SOMETHING'],    lastViewedAt: '2022-03-18T21:30:18Z',    isPinned: false,});

Tests:

flatMap

const flatMapped = raw.flatMap(({ id, categories, handle, name, lastViewedAt, isPinned }) => {
  if (categories.length === 0) {
    return [];
  }

  return {
    category: categories[0],
    handle,
    url: "https://google.com/",
    name,
    lastViewedAt: lastViewedAt == null ? null : new Date(lastViewedAt),
    author: "someone",
    isPinned,
    type: "something",
    gid: id,
  };
});

​x
 
const flatMapped = raw.flatMap(({ id, categories, handle, name, lastViewedAt, isPinned }) => {  if (categories.length === 0) {    return [];  }​  return {    category: categories[0],    handle,    url: "https://google.com/",    name,    lastViewedAt: lastViewedAt == null ? null : new Date(lastViewedAt),    author: "someone",    isPinned,    type: "something",    gid: id,  };});

reduce

const reduced = raw.reduce(function (array, { id, categories, handle, name, lastViewedAt, isPinned }) {
  if (categories.length === 0) {
    return array;
  }

  array.push({
    category: categories[0],
    handle,
    url: "https://google.com/",
    name,
    lastViewedAt: lastViewedAt == null ? null : new Date(lastViewedAt),
    author: "someone",
    isPinned,
    type: "something",
    gid: id,
  });
  return array;
}, []);

 
const reduced = raw.reduce(function (array, { id, categories, handle, name, lastViewedAt, isPinned }) {  if (categories.length === 0) {    return array;  }​  array.push({    category: categories[0],    handle,    url: "https://google.com/",    name,    lastViewedAt: lastViewedAt == null ? null : new Date(lastViewedAt),    author: "someone",    isPinned,    type: "something",    gid: id,  });  return array;}, []);

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
flatMap
reduce

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; rv:102.0) Gecko/20100101 Firefox/102.0

Browser/OS: Firefox 102 on Windows

View result in a separate tab

Test name	Executions per second
flatMap	15177.9 Ops/sec
reduce	17209.0 Ops/sec

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

Benchmark Overview

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark involves two test cases: reduce and flatMap. Both tests are designed to measure the performance of these two methods on an array of objects.

Test Cases

The first test case, "flatMap", uses the flatMap() method to transform each element in the input array into a new array with the same length. The transformed array is then returned as the result of the benchmark.

The second test case, "reduce", uses the reduce() method to iterate over the input array and accumulate a value that represents the sum of all elements in the array. In this case, the accumulator is an empty array [].

Options Compared

Two options are compared:

flatMap(): This method transforms each element in the input array into a new array with the same length.
reduce(): This method iterates over the input array and accumulates a value that represents the sum of all elements in the array.

Pros and Cons

flatMap():
- Pros: Can be faster for large arrays because it avoids the overhead of function calls and returns an array with the same length as the input.
- Cons: Can be slower for small arrays or when dealing with complex transformations due to the need to create a new array.
reduce():
- Pros: Can handle complex transformations and accumulates values that can be used for further processing.
- Cons: Can be slower than flatMap() for large arrays due to function call overhead.

Library and Purpose

In both test cases, no specific library is used. The flatMap() method is a native JavaScript method that uses the spread operator (...) under the hood, while the reduce() method is also a native JavaScript method.

Special JS Feature or Syntax

No special JS feature or syntax is used in these benchmark cases.

Other Considerations

When choosing between flatMap() and reduce(), consider the following:

If you need to perform a simple transformation on each element, flatMap() might be a better choice.
If you need to accumulate values from multiple elements, reduce() might be a better choice.
If performance is critical for large arrays, consider using flatMap() or optimizing your code using techniques like memoization.

Alternatives

Other alternatives that can be used in place of flatMap() and reduce() include:

map(): Similar to flatMap(), but returns an array with the same length as the input.
**forEach(): Iterates over each element in the input array, but does not accumulate values like reduce()`.
**Array.prototype.filter(): Returns a new array with only elements that pass a test (like categories.length > 0`).

Keep in mind that these alternatives may have different performance characteristics and use cases compared to flatMap() and reduce().

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark involves two test cases: `reduce` and `flatMap`. Both tests are designed to measure the performance of these two methods on an array of objects.

**Test Cases**

The first test case, "flatMap", uses the `flatMap()` method to transform each element in the input array into a new array with the same length. The transformed array is then returned as the result of the benchmark.

The second test case, "reduce", uses the `reduce()` method to iterate over the input array and accumulate a value that represents the sum of all elements in the array. In this case, the accumulator is an empty array `[]`.

**Options Compared**

Two options are compared:

1. **flatMap()**: This method transforms each element in the input array into a new array with the same length.
2. **reduce()**: This method iterates over the input array and accumulates a value that represents the sum of all elements in the array.

**Pros and Cons**

* **flatMap()**:
	+ Pros: Can be faster for large arrays because it avoids the overhead of function calls and returns an array with the same length as the input.
	+ Cons: Can be slower for small arrays or when dealing with complex transformations due to the need to create a new array.
* **reduce()**:
	+ Pros: Can handle complex transformations and accumulates values that can be used for further processing.
	+ Cons: Can be slower than `flatMap()` for large arrays due to function call overhead.

**Library and Purpose**

In both test cases, no specific library is used. The `flatMap()` method is a native JavaScript method that uses the spread operator (`...`) under the hood, while the `reduce()` method is also a native JavaScript method.

**Special JS Feature or Syntax**

No special JS feature or syntax is used in these benchmark cases.

**Other Considerations**

When choosing between `flatMap()` and `reduce()`, consider the following:

* If you need to perform a simple transformation on each element, `flatMap()` might be a better choice.
* If you need to accumulate values from multiple elements, `reduce()` might be a better choice.
* If performance is critical for large arrays, consider using `flatMap()` or optimizing your code using techniques like memoization.

**Alternatives**

Other alternatives that can be used in place of `flatMap()` and `reduce()` include:

* **map()**: Similar to `flatMap()`, but returns an array with the same length as the input.
* **forEach()`: Iterates over each element in the input array, but does not accumulate values like `reduce()`.
* **Array.prototype.filter()`: Returns a new array with only elements that pass a test (like `categories.length > 0`).

Keep in mind that these alternatives may have different performance characteristics and use cases compared to `flatMap()` and `reduce()`.

Related benchmarks:

My reduce vs flatMap benchmark for collection (version: 0)

Comparing performance of: flatMap vs reduce

Created: 2 years ago by: Registered User

Jump to the latest result