Benchmark: map vs reduce/concat

Script Preparation code:

var object = {
    a: {
        foo: 'bar'
    },
    b: {
        foo: 'bar'
    },
    c: {
        foo: 'bar'
    },
    d: {
        foo: 'bar'
    },
    e: {
        foo: 'bar'
    },
    f: {
        foo: 'bar'
    },
    g: {
        foo: 'bar'
    },
}

Tests:

Array.map()
const array = Object.values(object).map(({ foo }) => foo)
Array.reduce()
const array = Object.values(object).reduce((arr, { foo }) => { return arr.concat(foo); }, []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.map()
Array.reduce()

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36

Browser/OS: Chrome 93 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.map()	2560557.5 Ops/sec
Array.reduce()	534924.8 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 provided JSON and explain what's being tested, compared, and the pros/cons of each approach.

**Benchmark Definition**

The benchmark definition is testing two different approaches to transform an object's value into an array: using `Array.prototype.map()` and `Array.prototype.reduce()`. The benchmark is comparing the performance of these two methods on a large object with multiple properties (`object`) that have a common value (`foo`).

**Script Preparation Code**

The script preparation code defines a large object `object` with 11 properties, each containing a string value `'bar'`. This object will be used as input for the benchmark.

**Html Preparation Code**

There is no HTML preparation code provided, which means that the benchmark only runs in a JavaScript environment and doesn't involve any DOM-related operations.

**Individual Test Cases**

The benchmark consists of two individual test cases:

1. `Array.map()`: This test case creates an array from the object's values using the `map()` method.
2. `Array.reduce()`: This test case creates an array from the object's values using the `reduce()` method.

Both methods are called with a callback function that extracts the value of each property (`foo`) and returns it.

**Library**

The `Object.values()` method is used to extract the values of the object's properties. This is a built-in JavaScript method introduced in ECMAScript 2019 (ES11).

**Special JS Feature or Syntax**

There are no special JavaScript features or syntax mentioned in this benchmark.

**Comparison and Pros/Cons**

Both methods (`map()` and `reduce()`) can be used to transform an object's values into an array. However, they have different performance characteristics:

* `Array.prototype.map()` is generally faster because it returns a new array with the transformed values, whereas `Array.prototype.reduce()` modifies the original array.
* `Array.prototype.reduce()` is often preferred when the order of elements matters, as it preserves the original order.

However, `Array.prototype.reduce()` can be slower for large arrays because it needs to iterate over all elements to compute the final result. In contrast, `Array.prototype.map()` can take advantage of parallel processing and caching mechanisms in modern browsers to improve performance.

**Benchmark Results**

The latest benchmark results show that:

* Chrome 93 on a Mac OS X 10.15.7 desktop executes the `map()` method approximately 4 times faster than the `reduce()` method (2560557.5 executions per second vs. 534924.8 executions per second).

**Other Alternatives**

If you want to explore other alternatives, consider the following:

* Using `Array.prototype.forEach()` instead of `map()` or `reduce()`. While it's slower due to its side-effecting nature, it can be useful in certain scenarios.
* Using a library like Lodash's `map` and `compact` functions, which provide more expressive APIs but may incur additional overhead.
* Implementing your own custom transformation function using a traditional loop or recursion.

Keep in mind that the choice of implementation depends on the specific requirements of your project and the trade-offs you're willing to make regarding performance, readability, and maintainability.

Related benchmarks:

map vs reduce/concat (version: 0)

Comparing performance of: Array.map() vs Array.reduce()

Created: 3 years ago by: Guest

Jump to the latest result

Array.map()

Array.reduce()

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