Benchmark: map vs reduce - MeasureThat.net

Script Preparation code:

var array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
var callback = x => x * 2;

Tests:

map
array.map(callback);
reduce
array.reduce((acc, x, index) => (acc[index] = callback(x), acc), [])
reduce, defined accu length
array.reduce((acc, x, index) => (acc[index] = callback(x), acc), new Array(array.length))
reduce push
array.reduce((acc, x, index) => (acc.push(callback(x)), acc), []);
reduce concat
array.reduce((acc, x) => acc.concat(callback(x)), []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map
reduce
reduce, defined accu length
reduce push
reduce concat

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36 SberBrowser/33.0.0.0

Browser/OS: Chrome 141 on Windows

View result in a separate tab

reduce, defined accu length

29.1M/s

reduce

11.9M/s

reduce push

11.3M/s

map

8.1M/s

reduce concat

224K/s

View exact numbers

Test name	Executions per second
✓ reduce, defined accu length	29,138,838 Ops/sec
reduce	11,859,620 Ops/sec
reduce push	11,296,674 Ops/sec
map	8,056,278 Ops/sec
reduce concat	223,521 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Description**

The benchmark is designed to test how fast two different methods can transform all elements from an array to a new array: `map` and `reduce`. The transformation involves multiplying each element by 2. The input array has 20 elements, and the expected output will have the same number of elements with each value doubled.

**Options Compared**

There are four test cases:

1. **`array.map(callback);`**: This method applies a callback function to each element in the array and returns an array with the results.
2. **`array.reduce((acc, x, index) => (acc[index] = callback(x), acc), [])`**: This method iterates over the array, applying a callback function to each element, and accumulates the results in an accumulator array (`acc`). The initial value of `acc` is an empty array.
3. **`array.reduce((acc, x) => acc.concat(callback(x)), [])`**: This method is similar to the previous one but uses `concat()` to concatenate the result arrays instead of assigning to an accumulator variable.

**Pros and Cons**

Here's a brief analysis of each approach:

*   **`map`**:
    *   Pros: Simple, efficient, and widely supported.
    *   Cons: Creates a new array with all the elements multiplied by 2. If performance is critical, this might be a concern due to memory allocation.
*   **`reduce`, defined accu length`**:
    *   Pros: Similar to `map` but avoids creating a new array by reusing the same accumulator array.
    *   Cons: Requires the initial value of `acc` to be set explicitly, which can lead to errors if not done correctly.
*   **`reduce push`**:
    *   Pros: Similar to `reduce`, defined accu length` but modifies the existing accumulator array using `push()`.
    *   Cons: May incur additional overhead due to frequent `push()` operations on an array.
*   **`reduce concat`**:
    *   Pros: Avoids creating a new array by concatenating elements directly into the result array.
    *   Cons: Can lead to memory allocation and copying issues if not implemented correctly.

**Library Used**

None are explicitly mentioned in this benchmark definition.

**Special JavaScript Features or Syntax**

The test cases use modern JavaScript features such as arrow functions (`=>`) and template literals (`\r\n`).

**Benchmark Preparation Code**

The preparation code defines an array `array` with 20 elements, each containing a value from 0 to 19. It also defines a callback function `callback(x) = x * 2` that takes an element `x` as input and returns the doubled value.

**Individual Test Cases**

Each test case includes:

*   A unique name for the test (e.g., "map")
*   The benchmark definition code, which calls either `array.map(callback)` or one of the other three `reduce` methods
*   The expected output array defined in the preparation code

Now that we've walked through the benchmark details, let's look at some alternatives to MeasureThat.net:

1.  **Benchmarking frameworks like Benchmark.js** and **Benchmark**: These libraries provide a simple way to create benchmarks for various JavaScript algorithms.
2.  **Google's closure library**: This suite of tools offers a set of benchmarks that can be used to compare the performance of different JavaScript implementations.
3.  **Node.js built-in performance testing**: Node.js provides an `os` module with a `performance` function that allows you to measure CPU, memory, and I/O usage.

map vs reduce (version: 2)

Transform all elements from an array to a new array

Comparing performance of: `map vs reduce vs reduce, defined accu length vs reduce push vs reduce concat`

Created: 9 years ago by: Registered User

Go to the latest result

map

reduce

reduce, defined accu length

reduce push

reduce concat

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

map vs reduce (version: 2)

Transform all elements from an array to a new array

Comparing performance of: map vs reduce vs reduce, defined accu length vs reduce push vs reduce concat

Created: 9 years ago by: Registered User

Go to the latest result

map

reduce

reduce, defined accu length

reduce push

reduce concat

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: `map vs reduce vs reduce, defined accu length vs reduce push vs reduce concat`