Benchmark: map vs reduce/concat vs reduce/push vs reduce/spread

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().concat()
const array = Object.values(object).reduce((arr, { foo }) => { return arr.concat(foo); }, []);
Array.reduce().push()
const array = Object.values(object).reduce((arr, { foo }) => { arr.push(foo); return arr }, []);
Array.reduce() spread
const array = Object.values(object).reduce((arr, { foo }) => { return [...arr, foo]; }, []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.map()
Array.reduce().concat()
Array.reduce().push()
Array.reduce() spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 104 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.map()	4480210.5 Ops/sec
Array.reduce().concat()	943257.8 Ops/sec
Array.reduce().push()	4384685.5 Ops/sec
Array.reduce() spread	2477613.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**What is being tested?**

MeasureThat.net is testing four different ways to process an array in JavaScript:

1. `Array.prototype.map()`
2. `Array.prototype.reduce()` with three variations:
	* `concat()`: using the `concat()` method to concatenate arrays
	* `push()`: using the `push()` method to append elements to an array
	* `spread`: using the spread operator (`...`) to create a new array from an existing one
3. `Array.prototype.reduce().concat()`
4. `Array.prototype.reduce().push()`

**Options comparison**

Here's a brief overview of each option:

* **`map()`**: This method creates a new array with the results of applying a provided function on every element in the original array.
* **`reduce()` with `concat()`**: This method applies a provided function to each element in the array and reduces it to a single value. In this case, it concatenates arrays using the `concat()` method.
* **`reduce()` with `push()`**: Similar to `reduce() with concat()`, but instead of concatenating arrays, it appends elements to an existing array using `push()`.
* **`reduce()` with spread**: This method creates a new array from an existing one by spreading its elements into a new array.
* **`reduce().concat()` and `reduce().push()`**: These two variations are essentially equivalent, as they both apply the `reduce()` method followed by either concatenating or appending to an array.

**Pros and Cons**

Here's a brief summary of each option:

* **`map()`**: Pros:
	+ Efficient in terms of memory usage
	+ Easy to read and maintain
	Contras:
	+ Creates a new array, which can be memory-intensive for large datasets
* **`reduce()` with `concat()` and `push()`**:
	+ Pros: Can handle large datasets efficiently, easy to implement
	Cons:
	- Not as efficient as `map()` in terms of memory usage
	- May lead to performance issues if not implemented correctly
* **`reduce()` with spread**: Pros:
	+ Memory-efficient, as it only creates a new array with the spread elements
	+ Easy to read and maintain
Contras:
	- Less intuitive than other options
* **`reduce().concat()` and `reduce().push()`**:
	+ Equivalently efficient to each other

**Libraries used**

There are no libraries explicitly mentioned in the provided benchmark definitions. However, `Object.values()` is a built-in method that returns an array of object values.

**Special JS features or syntax**

None mentioned in this specific benchmark.

Related benchmarks:

map vs reduce/concat vs reduce/push vs reduce/spread (version: 0)

Comparing performance of: Array.map() vs Array.reduce().concat() vs Array.reduce().push() vs Array.reduce() spread

Created: 3 years ago by: Guest

Jump to the latest result

Array.map()

Array.reduce().concat()

Array.reduce().push()

Array.reduce() spread

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