Benchmark: forEach mutate object vs map spread copy v2

Tests:

map
const objects = [ { a: 'XzWtv', b: 'sFqrG', c: 'qCbnP' }, { a: 'yjkAu', b: 'vMhlE', c: 'xPqro' }, { a: 'wNztX', b: 'gDypR', c: 'iHklL' }, { a: 'mQjvs', b: 'dKzpt', c: 'aVbcO' }, { a: 'bUefZ', b: 'cRiyG', c: 'uTqxs' } ] objects.map(el => ({...el, d: Math.random()}))
forEach
const objects = [ { a: 'XzWtv', b: 'sFqrG', c: 'qCbnP' }, { a: 'yjkAu', b: 'vMhlE', c: 'xPqro' }, { a: 'wNztX', b: 'gDypR', c: 'iHklL' }, { a: 'mQjvs', b: 'dKzpt', c: 'aVbcO' }, { a: 'bUefZ', b: 'cRiyG', c: 'uTqxs' } ] objects.forEach(el => {el.d = Math.random()})

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

forEach

1.5M/s

map

1.3M/s

Fastest: forEach (1.2x faster)

View exact numbers

✓ forEach: 1,493,999 ops/sec
• map: 1,276,852 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
map
forEach

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_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Browser/OS: Chrome 137 on Mac OS X 10.15.7

View result in a separate tab

forEach

23.0M/s

map

17.0M/s

View exact numbers

Test name	Executions per second
✓ forEach	22,954,522 Ops/sec
map	17,035,556 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 is being tested.

**Benchmark Definition**

The website MeasureThat.net allows users to create custom JavaScript benchmarks. In this case, we have a single benchmark definition that compares two approaches:

1. Using `forEach` to mutate an object
2. Using `map` with spread syntax to create a new object

**Options Being Compared**

Two options are being compared in this benchmark:

### 1. `forEach`

This approach uses the `forEach` method to iterate over an array of objects, modifying each object in place by adding a new property (`d`) with a random value.

```javascript
objects.forEach(el => {el.d = Math.random()})
```

**Pros and Cons**

* Pros:
	+ Simple and straightforward implementation
	+ No need to create a new object or manipulate the original array
* Cons:
	+ May incur performance overhead due to iteration over the entire array

### 2. `map` with Spread Syntax

This approach uses the `map` method to create a new array of objects, where each object is a copy of the original object with an additional property (`d`) added using the spread syntax (`{...el, d: Math.random()}`).

```javascript
objects.map(el => ({...el, d: Math.random()}))
```

**Pros and Cons**

* Pros:
	+ More efficient than `forEach`, as it avoids iteration over the entire array
	+ Creates a new object without modifying the original array
* Cons:
	+ May incur overhead due to creating a new array

**Library and Special JS Features**

In this benchmark, there is no explicit library being used. However, the use of spread syntax (`{...el, d: Math.random()}`) demonstrates modern JavaScript's feature-rich syntax.

**Device and Browser Information**

The latest benchmark results show that Chrome 126 on a Windows desktop produces higher execution counts for both `forEach` and `map` approaches compared to the previous version. This suggests that the performance differences between these two approaches may be platform-dependent or dependent on specific browser optimizations.

**Alternative Approaches**

Other alternatives for achieving similar results could include:

* Using `reduce` instead of `forEach`
* Utilizing array methods like `filter`, `slice`, or `concat`
* Employing more advanced techniques, such as using a custom iterator or using WebAssembly (if applicable)

These alternative approaches would likely have different performance characteristics and may not be suitable for all use cases.

forEach mutate object vs map spread copy v2 (version: 0)

add field into object with forEach vs spread fields into new object with new field in array of objects

Comparing performance of: `map vs forEach`

Created: 2 years ago by: Guest

Go to the latest result

map

forEach

Historical Performance Data aggregated from 5 community runs

Desktop Results:

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

forEach mutate object vs map spread copy v2 (version: 0)

add field into object with forEach vs spread fields into new object with new field in array of objects

Comparing performance of: map vs forEach

Created: 2 years ago by: Guest

Go to the latest result

map

forEach

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 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: `map vs forEach`